Every headline on the web carries invisible space: the font's line gap and ascender get reserved whether glyphs use them or not, so a big display heading never quite touches the top of its box. Text-box trimming is the print-shop fix, and it is one declaration.
h1, h2 {
text-box: trim-both cap alphabetic;
}What the values mean
- trim-both removes the half-leading above and below the text block.
- cap says trim to the top of capital letters, so the visual top of a headline lines up with its box.
- alphabetic trims the bottom to the baseline, where type actually rests.
Where it earns its keep
- Hero sections where the headline must meet the top edge: trimming beats nudging margins per font one at a time.
- Sidebar headers and card kickers sitting inside a border: the optical gap finally matches the written padding.
- Buttons with tall line-heights for vertical centering: trim instead, and the button survives font swaps.
Support is spreading across the current engines; browsers without it simply leave the classic extra space in place, so nothing breaks, the headline is just mildly less perfect there. Cosmetic features with silent fallbacks are the cheapest wins in CSS, and the polish here is gacor against a bold zine headline like this site's.