Converting px to em

An em is a unit of measurement in the field of typography, equal to the point size of the current font. This unit is not defined in terms of any specific typeface, and thus is the same for all fonts at a given point size. So, 1 em in a 16 point typeface is 16 points.

The web standards and accessibility perfectionists among you will no doubt be avid em advocates, whereas the CSS newcomers among you may not have known the em existed or how to use it. There are valid arguments for and against using the em, here’s a list of its pros and cons:

Pros

  • Text-resize accessibility support in IE6 & IE7.
  • Can create elastic layouts (although this may now be considered redundant due to modern browsers’ zoom feature).
  • Promotes DBG (Design by Grid) and typographic excellence.
  • The overall font-size of a website can be changed by altering a stylesheet in a single place e.g. Changing the font size of an element will in turn relatively re-size any text that appears in the element’s children. This could also be considered a con!

Cons

  • Calculation needed.
  • CSS maintenance can be more difficult on larger scale projects with multiple developers of varying CSS expertise.
  • The overall font-size of a website can be changed by altering a stylesheet in a single place e.g. Changing the font size of an element will in turn relatively re-size any text that appears in the element’s children. This could also be considered a pro!

I’m not going to try and convince you to use ems, but it definitely helps to be aware of them and know how they work. All too often have I seen a developer copy and paste CSS from one stylesheet to another in the hope that they can mimmick the look and feel of a particular widget, only to find that their website’s fonts have been blown all out of proportion! This is a tell tale sign that relative font sizes are being used somewhere, and this usually means ems.

The em is a relative font size

The value of an em will always be relative to a base size. This is why a paragraph of text on one website will not look the same as on another website even if both paragraphs are defined as having a font size of 1em.

Example 1

<html>
<head>
  <style type="text/css">
    body {font-size:10px;}
    .widget-1 {font-size:1em;}
    .widget-2 {font-size:2em;}
  </style>
</head>
<body>
  <div class="widget-1">Widget 1</div>
  <div class="widget-2">Widget 2</div>
</body>
</html>
  • Widget 1 would have a screen font size of 10px (10 x 1).
  • Widget 2 would have a screen font size of 20px (10 x 2).

Example 2

<html>
<head>
  <style type="text/css">
    body {font-size:10px; line-height:1.5em;}
    .parent {font-size:2em;}
    .child {font-size:1.5em;}
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Child</div>
  </div>
</body>
</html>
  • The parent’s screen font size would be 20px (10 x 2) with a line height of 30px (20 x 1.5).
  • The child’s screen font size would be 30px (10 x 2 x 1.5) also with a line height of 30px.

The calculation

In the following example we want to write some additional CSS to ensure that the child element has a font size of 10px:

<html>
<head>
  <style type="text/css">
    body {font-size:16px;}
    .parent {font-size:0.75em;}
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Child</div>
  </div>
</body>
</html>

First of all you need to know the font size of the parent element:

16 x 0.75 = 12px

Using this we can then calculate the equivalent em value of 1px:

1/12 = 0.083em

Now we know the em value of 1px we can then multiply this by the actual pixel value we want:

0.083 x 10 = 0.83em

So the full calculation looks like:

(1/12) x 10 = 0.83em

Which can be simplied to:

10/12 = 0.83em

So all you really need to know is:

Child font size/Parent font size = em value

And the resulting CSS and HTML is:

<html>
<head>
  <style type="text/css">
    body {font-size:16px;}
    .parent {font-size:0.75em;}
    .child {font-size:0.83em;}
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Child</div>
  </div>
</body>
</html>

It’s quite simple really. The only time it can get complicated is when you want to add a child element, with a specific font size, to a hierarchy of nested elements. Typically you would have to individually calculate the font size at each level. Utilising a tool such as Firebug will aid you greatly in these situations as it allows you to select any element on the page and check its font size in pixels, regardless of whether or not is was defined using ems in the stylesheet. You could also try this handy em calculator.

In “real life”

Typically if ems are being used to define font sizes on a website you will not find any declarations being made in px, even on root elements like html or body. This allows everything to be relative and scalable and provide accessible content resizing via a browser’s text re-size option.

The good news is that modern browsers provide a consistent baseline font size of 16px. So if you wanted a default font size of 12px for your website you can define the body style as:

body {font-size:0.75em;}

The bad news is that IE6 and IE7 are bugged and do not correctly re-size text when the body’s font size is defined using ems (the resizing is very exaggerated and will shrink and grow text to unreadable proportions). The workaround to this bug is to define the body’s font size using a percentage:

body {font-size:75%;}

This works because 75% of 16px is 12px. If you wanted a default font size of 11px you would use 69%. Percentages are obviously another relative unit, and are used extensively for building liquid layouts. Generally if you want to relatively scale your fonts you should stick to the em though, as it provides the best support for implementing consistent spacing and line heights.

Example websites built using ems

Take a look at the following sites that use ems for examples of how to structure your stylesheets.

About this entry

You’re currently reading “Converting px to em,” an entry on Web Demon

Published:
3.16.09 / 1pm
Category:
HTML and CSS
Tags:
, , , , ,