Charts · 18

Why 16px is not 16px

font-size sets the em box, and nothing in the box is required to be any particular size. Verdana’s lowercase fills more than half of it; Garamond’s, barely two fifths. Which is why a fallback font looks the wrong size, why the same line-height looks tight in one family and loose in another, and why an icon next to text never quite centres. Every number below is measured in your browser, from the fonts as they render here.

Loading and measuring 22 fonts on your machine…

Notes

Measured with CanvasRenderingContext2D.measureText at 100px after document.fonts.load resolves for every family: x-height is the actualBoundingBoxAscent of a lowercase x, cap height of an H, ascender of a d, descender the actualBoundingBoxDescent of a p; the line box is fontBoundingBoxAscent + fontBoundingBoxDescent, the values the browser uses for line-height: normal. Glyph overshoot means round letters measure slightly taller than flat ones, so the x-height here is the flat x, which is what the type designer specified. System families are measured only if your machine has them, and a Google family that fails to load is left out rather than measured as its fallback. font-size-adjust takes an x-height ratio (or ex-height from-font) and scales the fallback so its lowercase matches; it has shipped in every engine since 2024. Sources: CSS Fonts Module Level 4, section 3.6; HTML Standard, TextMetrics; Bringhurst, The Elements of Typographic Style, on x-height and apparent size.