v145 · CSS · Font Size Scaling

Font Size Scaling

Why percentages are the natural unit for typographic spacing: the same % value maintains the same visual rhythm at any font size, while px values become relatively smaller as text grows and relatively larger as text shrinks.

Chrome 145 required for percentage letter-spacing/word-spacing. The comparison below uses inline styles — in older browsers the percentage column falls back to the browser's normal spacing.

letter-spacing at multiple sizes

Same letter-spacing: 5% at different font sizes. Notice the spacing always feels proportionally consistent. A fixed 3px gets overwhelmed by large text and crowds small text.

5%
3px
Font size Percentage spacing Fixed px spacing

word-spacing at multiple sizes

Same word-spacing: 25% at different text sizes. The extra space between words scales with the font — inter-word rhythm is preserved.

word-spacing: 25% (percentage)

Large type

Body text

Small print

word-spacing: 8px (fixed)

Large type

Body text

Small print

the reference unit: U+0020 advance width

The CSS spec defines the percentage as relative to the advance width of the space character (U+0020) in the current font at the current size. This is different from em (cap height) and ch (advance width of '0'). On a typical system font at 16px, the space character is roughly 4–5 px wide — so letter-spacing: 25% adds about 1–1.25 px of extra space between characters.

/* The percentage is relative to U+0020 advance width */
/* For a 16px system font where space ≈ 4.5 px: */

letter-spacing: 25%;  /* ≈ 1.1 px of extra space per character gap */
letter-spacing: 100%; /* ≈ 4.5 px — about one space character worth */

/* For a 32px heading (space ≈ 9 px): */
letter-spacing: 25%;  /* ≈ 2.25 px — scales naturally */

/* em is relative to font-size (cap height), not space width */
letter-spacing: 0.1em; /* ≈ 1.6 px at 16px — different reference point */

see also