CSS text-box-trim

Removes the invisible space above and below text that comes from line-height (the "half-leading"), so a text box hugs its glyphs. Fixes buttons and labels that look mis-centred even when padding is mathematically equal.

The problem: half-leading

Every text element carries vertical space baked into the font itself: line-height distributes extra space above the cap height and below the baseline. So a button with padding: 24px measures 24px in DevTools but looks like ~32px on top because of the invisible leading. Spacing never matches what the designer drew, and labels read as optically off-centre. Source: X/@vponamariov, 2026-03-13 (1,077 likes, 1,205 bookmarks).

The reviewed local image shows the exact failure mode: a Submit button with a large gray font box appears vertically swollen because the invisible font space is being centered, while the trimmed example hugs the glyph box and makes the visual padding read correctly. This is an optical-alignment fix for labels, not a general typography reset. Source: local artifact wiki/assets/x-bookmarks/2032394363024953674/image-01.png, reviewed 2026-07-01

text-box-trim — which edges to trim

Source: MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/text-box-trim, 2026-06-12

text-box-edge — how far to trim

text-box-trim only says which edges; text-box-edge says how much, taking an over and an under value. The most common combo is cap alphabetic: trim the top flush with capital letters and the bottom flush with the baseline. Other over values are text and ex; the under value is text or alphabetic. Used alone, text-box-trim does nothing visible — it must be paired with text-box-edge. Source: X/@vponamariov thread, 2026-03-13; MDN, 2026-06-12

The text-box shorthand

.button-label {
  /* longhand */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;

  /* equivalent shorthand */
  text-box: trim-both cap alphabetic;
}

Now 24px of padding is actually 24px — no hidden half-leading. Source: MDN, 2026-06-12

When to use it

• Buttons, badges, chips, single-line labels — where text must sit perfectly centred inside a fixed box. This is the headline use case.
• Tight headings pinned to a grid.

When not to: multi-line body copy. Trimming the leading on paragraphs removes the breathing room that makes prose readable; the property is meant for single labels, not articles. Source: X/@vponamariov thread, 2026-03-13

Browser support — progressive enhancement

MDN lists text-box-trim as Limited availability (not Baseline) — Safari shipped it first, with Chromium following; Firefox lags. The author cites ~83% global support and recommends a feature query so non-supporting browsers fall back gracefully: Source: MDN, 2026-06-12; X/@vponamariov, 2026-03-13

@supports (text-box-trim: trim-both) {
  .btn { text-box: trim-both cap alphabetic; }
}

Complements the optical-alignment and tabular-number rules in Interface Micro-Polish and the type tokens in Design Tokens.

---

Timeline

• 2026-07-01 | Deep-reviewed the local image artifact and confirmed it captures the practical button-label use case: default font-box centering versus trimmed glyph-box centering. Kept this as a design/CSS page update, not a new tool page. Source: X/@vponamariov image artifact, 2026-03-13
• 2026-06-12 | Page created from the @vponamariov text-box-trim bookmark (1,205 bookmarks). Captured the half-leading problem, text-box-trim values, the text-box-edge: cap alphabetic pairing, the text-box shorthand, button/label use case, and progressive-enhancement gate. The author noted Linear's CEO commented to add text-box-edge alongside text-box-trim. Researched against MDN (Limited availability, not Baseline). Source: X/@vponamariov, 2026-03-13 + MDN, 2026-06-12