Friday 23 September 2011

Photoshop font to CSS font

This is my solution to convert Photoshop font into CSS font.

First reset the style sheet: http://developer.yahoo.com/yui/reset/
Next set the font size in the body CSS to 100%.

body
{
font-size: 100%;
}

Next, get the font-size in pixels from Photoshop e.g. 25px. Convert to ems = 1.563em . I use this tool: http://pxtoem.com/ my base font size is 16px.
Then do the same for the line height in Photoshop e.g. 45px = 2.813em.

Now for the CSS. The font size remains the same but the line height must be divided by the font size e.g. 2.813em / 1.563em = 1.799em;

.mystyle
{
font-size: 1.563em;
line-height: 1.799em;
}