Convert typographic properties from Photoshop to CSS

Even though Sketch is very popular amongst designers these days, Photoshop remains as the most used app for screen design.

We as front end developers often have the task to translate certain Photoshop values into CSS units.

Most often it gets troublesome when converting typography from Photoshop into the browser. That has to do with different units or no units at all in Photoshop as well as the rendering of text in Photoshop compared to browser rendering.

To circumvent these problems, I recommend you suggest that the designer on your team uses typecast.com. It's a webapp that let's the user design the typographic layout right with CSS in the browser. It makes collaboration between designer and developer very easy.

If you don't have the luxury to work with typecast tho, here are some useful infos on how to convert PS typography values into CSS units.

Line Height

Let's start by talking about line height.

If the designer defines a line height in Photoshop, it's relatively easy. You calculate line height/font size which gets you a dynamic line-height value, which is detached from the px values.

For example:
Photoshop font size 58px, Photoshop line height 86px:
86px / 58px = 1,482758621 is in CSS:

.class {
    font-size: 58px;
    line-height: 1.5;
}

You could also use the very long value, but I like to bring the values to a round figure.

(If you work with static px font sizes and line height in CSS, you could also just copy the px values from Photoshop. But I don't like/recommend that.)

If there is no line height defined in the Photoshop document, you are left with the value 'auto'. This is were it gets tricky.

Ever wondered to which value the Photoshop 'auto' defaults to?

'auto' line height in Photoshop is equal to 120% which in CSS is line-height: 1.2;

Letter Spacing

The other finicky typographic attribute is letter spacing.

Photoshop latter spacing (Adobe calls it letter tracking) has no unit. Luckily you can calculate the CSS letter-spacing in em like so:

Photoshop Letter Tracking/1000 = letter-spacing in em

For example a letter tracking of 20 in Photoshop results in letter-spacing: 0,02em (20/1000 = 0,02).

I hope these two tips make converting typographic properties from Photoshop to CSS a little bit easier for you next time.