CSS font units: em, rem, ex, ch, cap
Five units tied to the current font, each measuring something different:
| Unit | What it measures |
|---|---|
em | font-size of the current element |
rem | font-size of the root (<html>) element |
ex | x-height — height of a lowercase “x” |
ch | advance measure of the “0” glyph |
cap | cap height — height of an uppercase letter |
em compounds when nested. A 1.2em element inside another 1.2em element is 1.44× the root size. rem skips all that — always anchored to :root.
ch is the useful one people overlook. Setting width: 60ch on a prose container gives you a readable line length regardless of font size. It’s not exactly “60 characters wide” (monospace aside), but it’s close enough and adapts as the font changes.
ex and cap are handy for optical alignment — centering an icon with text, nudging a superscript, that kind of thing:
/* nudge icon to sit at cap height */
.icon {
height: 1cap;
width: 1cap;
}
/* rough measure: ex ≈ 0.5em for most fonts */
sup {
vertical-align: 1ex;
}