What is x-height?

Why point size is misleading

A font's point size measures an invisible box, the em, that holds every letter including the tallest ascender and the lowest descender. How much of that box the lowercase letters fill is a design choice, and it varies a lot. Google Fonts describes x-height as the height of lowercase characters without ascenders or descenders, and notes that it indicates how tall or short type appears. Most reading happens in lowercase, so the x-height is the size a reader actually perceives. Set a Garamond style serif and a screen oriented sans at the same point size and the sans will look a size or two larger, even though the numbers match.

How x-height affects reading

A taller x-height gives lowercase letters more room for their inner spaces, the counters in letters such as e, a and s, which keeps them distinct at small sizes and at a distance. That is one reason many sans serif faces drawn for screens have tall x-heights, and Google Fonts notes that sans faces typically have larger x-heights than serifs. A shorter x-height is not a flaw. It gives ascenders and descenders more presence, which looks refined in large headlines and in book typography where text sits at comfortable sizes. The trade off only bites when the text is small, which on a flyer means the details that matter most.

When it matters most

It matters wherever text is small or far away. On a printed flyer that is the address, the phone number, dates, conditions and any menu or price list. On a social post it is every line, because the whole canvas is shown at phone size. It also matters when you switch fonts late in a project. A layout tuned for a tall x-height face can suddenly look sparse and hard to read when a short x-height face replaces it at the same sizes, while the reverse can make text look cramped and bump into neighbouring blocks.

Common mistakes

The usual error is comparing fonts by point size alone and concluding that a short x-height face simply needs no adjustment. Another is picking an elegant, short x-height serif for a price list set small, where numbers and lowercase words start to blur. A third is mixing two fonts with very different x-heights on the same line, such as a label and a value, which makes one look like a typo. Butterick's point size advice is useful here: judge size by setting real text and reading it, because the same point value produces different results in different fonts.

At a distance and on a phone

x-height matters twice as much when the reading distance grows. A poster headline read from across a room and a flyer pinned to a noticeboard both put the lowercase letters at the edge of what the eye can resolve, and a tall x-height buys a surprising amount of extra range. Screens raise a different issue. A social post designed on a large canvas is shown at phone width, where small lowercase text in a short x-height face collapses into a smudge long before the capitals do. That is why many interface fonts, including several sans families in common use, favour tall lowercase proportions. For anything read far away or shrunk onto a phone, pick the taller x-height and let the shorter one carry the headline.

x-height in the flyer builder

In the flyer builder, text size is chosen from the theme's type ramp rather than typed as a point value, and the font is set once for the whole flyer with a Font override available on any block. Because the size classes stay fixed when the font changes, swapping the global font from a tall x-height sans such as Inter to a short x-height serif such as Cormorant Garamond makes every line look smaller without any number changing. After a font change, zoom in on the smallest text, usually the footer and contact lines, and move those blocks to a larger size class or give them a sturdier font.

Questions people ask