The em, the en, and three dashes
Four horizontal marks that look alike, mean entirely different things, and are wrong on most pages on the web. A hyphen joins, an en dash spans, an em dash interrupts — and a minus sign is none of the three.
There are four horizontal marks in ordinary text and they are not interchangeable. Getting them right is the cheapest quality signal available to a page, because it costs nothing and almost nobody bothers.
| Mark | Character | Width | Job |
|---|---|---|---|
| Hyphen | - |
narrow | joins words: well-set, twenty-one |
| En dash | – |
one en | spans and relations: pp. 12–18, Paris–Lyon |
| Em dash | — |
one em | an interruption in a sentence |
| Minus | − |
figure width | arithmetic, and nothing else |
The one that is always wrong
The minus sign. Almost every page that shows a negative number shows it with a hyphen, which is narrower than the digits it sits beside and sits at the wrong height. In a column of figures the difference is obvious once seen: the hyphens are too high and too short, and the column stops lining up.
Important
If a page shows numbers in a table, the minus sign and the tabular figures matter more than the typeface does. Both are one line of CSS, and both are usually missing.
Em dash spacing is a house decision
British practice sets a spaced en dash – like this – where American practice sets a closed-up em dash—like this. Both are correct. What is not correct is mixing them within one publication, and the mixing usually happens because the two came in from different sources.
Warning
Do not fix this with a find-and-replace across a whole site. A hyphen in a URL, a code sample or a Vietnamese word broken across a line is not a dash, and a blind replacement turns working links into dead ones.
Tip
Type them rather than hunting for them. On a Mac, en is Option-hyphen and em is Shift-Option-hyphen; on Windows, Alt-0150 and Alt-0151. Two shortcuts, learned once, and the problem stops recurring.
Where they come from
The names are literal. An em was the width of a cast M — actually the width of the body the type was cast on, which for most faces was about the width of an M. An en was half that. Both are still defined that way in CSS, where 1em is the font size and has nothing to do with the letter M at all.
Caution
1em in CSS is the computed font size of the element, so it compounds when nested. Two 0.9em elements inside each other give 0.81, not 0.9, and a sidebar nested three deep is how text ends up at 66% of the size somebody set.
Note
The typographic em and the CSS em share a name and a lineage, but a typographic em is a horizontal measure and the CSS one is a font size. They agree for square-bodied faces and diverge for everything else.