Text box trimming (leading trim)
Cropping away the invisible line-height space above and below text so layout gaps start at the visible letters.
See it
What it is
Text box trimming removes the extra line-box space above and below visible text. CSS line-height distributes leading around the font's metrics, so a heading can carry invisible room above its capital tops and below its baseline. The newer 'text-box-trim' and 'text-box-edge' properties let the box trim to chosen metric edges instead. The idea reached most designers as leading-trim, from Ethan Wang's 2020 Microsoft Design writeup, and Figma ships the same control in the text panel under the name Vertical trim.
Reach for it when spacing must be measured from visible letterforms: aligning a heading to a card edge, centering a label beside an icon, or keeping a baseline-based spacing system honest. For Latin text, 'text-box-edge: cap alphabetic' names the cap line above and the alphabetic baseline below.
The gotcha is font and script coverage. A cap-height edge is built around Latin metrics, and glyph ink such as accents or descenders can extend outside the trimmed box. Test every language and font you ship, avoid clipping overflow around the text, and keep a conventional line-height fallback for browsers that do not apply the properties.
Ask AI for it
Trim the heading's line box with CSS 'text-box-trim: trim-both' and 'text-box-edge: cap alphabetic' so its measured top begins at the cap line and its bottom ends at the alphabetic baseline. Wrap the rules in '@supports (text-box-trim: trim-both)' and retain the current unitless line-height and margins as the fallback. Do not place overflow: hidden or overflow: clip on the text container. Add specimens with capitals, accents, descenders, and a non-Latin script to expose clipped ink.