Design Atlas
한국어
Aa Typography

x-height

엑스하이트

The height of lowercase letters with no ascender or descender, like x. Fonts at the same point size can feel bigger or smaller depending on this ratio.

Also known as: 엑스 높이소문자 높이
···
html
<div class="stage">
  <div class="frame">
    <div class="band" id="band"></div>
    <span class="word" id="word">exercise</span>
  </div>
  <div class="readout"><span id="font">Georgia</span> · x-height ≈ <span id="ratio">0.47</span>em</div>
</div>
css
.frame{position:relative;display:inline-block;font-size:20vmin;line-height:1}
.word{color:var(--fg);font-weight:700;position:relative;z-index:2;letter-spacing:.005em}
.band{position:absolute;left:-.05em;right:-.05em;bottom:.18em;height:.47em;background:color-mix(in srgb, var(--accent) 20%, transparent);border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);transition:height .6s ease;z-index:1}
.readout{margin-top:16px;font:12px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center}
#font{color:var(--fg);font-weight:600}
#ratio{color:var(--accent)}
js
const word = document.getElementById('word');
const band = document.getElementById('band');
const fontEl = document.getElementById('font');
const ratioEl = document.getElementById('ratio');
const fonts = [
  { name: 'Georgia (serif)', stack: "Georgia,'Times New Roman',serif", xh: 0.47 },
  { name: 'system-ui (sans)', stack: 'system-ui,-apple-system,sans-serif', xh: 0.54 },
];
let i = 0;
function apply(){
  const f = fonts[i];
  word.style.fontFamily = f.stack;
  band.style.height = f.xh + 'em';
  fontEl.textContent = f.name;
  ratioEl.textContent = f.xh.toFixed(2);
  i = (i + 1) % fonts.length;
}
apply();
setInterval(apply, 1800);

Fonts with a large x-height (most sans-serifs) stay legible at small sizes, which is why they dominate screen and UI type. Fonts with a small x-height (classic serifs) have relatively longer ascenders and descenders, reading as more elegant and book-like.

This is why the same `font-size: 16px` can look bigger or smaller depending on the font — a difference in x-height. Swap fonts without adjusting for this and a design can suddenly look "smaller" for no obvious reason.

The demo alternates a serif (smaller x-height) and a sans-serif (larger x-height) at the same font size, highlighting the lowercase band each time.

When to use

When swapping fonts, pick a replacement with a similar x-height, or compensate with `font-size` so the perceived scale stays consistent.