A companion reference to the article, The Incredible Em and Elastic Layouts With CSS.

The em values in the table assume that the generic browser default setting of 16pxfontsize has not being changed. It also assumes that the <body> has fontsize set to 1em or 100%.

pxfont-size em equivalent * Rounded to 3dp 1px in ems Notes

110.689*0.091

120.7500.083

130.814*0.077

140.8750.071

150.938*0.067

161.0000.063 Browser standard default

171.064*0.059

181.1250.056

191.188*0.053

201.2500.050

211.313*0.048

221.3750.046

231.438*0.044

241.5000.042

251.563*0.040

261.6250.039

271.688*0.037

281.7500.036

291.813*0.035

301.8750.033

Formula to calculate em equivalent for any pixel value required

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

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

N.B. This assumes the browser defaultfontsize 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 fontsize of the parent, but it goes like this: