Trim the Text Box
SHOULD: Use `text-box: trim-both cap alphabetic` to remove the font's reserved space and half-leading, so symmetric padding becomes optically symmetric instead of leaving text riding low in badges, chips and short buttons. This is progressive enhancement — ship pre-tuned padding as the base and gate the trim (plus the symmetric padding it enables) behind `@supports`; the layout must be correct without it.
Symmetric padding does not optically centre text, because the font reserves uneven space above and below the letters — trim it with text-box
.badge { padding-top: 0.375rem; padding-bottom: 0.5rem; }
@supports (text-box: trim-both cap alphabetic) {
.badge { text-box: trim-both cap alphabetic; padding-block: 0.5rem; }
}Bad
Good
Why it matters
A line box is not the same height as the letters in it. The font declares an ascent and a descent that leave room for accents and descenders, and the line-height adds half-leading above and below on top of that. Neither is symmetric around the cap height, so when you give a badge `py-2` on both sides, the text does NOT land in the optical middle — it sits a pixel or two low, and every badge, chip and short button in the product carries the same small wrongness.
The usual fix is to fudge it: `pt-1.5 pb-2`, tuned by eye, per component, per font, and silently invalidated the moment the typeface changes. `text-box: trim-both cap alphabetic` fixes the cause instead — it tells the browser to measure the box from the cap height to the baseline and throw away the reserved space outside it, so symmetric padding becomes optically symmetric.
Support is still limited, so this is genuinely progressive enhancement: ship the pre-tuned padding as the base, and let an `@supports (text-box: trim-both cap alphabetic)` block reset the padding to symmetric and apply the trim. The layout must be correct without it.