text-box: trim-both

A heading that sits on its own cap height

CaveatIt trims the block box, not every line: a heading that wraps keeps the full leading between its lines and only loses it above the first and below the last. The amount comes from the first available font's metrics, so a web font that arrives after the fallback drew the first frame trims by a different number and the heading shifts on load — the same jump size-adjust exists to fix. And the edge values are metric names rather than lengths: cap alphabetic cuts to the capital height and the baseline, which is what a display line wants, while text cuts to the font's own ascent and descent and barely moves anything.

FallbackAn engine without it ignores the declaration and leaves the ordinary half-leading above and below — the gap that used to be corrected with a negative margin. So this has to replace that margin rather than sit on top of it: keep both and the engines that support the trim take the space out twice.

h1 {
  line-height: 1.6;

  /* cut the box to the cap line and
     the baseline. block box only —
     wrapped lines keep their leading */
  text-box: trim-both cap alphabetic;

  /* and delete the old hack */
  margin-block: 0;
}

Published 29 Aug 2026