— Mar 20, 2013 —

A misconception of the em

I have always been under the impression that an em was derived from the width of the character 'm' in your chosen font.

Wikipedia informs us that:

An em is a unit of measurement in the field of typography, equal to the currently specified point size. The name of em is related to M. Originally the unit was derived from the width of the capital "M" in the given typeface.

The key part in this phrase is 'Originally'.

When you use em in CSS, it equates to the value of the font-size attribute.

And since the font-size attribute determines the height of the font, this is where it derives the value of the em.

So in CSS, an em equates to the height of the font, rather than the width of the 'M' character as it does in print terms.

The good news is that we can test this.

We can take a pretty standard font, something like Verdana (yes, I know it's horrible, but it's only to make a point), and a taller, thinner font like League Gothic.

So I popped off to FontSquirrel, and downloaded the font-face kit for League Gothic.

Once I had the files, I jumped into demo.html and adjusted a few things.

Firstly I duplicated the h1 tags and amended the content slightly to read as:

<h1 class="fontface">EMs in League Gothic</h1>
<h1 class="verdana">EMs in Verdana</h1>

And then amended the CSS rules like this:

h1.fontface {font: 60px/68px 'LeagueGothicRegular' }
h1.verdana {font: 60px/68px Verdana; }
h1 { letter-spacing: 0em; }

And from this we got:

Now we can change the letter-spacing property to see how much spacing we get using the em:

h1 { letter-spacing: 1em; }

And this is what we get:

As you can quite easily see, the distance between the letters in League Gothic appears greater than that of Verdana, showing us that an em in CSS is based on the height of the font, rather than the width of the 'M'.