I’m in a CSS mailing list and this morning, Vince over at Ghodmode Development shared a fun little experiment showing that an em isn’t an “m” in CSS. I, along with others, more or less responded with “d’uh”. We’ve seen this phenomenon for years and didn’t totally understand the purpose. In fact, I attempted to devise an experiment that would prove when an em is an “m”, and I couldn’t. Turns out, I don’t know anything about font sizing. Who knew?
A little review on typography
I have to give a nod to Terry Acker and acknowledge firstly that typeface is the consistent shape of your letters or “glyphs”; font is actually typeface plus size. He would correct me when I would misuse the terms, so I want to be sure I get that right.
There’s two methods for measuring typeface: relative and absolute. Relative measurements mean that you have some sort of baseline glyph(i.e. letter) that determines the size of everything else. Absolute is a hard number.
In CSS, your absolute measurements are px, cm, points, and pica. Your relative measurements are em and ex.
What I didn’t know that I didn’t know
I remember from some book on typography years ago that the “em” was the width of an uppercase “M”. The “ex” was the height of a lowercase “x”. I assumed that in CSS em and ex behaved the same way. They do not.
In CSS, the em is not a horizontal measurement. Now, we went back and forth in this discussion group on what the em was. At first I thought it was a horizontal measurement. Then I thought it was an “em square” (meaning it was a square constructed out of the height and width of the “m”). I was corrected both times, but not with an explanation for how the browser figures out how large the em really is. So I read the spec.
What I know now about font-sizes
The CSS specs are actually circular. If you look up the spec on font-size, you’ll see this:
The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares.
Then you read this:
On all other properties, ’em’ and ‘ex’ length values refer to the computed font size of the current element. On the ‘font-size’ property, these length units refer to the computed font size of the parent element.
Got it. Font-size really is the “em square”! So let’s look at what the em is:
Relative units are:
em: the ‘font-size’ of the relevant font
ex: the ‘x-height’ of the relevant font
The ’em’ unit is equal to the computed value of the ‘font-size’ property of the element on which it is used. The exception is when ’em’ occurs in the value of the ‘font-size’ property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)
So the font-size is the em square and the em is the (computed) font-size. We just found our snaking eating its tail.
And now, I think I know something again about font-size and line-height
Now, a typographical oddity is finally explained (I think):
Your line-height and letter-spacing look fine — so long as the glyphs are more or less square. But, if you have typeface where the letters are really wide (basically a wide rectangle), this explains all that space in your line-height. Similarly, if your letters are taller than they are wide (a tall rectangle), it explains your letter spacing. The browser is forming an “em-square” and it’s messing with your visual space.
Dealing with abnormally rectangular typefaces
If you want a really tight looking line-height, especially after a large or abnormally wide typefaces, try this out:
body{
line-height: 2ex
}
Instead of your line-height getting set by the text width, it’s getting set by the true height of the letter. Browsers will calculate ex based on either the height of the “x”, or doing (em)/2.
If your text is a tall rectangle (taller than it is wide), here’s how to fix the letter-spacing which might appear abnormally wide. We set the letter spacing against the ex; essentially using the height to fix the width.
body{
letter-spacing: -.5ex;
}
So, what’s the point of all this
The em is an excellent measurement because it’s circular. Ultimately, the browser picks the size, which means if you never use pixels in your font sizes, you’ll have typography that works well in any browser. The ex is a great measure because it’s relative to the typography, and I for one will be using ex for setting line-height from now on.