Jon Tan / silo / CSS / Pixels to Ems Conversion Table for CSS

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 16px font size has not being changed. It also assumes that the <body> has font size set to 1em or 100%.

px font-sizeem equivalent* Rounded to 3dp 1px in emsNotes
110.689*0.091
120.7500.083
130.814*0.077
140.8750.071
150.938*0.067
161.0000.063Browser 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 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

Sharing

  1. Tweet this or follow Jon on Twitter
  2. Del.ici.ious logoAdd to del.icio.us
  3. Digg iconPost to Digg
  4. Feed iconRSS / Atom feed (log)