CSS text-box-trim and text-box-edge for cap-height centering
Centering button text without line-height tweaks
Most fonts add invisible space above the cap line and below the baseline. That half-leading is why button text always feels one pixel off. text-box-trim removes it so text aligns to its actual letterforms.
/* per-font line-height tuning to fake a centered look */.btn { line-height: 1.15; padding: 13px 20px 11px;}.btn { text-box-trim: trim-both; text-box-edge: cap alphabetic; padding: 12px 20px;}/* the button measures from the cap line, not the metric box */text box trim Browser Support
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
Firefox has the implementation but keeps it disabled by default through at least 149. Chrome 133, Safari 18.2, and Edge 133 ship it on. Pair with normal padding so Firefox simply renders with the usual half-leading and the button still looks fine.
Optical centering, finally
Padding now measures from the cap line to the baseline. The button's vertical space matches what your eye actually sees, not the font's metric box.
Pairs with anything
Works on buttons, chips, tags, headings, anywhere a line of text sits inside a fixed shape. Combine with display: grid; place-items: center and the alignment lands first try.
Edges you can choose
text-box-edge: cap alphabetic trims the typical Latin shape. Use ex, ideographic, or text for other scripts and writing modes.
How it works
Every font ships with metrics that include space above the cap line and below the baseline. That space, the half-leading, is what makes a 32px-tall button with 16px text look like the text sits a little high or low. Tuning line-height per font, or chasing the right padding values, was the workaround.
text-box-trim: trim-both tells the browser to size the inline box from the trimmed edges instead of the full metric box. text-box-edge: cap alphabetic picks the cap line as the top edge and the alphabetic baseline as the bottom. Padding now applies to those visual edges. The button text centers cleanly without any per-font tuning.
Use trim-start or trim-end when you only want one side trimmed, useful for headings that need to sit flush with a top edge. The text-box shorthand combines both properties when you want them in one line.