loading fonts…
Figures are magnified (factor in the corner) over the real 1× button; numbers are measured live from the 1× copy, in CSS px, + = low. Guides span each row: the first figure's lines run across, and thick segments mark where another figure differs. Each group's bar stays in view while you look: toggle guides and trim there.
Chrome Canary 159.0.8128.2 (Windows, 125% display scale, devicePixelRatio 1.25), measured after the fonts loaded: Inter 600 14px self-hosted on the probe page (from Google Fonts on this page, same metrics: cap height 10.19 px at 14px), system faces by font-family override. Offsets come from layout rects and the fonts' cap-height and x-height metrics, not from rendered glyphs. At this scale anything under about 0.4 px is pixel snapping; border: 1px computes to 0.8 px, so border-box heights read 31.79 rather than 32.
Method on this page: cap and x-height come from the height of a block trimmed with cap / ex at 200 px (the browser's own value, scaled); ascent, descent and CJK ink from canvas measureText; the baseline from a zero-size inline-block marker. Magnified figures are transform: scale() copies of the measured 1× element, so their geometry is the 1× geometry times the factor. All figures recompute on resize.
Font metrics at 14 px, measured here:
Probe markup:
<style>
button { font: 600 14px/1 Inter; padding: 10px 16px; border: 1px solid; }
.trim { text-box: trim-both cap alphabetic; }
.icon { display: inline-flex; align-items: center; gap: 8px; line-height: 20px; }
</style>
<button>Save changes</button> <button class="trim">Save changes</button>
<button class="icon trim"><svg width="16" height="16"></svg>Save</button>
<button class="icon"><svg width="16" height="16"></svg><span class="trim" style="display: block">Save</span></button>
Cap center relative to the box center, and to a 16px icon's center in the inline-flex button, in px, + = caps low (this page also adds Arial: -0.61 default, 0.00 label trimmed, vs the icon):
| Face | Caps vs box, default | Caps vs box, trimmed | Caps vs icon, default | Caps vs icon, label trimmed |
|---|
| Inter | -0.3 | -0.2 | +0.1 | 0.0 |
| Segoe UI | +0.7 | -0.3 | +1.1 | 0.0 |
| Georgia | -0.9 | -0.4 | -0.5 | 0.0 |
- For Inter, trim on the
inline-flex button itself gave the untrimmed value, to 0.01 px, at line-heights 1, 20px and 1.5. Untrimmed, where the caps land depends on how the face splits ascent and descent, so the sign changes between faces. Trimmed, the label box is the cap band, so the caps are centered by construction (the -0.2 to -0.4 left in the box column is snapping).
- x-height: its center sits below the cap center by half of cap height minus x-height, about 1.3 px for Inter at 14px. It measured 1.0 px below the box center untrimmed and 1.2 px trimmed.
ex alphabetic centers the x-height instead (-0.4 px) and lifts the caps 1.7 px high.
- Ink: canvas
measureText and a pixel scan both put "Save changes" 1 to 2 px low in both states, but disagree on whether trim helps; a descender stretches the ink box without moving the word's weight.
- Shrink on an auto-height control = line-height minus cap height, to 0.01 px: 3.81 px at line-height 1 (10.7%), 6.61 px at
normal (17.2%), 9.81 px at 20px (23.6%), 10.81 px at 1.5 (25.4%). With height: 36px, and with trim plus min-height: 36px, it stayed 36.
- A
<span class=trim> inside a block button does nothing in Chrome until it gets display: block.
- A wrapped label loses only the first line's top and the last line's bottom; line pitch is unchanged.
- CJK (
保存する, fallback face unidentified): cap alphabetic uses Latin metrics, so the ideographs run about 2 px into the 10 px padding above and below (this page: ink 1.85 px above the cap line, 1.31 px below the baseline, unchanged by trim).
- Fallback faces on a trimmed box:
ascent-override, descent-override and line-gap-override set to Inter's values (96.875%, 24.12%, 0%) left the trimmed border-box height where the plain fallback had it (Arial Bold 31.63 px, Segoe UI 31.40, Inter 31.79). size-adjust set to the ratio of cap heights (101.64% for Arial Bold, 103.9% for Segoe UI) matched Inter in both. The overrides still fix the untrimmed baseline (Arial 22.0 to 22.8 px from the top). The shift is small at 14px, 0.2 to 0.4 px, and grows with size.
impeccable detect --no-config (0.1.18) on the probe: no alignment findings, and the 62-rule catalog has no alignment rule. Positive controls fired.- Support, from MDN browser-compat-data 8.1.7:
text-box in Chrome and Edge 133, Safari 18.2, Firefox 154; trim on inline boxes in Firefox 154 and Safari 26.5 (partial), not Chrome. Firefox, Safari and the ideographic-ink edge are untested.