X Height Body Relation

Understanding x-height & body size ratio

In typography, the x-height is how far it is from the baseline to the top of lowercase letters that have no ascenders or descenders. Think of the lowercase “x”, that is the height we mean. Compared against the body size (em), the ratio comes out as x-height ÷ font-size, and for modern Latin typefaces it usually lands somewhere between 45% and 55%. Display faces push higher, occasionally past 60%.

When the x-height is larger, lowercase glyphs read bigger at the same point size, which helps a lot on screen at small sizes. That is why modern UI fonts like Helvetica, Inter, Arial and Roboto run a generous x-height, around 52–55%. Classic book faces such as Times New Roman, Garamond and Baskerville go the other way with a smaller x-height of 40–46%, which leaves room for elegant ascenders and gives long passages a calmer overall texture.

Applications

x-height matters most in web accessibility, mobile UI, signage, and basically any text rendered below 14 px. If you are pairing two typefaces, the CSS @font-face { size-adjust: ... } property, along with the ascent-override and descent-override metric overrides, lets you line up the x-heights so neither font suddenly looks bigger than the other. It feeds into your leading (line-height) too, since a bigger x-height needs more leading or the lines start running into each other.

FAQ

Why do two fonts at 16 px look different in size? Their x-heights are different. Inter at 16 px reads noticeably larger than Times at the same size, because Inter sits at roughly 53% where Times is closer to 45%.

Is a bigger x-height always better? Not for printed body text. Push the x-height too high and you flatten out the rhythm of ascenders and descenders that the eye relies on to scan a line. For screen UI, 50–55% is the sweet spot.

How do I match x-heights between fonts? Reach for CSS size-adjust, or font-size-adjust: ex-height, which scales the fallback font until its x-height lines up with the primary one. That keeps web fonts from triggering layout shift (CLS) as they load in.