CSS text-box-trim Demo — Free Font Leading Trim Comparison

Every font reserves invisible vertical space above and below its glyphs as part of its own metrics — room for accents on capital letters, room for descenders on letters like "g" and "y", sized generously enough to cover every character the font ships, even on a line that uses none of them. That reserved space, historically called leading, is why a heading dropped into a tightly-bordered card, next to an icon, or against a horizontal rule never sits perfectly flush no matter how precisely you zero out margin and padding — the gap isn't spacing you added, it's baked into the font itself. text-box-trim is a new CSS property that removes it directly.

What's actually happening in the two boxes

Both boxes in this demo use the identical font, size, weight, and border — the only difference is that .trimmed-box h2 adds text-box-trim: trim-both alongside text-box-edge: cap alphabetic. In the default box, look closely at the gap between the top of the heading's border and the visible top of the "F" in "Featured," and the gap below the baseline before the border — that's the font's reserved ascent/descent space, present in every browser's default text rendering. In the trimmed box, that space is removed from both edges, so the heading's visible glyphs align flush with the icon beside it and the border around it.

How text-box-edge chooses the metric

text-box-trim decides which edges to trim (trim-start, trim-end, or trim-both), while text-box-edge decides which font metric to trim *to* on each edge — this demo uses cap alphabetic, meaning the top trims to the font's cap-height (the top of capital letters) and the bottom trims to the alphabetic baseline, which is usually what you want for a heading sitting in a tightly designed card or aligned next to an icon.

Why this has been a real, persistent design pain point

Before this property existed, designers and developers worked around the reserved leading with hand-tuned negative margins or fixed pixel offsets calculated per font — a fragile hack that breaks the moment the font, its version, or its fallback changes, since different fonts reserve different amounts of space. text-box-trim solves the actual problem at its source instead of compensating for it after the fact, which is why design tools like Figma have had an equivalent "trim" concept in their text engines for years while CSS had no way to express it.

Genuinely new — treat the fallback seriously

This is one of the newest properties in this batch of snippets: support is still rolling out unevenly across engines as of 2026, and it should not be assumed to be universally available yet. The @supports not (text-box-trim: trim-both) block in this snippet is deliberately a no-op — an unsupporting browser simply keeps the small reserved gap around the heading, which is still a completely valid, readable layout, just without the flush alignment. Never let the trimmed state be load-bearing for legibility; treat it purely as a polish layer. Pair this with the CSS reading-flow demo or container query units for more of the newest native CSS layer.