pixel to em css converstion chat

Sunday, February 1st, 2009

read the rest at:  http://jontangerine.com/silo/css/pixels-to-ems/

Formula to calculate em equivalent for any pixel value required

1 ÷ parent font size (px) × required pixels = em equivalent

Example: 770px wide, centred elastic layout using CSS and ems

N.B. This assumes the browser default font size is unchanged at 16px. body{} selector set to font-size:1em;. Using the forumla*:

1 ÷ 16 × 770 = 48.125em

CSS:

body{
font-size:1em;
text-align:center;
}

div{
width:48.125em;
margin;0 auto;
}

HTML:

<html>
<body>

<div>
…
</div>

</body>
</html>

*I deliberately hooked the formula for the tutorial around 1px, as a value that designers can easily relate to. However, there is a faster way of calculating an em value that I use. You need to be familliar with the sticky issue of CSS inheritance and know the font size of the parent, but it goes like this:

Required element pixel value ÷ parent font size in pixels = em value

So, our required width of 770px in ems can be calculated like this:

770 ÷ 16 = 48.125em