What Is X-Height, and Why Does It Matter for Screen Fonts?

You swap a site's body font from Inter to EB Garamond, keep font-size: 1rem, and suddenly the text looks noticeably smaller and harder to read — even though DevTools insists both are 16px. Or your fallback font flashes in at what looks like a different size before the web font loads, and the whole page jumps. In both cases, the font size you set is identical. What changed is the x-height, and it has more effect on how big text looks than the font-size value itself.

This article explains what x-height is, why it matters so much for screen legibility, how to compare and measure it across fonts, what a large or small x-height means for your design choices, and how to use font-size-adjust, ex units, and fallback metric overrides to keep text sizing consistent.

What Is X-Height?

X-height is the height of lowercase letters without ascenders or descenders, measured from the baseline to the top of a letter like x, v, w, or z. It is named after the lowercase x because it has flat tops and bottoms, making it easy to measure.

Lowercase letters with curves, such as o, c, and s, actually extend slightly above the x-height line and below the baseline. This overshoot compensates for an optical illusion: round shapes look smaller than flat ones of the same height.

X-height is usually described as a ratio of the font's em size (the nominal size you set with font-size) or relative to cap height (the height of capital letters).

Metric	What it measures
Em size	The design grid for the font; what font-size sets
Cap height	Baseline to the top of flat capitals like H
X-height	Baseline to the top of flat lowercase like x
Ascender	Part of b, d, h, k, l above x-height
Descender	Part of g, p, q, y below the baseline

For a fuller picture of how these lines fit together, see the anatomy of a letterform.

Why X-Height Determines Apparent Size

font-size does not set the height of any visible letter. It sets the size of the em box, an invisible design space that every glyph is drawn within. How much of that box the lowercase letters occupy is entirely the type designer's decision.

Since most text is lowercase, the x-height is what readers perceive as "size." Two fonts at the same font-size can look dramatically different:

Typeface	Approx. x-height (ratio of em)	Apparent size at 16px
Verdana	~0.55	Large
Inter	~0.55	Large
Open Sans	~0.53	Large
Roboto	~0.53	Large
Georgia	~0.48	Medium
Arial	~0.52	Medium-large
Times New Roman	~0.45	Small
EB Garamond	~0.40	Small

These are approximate; exact values depend on the version and how you measure. The pattern is what matters: a 16px Garamond has lowercase letters roughly 25–35% shorter than a 16px Verdana.

Why X-Height Matters for Screen Fonts

Pixels Per Letter

On screen, letters are drawn from pixels. At 16px with a 0.40 x-height, a lowercase x gets about 6.4 CSS pixels of height. With a 0.55 x-height, it gets about 8.8. On high-density displays, each CSS pixel maps to several device pixels, which helps, but on a standard-density laptop or budget phone, those extra pixels make a real difference to how clearly letters like a, e, and s render.

This is why fonts designed for screens — Verdana, Georgia, Tahoma, and modern faces like Inter, Source Sans 3, and Roboto — tend to have large x-heights. Matthew Carter designed Verdana and Georgia in the 1990s with generous x-heights precisely so they would survive low-resolution displays.

Legibility of Small Text

Captions, labels, footnotes, and UI text at 12–14px benefit most from a large x-height. A small-x-height serif at 13px can become a blur; a large-x-height sans remains clear.

Openness of Letterforms

A larger x-height gives letters bigger counters (the enclosed or partly enclosed spaces in a, e, o, g). Open counters improve legibility, especially for readers with low vision, and reduce confusion between similar shapes.

Dyslexia and Low Vision

Large x-heights and open shapes are commonly cited features of fonts that work well for readers with dyslexia and low vision. They are not the only factors, but they help. The readability vs. legibility guide covers the broader distinction.

The Trade-Offs of a Large X-Height

Bigger is not automatically better.

• Shorter ascenders and descenders. If lowercase letters are tall, ascenders and descenders have less room. Word shapes become more uniform and rectangular, which can make long passages feel monotonous and slightly reduce the distinctiveness of word outlines.
• Denser text. Large x-heights fill more of the line, so they need more line height to avoid feeling cramped. See leading and line height.
• Less elegance. Small x-heights, with long ascenders and descenders, are associated with classical book typography and can feel more refined at large sizes.
• Wider text. Many large-x-height fonts are also wider, which reduces characters per line.

Characteristic	Large x-height	Small x-height
Apparent size	Larger at same font-size	Smaller at same font-size
Small-size legibility	Better	Worse
Line height needed	More (1.55–1.7)	Less (1.4–1.55)
Ideal body font-size	16–18px often enough	18–21px often needed
Feel	Open, friendly, modern, practical	Classical, elegant, literary
Examples	Inter, Verdana, Source Sans 3	Garamond, Baskerville, Bodoni

How to Measure a Font's X-Height

From the Font File

The OpenType OS/2 table stores sxHeight and sCapHeight values, and head stores unitsPerEm. Divide x-height by units per em to get the ratio.

pip install fonttools

python - <<'EOF'
from fontTools.ttLib import TTFont

font = TTFont("Inter-Regular.ttf")
upm = font["head"].unitsPerEm
os2 = font["OS/2"]
print(f"unitsPerEm: {upm}")
print(f"x-height:   {os2.sxHeight} ({os2.sxHeight / upm:.3f} em)")
print(f"cap height: {os2.sCapHeight} ({os2.sCapHeight / upm:.3f} em)")
EOF

Older fonts may have sxHeight set to 0 if the OS/2 table version predates the field; in that case, measure the bounding box of the x glyph.

In the Browser

The ex unit equals the x-height of the current font (or an approximation if the browser cannot read it). You can measure it with JavaScript:

export function measureXHeightRatio(fontFamily: string, sizePx = 100): number {
  const probe = document.createElement("div");
  probe.style.cssText = `position:absolute;visibility:hidden;font-family:${fontFamily};font-size:${sizePx}px;height:1ex;`;
  document.body.appendChild(probe);
  const exPx = probe.getBoundingClientRect().height;
  probe.remove();
  return exPx / sizePx;
}

// After fonts load:
await document.fonts.ready;
console.log(measureXHeightRatio('"Inter"')); // about 0.55

Visually

Set two fonts side by side at the same size in a design tool or browser, type xoxo xoxo, and compare the lowercase heights directly. This is often the fastest way to sanity-check a pairing.

Using X-Height in CSS

font-size-adjust

font-size-adjust tells the browser to scale a font so that its x-height (or another metric) equals a given ratio of the specified font-size. It is supported in all current major browsers, including Chrome since version 127.

body {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.125rem;
  font-size-adjust: 0.5; /* x-height will be 0.5 x 18px = 9px, whichever font is used */
}

This has two big benefits:

1. Consistent fallbacks. If the web font fails to load and Georgia takes over, the x-height stays the same, so the text does not suddenly look larger or smaller.
2. Consistent mixing. Inline code in a monospace font, or a second family used for emphasis, matches the apparent size of surrounding text.

You can let the browser pick up the primary font's own ratio with from-font, so fallbacks match it automatically:

body {
  font-family: "Inter", system-ui, sans-serif;
  font-size-adjust: from-font;
}

The extended syntax lets you normalize other metrics too:

.caps-label {
  font-size-adjust: cap-height 0.7;
}

code {
  font-size-adjust: ex-height 0.53;
}

The ex Unit

1ex equals the x-height of the current font. It is useful for sizing and positioning things that should align with lowercase letters, like inline icons, superscripts, or custom bullet points.

.inline-icon {
  height: 1.2ex;
  width: auto;
  vertical-align: -0.1ex;
}

.unread-dot {
  width: 1ex;
  height: 1ex;
  border-radius: 50%;
}

Related units include cap (cap height), ch (width of 0), and ic (width of the CJK ideograph "water"). All are supported in current browsers.

Fallback Metric Overrides

To prevent layout shift when a web font swaps in, you can define an adjusted fallback with size-adjust and the ascent-override, descent-override, and line-gap-override descriptors:

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body {
  font-family: "Inter", "Inter Fallback", sans-serif;
}

size-adjust scales the fallback's glyphs so its x-height and widths more closely match the web font. next/font calculates these values automatically. For the full technique, see the guide to size-adjust and font metric overrides.

Using X-Height in Design Decisions

Choosing Body Size

If you choose a small-x-height typeface for body text, compensate with a larger font-size. A good rule: aim for a lowercase height of roughly 8.5–9.5 CSS pixels for body text on screens.

Font x-height ratio	Body size for ~9px x-height
0.55	16–17px
0.50	18px
0.45	20px
0.40	22px

Pairing Fonts

When pairing a heading font with a body font, or a sans with a monospace, similar x-height ratios make the combination feel cohesive, especially when the fonts appear on the same line. Mismatched x-heights in inline contexts (like a serif body with sans-serif inline links) look like a mistake.

Choosing for Small UI Text

For dashboards, data tables, and mobile UI where text often sits at 12–14px, prefer typefaces with x-heights of 0.52 or higher.

X-Height FAQ

Conclusion

X-height is the height of lowercase letters from the baseline, and it determines how large text actually looks far more than font-size does. Large x-heights improve legibility at small sizes and on modest screens, which is why most fonts designed for screens have them. Small x-heights bring elegance and distinctive word shapes but demand larger sizes for comfortable reading.

Measure x-height when you choose and pair fonts, size body text so lowercase letters reach roughly 9px, and give large-x-height faces a little more line height. Use font-size-adjust to keep apparent size consistent across fallbacks and mixed families, and use metric overrides to stop font swaps from shifting the layout. These small, measurable details are what make text feel right on every screen.

Here are some useful references for going deeper on x-height:

1. MDN Web Docs: font-size-adjust — syntax, metrics, and the from-font keyword.
2. MDN Web Docs: CSS values and units — ex, cap, ch, and other font-relative units.
3. Google Fonts Knowledge: Glossary — illustrated definitions of x-height, cap height, and overshoot.
4. Microsoft Typography: OS/2 table specification — where sxHeight and sCapHeight are stored.
5. Chrome for Developers: Improved font fallbacks — using size-adjust and metric overrides to reduce layout shift.