Back to the catalog

Trimming font leading

Typography & Colour

text-box-trim and text-box-edge

Limited availabilityderived from web-features, captured 2026-09-06
  • Chrome133
  • Edge133
  • Firefox-
  • Safari18.2

Features it needs

Every font ships with space above the cap height and below the baseline, so a heading never sits flush against the box you gave it, and optical alignment ends up as hand-tuned negative margins. Capsize computes those metrics and generates the margins for you. text-box-trim asks the browser to remove that space directly, using metrics it already has, so a button label centres properly and a heading's spacing matches what the design specified.

When this applies

Removing a font's built-in leading so text sits flush in its box.

The native approach

text-box-trim and text-box-edge
h1,
.button {
  /* Trim the leading above the cap height and
     below the baseline. */
  text-box: trim-both cap alphabetic;
}

/* Longhand form. */
.label {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
Live example

MDN reference

When the dependency is still right

An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.

  • Your support target reaches below Chrome 133, Safari 18.2 or Firefox 154. Firefox was last to ship it, so on an older target the fallback is the untrimmed spacing you started with and your vertical rhythm shifts between browsers.
  • You need the computed metrics as numbers at build time, for example to generate spacing tokens or to lay out text in a canvas or a PDF. Capsize gives you values; CSS only affects rendering.
  • You need to support a font whose metrics are wrong or missing, which Capsize lets you override by hand.

Building it

This catalog stops at the swap. These guides go through the implementation and the fallbacks. They come from Google Chrome's modern-web-guidance, Apache-2.0.

Packages this covers

Minified and gzipped, captured 2026-09-06.