CSS text-box-trim crops headline space using the font's own metrics

The first thing most people try is `line-height: 1`, and it leaves the gap in place. According to a dev.to post on the property, that value makes each line box exactly 1em tall, but the glyphs are still positioned by the font's ascent and descent metrics ^[4]. The ascent sits well above the cap height inside that 1em. Put a border around the heading and there is still air above the capitals ^[4].

The second attempt is a negative margin. The post's example is `margin-top: -0.18em`, found by eyeballing devtools, and the author wrote that it is "a guess tuned to one font, one weight, one line-height" ^[1]. Bump the line-height for mobile or open the page in Safari and the gap comes back at a slightly different size ^[1]. Line-height makes headlines worse because half its extra spacing lands above the first line ^[3]. In a paragraph nobody sees that space. On a 64px headline meant to sit flush against a nav bar, the post says, it is glaring ^[9].

Enough teams hit this that a library exists only to compute the margin. Capsize, built at SEEK, reads ascent, descent, cap height and unitsPerEm from the font file and generates exact negative margins ^[2]. It is good engineering. It replaced a guess with numbers derived from the font. The post's objection is overhead: a small build step and a metrics lookup table ^[2].

`text-box-trim` moves that lookup into the browser, which already has the metrics of the font it is rendering ^[11]. The headline rule is one declaration ^[6]:

```css .headline { text-box: trim-both cap alphabetic; } ```

In longhand, `text-box-trim` picks the edge: `trim-start` for the top of the first line, `trim-end` for the bottom of the last, `trim-both` for both ^[5]. `text-box-edge` picks the target. `cap alphabetic` cuts the top to cap height and the bottom to the alphabetic baseline ^[5]. Swap in `ex alphabetic` and it trims to x-height, which the post suggests for lowercase-heavy display text ^[12]. A move from Inter to Georgia changes the ratio of reserved space to cap height ^[10]. With the trim computed at render time, there is no stored number for that change to break ^[11].

Safari 18.2 shipped the property in December 2024, Chrome 133 in February 2025 and Firefox 154 in August 2026 ^[7]. The first and last engines shipped 20 months apart ^[1]. Anyone on an older version does not get the property ^[7], so they see the default line box with its full ascent and half-leading above the caps ^[2]. I think the right default for headlines is to ship the trim and accept the old gap on those browsers. Capsize is worth keeping only where a pixel-exact headline on old engines is a hard requirement. The post does not cover a fallback for browsers that lack the property.