demo · v133

Icon baseline aligner

Icon + text pills suffer the worst from half-leading — the SVG sits flush to its inline box while the glyph centre floats a couple of pixels north. text-box-trim with cap alphabetic snaps the text down so the optical centres line up.

trim:
pill button
new project complete
stat tile 4,328
tab label Overview

the rule

.pill {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic; /* over: cap height, under: baseline */
}

You can also write the shorthand: text-box: trim-both cap alphabetic. Before this property, the trick was negative line-height tweaks or per-glyph translate hacks that broke as soon as the font changed.

see also