Translating Photoshop font sizes to scalable and accurate web font sizes can be a real challenge! I found a great link today with an very useful equation and a mention of a technique I’ve used previously. I used the combination today for a client project.

The challenge in translating designs is that designers often use points for fonts as opposed to pixels, so you have to be able to convert between the two. Another challenge is that browsers render font sizes differently.

I always want fonts to scale so I like using em’s. 1em is a different size on different browsers, so it needs to be reset at the start of the CSS stylesheet. I do this using:

body {
font-size: 62.5%; /*Sets all fonts to 10px*/
}


Today, I also combined that with the relative font equation and got great results, although I’m not 100% sure the approximate conversion of points to pixels comparison table is representative of all browsers.

Here’s the equation:

em_r = px_t ÷ px_p, where

em_r = result font size, in em’s;
px_t = target font size, in px;
px_p = parent element’s font size, in px;

I noticed also that if you are using Photoshop, you can change your rulers preference to use pixels for font sizes to figure out the pixel equivalent and use the relative font equation to calculate the em value. This takes the guess work out of converting points to pixels in font sizes. Then you can easily use the font size reset technique and the relative font size equation to calculate appropriate ems.

I’m looking for the best solution for scalable fonts so if you have another technique, please share or link in a comment.

Additional Resources:

• Simple Relative Font Equation
• Approximate Conversion of Points to Pixels