What is the x-height and why does it affect readability?

The x-height is the height of a typeface's lowercase letters, measured from the baseline to the top of a flat-topped letter such as x, excluding ascenders and descenders. It's usually expressed as a proportion of the font size: in many text faces the x-height is roughly half the em, but it varies widely, from well under 0.45 in some classic book faces to over 0.54 in faces designed for screens such as Verdana. Because most of what we read is lowercase, the x-height largely determines how big a font looks. Two fonts set at the same CSS font-size can look very different in size, and the one with the larger x-height will usually be easier to read at small sizes.

This is why "16px" doesn't mean the same thing for every font, and why swapping one typeface for another can suddenly make text look too small or too big. In this article you'll learn how x-height is measured, how it differs between typefaces, why it affects readability and perceived size, its trade-offs, and how to work with it in CSS using the ex unit and font-size-adjust to keep text consistent across fonts and fallbacks.

How X-Height Is Measured

Every font is designed on an invisible square called the em. When you set font-size: 16px, you're setting the em to 16 pixels, not the height of any particular letter. Inside that em, the designer decides how tall the capitals are, how far ascenders reach and how high the lowercase letters sit.

The x-height is measured from the baseline, the line letters sit on, to the mean line, the top of the lowercase letters. The letter x is used because its top and bottom are flat. Round letters such as o overshoot slightly above the mean line and below the baseline so they look the same size as flat letters, so they aren't used for measuring.

Font files store the x-height in their metrics, in font units. Dividing by the units per em gives the ratio. For example, Verdana's x-height is 1117 units on a 2048-unit em, a ratio of about 0.545. At font-size: 16px, its lowercase letters are about 8.7px tall.

Typical X-Height Ratios

Here are approximate x-height ratios for some common system fonts, taken from their font metrics:

Font	Approximate x-height ratio	Lowercase height at 16px
Times New Roman	0.45	7.2px
Georgia	0.48	7.7px
Arial	0.52	8.3px
Verdana	0.55	8.7px

That spread is significant. At the same CSS size, Verdana's lowercase letters are around 20% taller than those of Times New Roman, which is why Verdana looks so much bigger.

Why X-Height Affects Readability

Perceived Size

Readers judge size mostly by the lowercase letters, because those make up most of running text. A font with a large x-height looks larger and more open; a font with a small x-height looks smaller and more delicate at the same nominal size.

Legibility at Small Sizes

At small sizes, a larger x-height gives the lowercase letters more pixels to work with. Counters (the enclosed spaces inside letters such as a, e and o) stay more open, and details that distinguish one letter from another are easier to see. That's why typefaces designed for screens, captions, signs and interfaces, such as Verdana, Tahoma, Inter and many humanist sans-serifs, tend to have generous x-heights.

Word Shapes and Ascenders

There's a trade-off. Readers also use the ascenders and descenders, the parts of letters like b, d, p and y that extend above and below the lowercase body, to recognise word shapes. If the x-height grows too large, the ascenders and descenders get relatively shorter, and letters such as n and h or a and d can start to look alike. Very large x-heights can also make text look crowded and require more line height to stay comfortable.

So bigger isn't always better. Most good text faces sit in a moderate-to-generous range, balancing open lowercase letters with clear ascenders and descenders. For more on those, see ascenders, descenders and the baseline.

Tone

X-height also shapes character. Small x-heights, often found in classical book faces and elegant display serifs, feel refined and traditional. Large x-heights feel open, friendly and modern. Neither is wrong; they just suit different purposes and sizes.

X-Height and Your Design Decisions

Because x-height changes how big a font looks, it should influence several other settings.

• Font size: A small x-height face might need a body size of 18px or more to read as comfortably as a large x-height face at 16px.
• Line height: Large x-heights fill more of each line, so they often need a little more line height to keep lines visually separate. Small x-heights can usually take slightly less.
• Pairing: Fonts used together, for example a heading and body face, or body text and inline code, look more harmonious when their x-heights are similar.
• Fallback fonts: If your web font and its fallback have very different x-heights, text will visibly change size when the web font loads, and content may shift.

Measuring X-Height in the Browser

You don't have to look up x-heights in font metrics. The Canvas API can measure how tall a rendered x is in any loaded font:

function xHeightRatio(fontFamily, size = 200) {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  ctx.font = `${size}px ${fontFamily}`;
  const metrics = ctx.measureText("x");
  return (metrics.actualBoundingBoxAscent / size).toFixed(3);
}

await document.fonts.ready;

for (const family of ["Georgia", "Verdana", '"Times New Roman"', "Arial"]) {
  console.log(family, xHeightRatio(family));
}

Georgia 0.480
Verdana 0.545
"Times New Roman" 0.450
Arial 0.520

Your results may differ slightly depending on the font versions installed and on rendering, but the ratios will be close to the font's stored metrics. Run this in the browser console on your own site to compare your web font with its fallbacks. The await at the top level works in the console and in ES modules.

Working With X-Height in CSS

The ex Unit

CSS has a unit based directly on x-height: 1ex equals the x-height of the current font. It's useful for sizing things relative to lowercase letters, such as inline icons, custom bullets or underline offsets:

.badge-dot {
  display: inline-block;
  width: 1ex;
  height: 1ex;
  border-radius: 50%;
  background-color: currentColor;
  vertical-align: baseline;
}

a {
  text-decoration-thickness: 0.08em;
  /* Sit the underline just below the lowercase letters' baseline */
  text-underline-offset: 0.25ex;
}

Because ex follows the actual font in use, these sizes stay proportional when the font changes.

font-size-adjust

The font-size-adjust property tells the browser to scale a font so its x-height matches a ratio you choose. It's supported in current versions of Chrome, Edge, Firefox and Safari.

body {
  font-family: "Merriweather", Georgia, serif;
  font-size: 1rem;
  /* Make the x-height equal to 0.5 of the font size, whichever font renders */
  font-size-adjust: 0.5;
}

If Merriweather loads, the browser scales it so its x-height is half the font size. If it fails and Georgia is used, Georgia is scaled to the same x-height. The visible size of the lowercase text stays consistent either way.

You can also use the keyword from-font, which takes the ratio from the first font in the list:

code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  /* Use the first available font's own x-height ratio as the target */
  font-size-adjust: from-font;
}

Be careful with font-size-adjust on large blocks of text: if you set a value very different from the font's natural ratio, the font will be scaled noticeably, which also scales capitals and line widths.

Matching a Fallback With size-adjust

For web fonts specifically, a more targeted approach is to define a fallback font face with size-adjust, so the fallback takes up the same space as the web font. This reduces layout shift when the web font loads:

@font-face {
  font-family: "Merriweather Fallback";
  src: local("Georgia");
  /* Scale Georgia to roughly match Merriweather's proportions */
  size-adjust: 106%;
  ascent-override: 92%;
  descent-override: 26%;
  line-gap-override: 0%;
}

body {
  font-family: "Merriweather", "Merriweather Fallback", Georgia, serif;
}

The percentages here are illustrative. The right values depend on the exact fonts, and tools such as the Fontaine and Capsize libraries, or the font optimisation built into frameworks like Next.js, can calculate them for you. For a full walkthrough, see font fallbacks and size-adjust.

Choosing Fonts With X-Height in Mind

When you're comparing typefaces, x-height is one of the quickest ways to predict how they'll behave.

1. For body text on screens, favour a moderate to generous x-height, so text stays readable at 16 to 18px.
2. For small UI text, such as labels and captions, a generous x-height helps most.
3. For headings and display text, a smaller x-height is fine and can look more elegant, because size isn't a problem.
4. When pairing fonts, compare them side by side at the same CSS size and adjust sizes so their lowercase letters look similar.
5. When choosing fallbacks, pick system fonts with a similar x-height to your web font, or correct the difference with size-adjust.

A simple side-by-side test makes differences obvious:

<p style="font: 16px/1.5 Georgia, serif">Handgloves: quick brown foxes jump.</p>
<p style="font: 16px/1.5 Verdana, sans-serif">Handgloves: quick brown foxes jump.</p>
<p style="font: 16px/1.5 'Times New Roman', serif">Handgloves: quick brown foxes jump.</p>

"Handgloves" is a traditional test word among type designers because it contains a useful mix of round, straight, ascending and descending letters.

---

FAQ: X-Height

---

Conclusion

The x-height is the height of a typeface's lowercase letters, and because most reading happens in lowercase, it governs how large a font appears and how well it holds up at small sizes. Fonts with generous x-heights look bigger and stay clearer in small text, while fonts with smaller x-heights look more refined but need more size. Pushing x-height too far, though, shortens ascenders and descenders and reduces the distinctive word shapes readers rely on.

Take x-height into account whenever you choose a body size, set line height, pair typefaces or select fallbacks. In CSS, use the ex unit for elements tied to lowercase letters, font-size-adjust to keep apparent size consistent across fonts, and size-adjust on fallback font faces to reduce layout shift while web fonts load.