demo · v133
Where the half-leading shows up
Three real-world places designers spend the most time fighting the cap-to-baseline whitespace built into web text: pill buttons, number tiles, and coloured card headings. Toggle text-box: trim-both cap alphabetic and watch them snap to the visible glyph bounds.
number tile
Untrimmed: large digit sits visually too high.
card with coloured heading
News from the river
A heron stood under the alder bridge until the pleasure boat had gone.
Untrimmed: the blue band looks unbalanced — more space below the type than above.
the CSS
/* trim cap-height above and baseline below */
text-box: trim-both cap alphabetic;Half-leading is a font-metric artefact: every line of text has invisible whitespace above the cap height and below the alphabetic baseline. For body type it's fine. For UI — pill buttons, badges, big digits, coloured headings — it makes the visible glyph sit visually too high in its box. The 2020s workaround was line-height: 1 plus carefully hand-tuned padding, regenerated whenever the type face changed. text-box moves the trim into CSS proper: the box now hugs the glyph bounds, so vertical centring is what your eyes already think it is.