CSS leading-trim Moves Forward as text-box-trim
The proposed CSS property leading-trim, designed to strip away the inherent whitespace in fonts for more predictable text styling, has been renamed to text-box-trim and is now beginning to see browser support. The property, along with the related text-box-edge, was initially detailed by Microsoft designer Ethan Wang, who advocated for its inclusion in the CSS Inline Layout Module Level 3 specification.
When applied, the property instructs the browser to examine the font file’s OpenType metrics and effectively remove the top and bottom leading space, as Wang’s demonstration shows. This capability allows developers to properly center text within buttons or other containers without relying on hacky offsets, and it also enables consistent spacing values when mixing different typefaces.
h1 {
leading-trim: both;
text-edge: cap alphabetic;
}The excitement around this property stems from the additional control it offers over web typography—similar to existing techniques for taming line height, but now at a more granular level. As browser support grows, the renamed text-box-trim gives front-end developers a cleaner path to pixel-perfect text layout.
