What are ascenders, descenders and the baseline?

The baseline is the invisible line that letters sit on. Ascenders are the parts of lowercase letters that rise above the x-height, such as the upright strokes of b, d, h, k and l, and descenders are the parts that drop below the baseline, as in g, j, p, q and y. Together with the x-height and the cap height, these lines form the vertical framework every typeface is designed on. They matter for readability, because ascenders and descenders give words their recognisable outlines, and for layout, because the space a font reserves for them decides how text sits inside buttons, boxes and lines on a web page.

If you've ever wondered why text in a button looks slightly too high, why a descender gets clipped in a truncated heading, or why icons never quite line up with text, the answer usually lies in these lines and the font metrics behind them. In this article you'll learn what each line is, how ascenders and descenders affect reading, how fonts store their vertical metrics, how CSS builds a line box from them, and practical techniques for aligning text and other elements to the baseline.

The Vertical Lines of Type

Every Latin typeface is designed around a set of horizontal reference lines:

1. Baseline: Where most letters sit. Everything else is measured relative to it.
2. X-height (mean line): The top of lowercase letters without ascenders, such as x, n and o.
3. Cap height: The top of flat capital letters, such as H and T.
4. Ascender line: The top of lowercase ascenders. In many typefaces this is a little higher than the cap height, so l stands slightly taller than L.
5. Descender line: The bottom of descenders, below the baseline.

Overshoot

Round and pointed letters don't sit exactly on these lines. The bottom of o and the point of v dip slightly below the baseline, and the top of o rises slightly above the x-height. This is called overshoot. Without it, round letters would look smaller than flat ones, because curves touch a line at only one point. It's a small detail, but it explains why measuring an o gives a slightly different result from measuring an x.

Not Every Letter Behaves the Same

• Lowercase letters with ascenders: b, d, f, h, k, l and usually t, though the t is often shorter than the others.
• Lowercase letters with descenders: g, j, p, q, y, and in many typefaces f in the italic.
• Capitals: Usually sit between the baseline and cap height, but J and Q sometimes descend.
• Numerals: Lining figures sit on the baseline at roughly cap height. Old-style figures behave like lowercase letters, with some ascending and some descending.

Why Ascenders and Descenders Matter for Reading

Skilled readers don't decode every letter one at a time. They also use the overall outline of a word, the pattern of tall, short and descending letters. "Typography" and "topography" are distinguishable at a glance partly because their outlines differ.

Ascenders and descenders create those outlines. That has some practical consequences:

• Lowercase is easier to read than all caps for longer text: Capitals all share the same height, so words lose their distinctive outlines and become uniform rectangles.
• Very short ascenders and descenders reduce distinctiveness: Typefaces with very large x-heights can make letters such as n and h look similar at small sizes.
• Line height needs to accommodate them: If lines are too tight, the descenders of one line collide with the ascenders of the next, and the text looks tangled.

How Fonts Store Vertical Metrics

Fonts describe their vertical space in a set of metrics stored in the font file, measured in font units relative to the units per em. The values that matter most to browsers are:

• Ascent: How far above the baseline the font reserves space.
• Descent: How far below the baseline the font reserves space.
• Line gap: Extra space the font suggests adding between lines.

These numbers are not the same as the actual height of the ascenders and descenders. They include room for accented capitals, such as É, and for the tallest and deepest glyphs in the font, so they're often larger than the letters themselves.

Font files contain more than one set of these values, in the hhea and OS/2 tables, and different operating systems have historically used different sets. Well-made modern fonts keep them consistent, but older or poorly configured fonts can render with different vertical positioning on Windows and macOS.

You can inspect the values with fonttools:

pip install fonttools
python3 - <<'EOF'
from fontTools.ttLib import TTFont

font = TTFont("Inter-Regular.ttf")
upm = font["head"].unitsPerEm
hhea = font["hhea"]
os2 = font["OS/2"]

print("unitsPerEm      ", upm)
print("hhea ascent     ", hhea.ascent)
print("hhea descent    ", hhea.descent)
print("hhea lineGap    ", hhea.lineGap)
print("typo ascender   ", os2.sTypoAscender)
print("typo descender  ", os2.sTypoDescender)
print("win ascent      ", os2.usWinAscent)
print("win descent     ", os2.usWinDescent)
print("uses typo metrics", bool(os2.fsSelection & (1 << 7)))
EOF

The output lists each set of values. Bit 7 of fsSelection, often called USE_TYPO_METRICS, tells software to prefer the OS/2 typographic values, which helps make rendering consistent across platforms.

How CSS Builds a Line Box

When a browser lays out a line of text, it doesn't simply stack letters. It creates a line box for each line:

1. The font's ascent and descent define a content area for the text.
2. The line-height value sets the total height of the line.
3. The difference between line-height and the content area is split equally above and below the text. This is called half-leading.

So with line-height: 1.5, a 16px font gets a 24px line box. If the font's ascent plus descent is, say, 19px, the remaining 5px is split as 2.5px above and 2.5px below.

Because ascent and descent rarely match the visible letters, text often appears slightly off-centre inside its box. Fonts with a large ascent reserve more space above the letters, so text looks low; fonts with a large descent make text look high. This is the root of the "text isn't vertically centred in my button" problem.

Aligning Elements to the Baseline

vertical-align for Inline Elements

The default value of vertical-align is baseline, which aligns an inline element's baseline with the surrounding text. For images and icons, which have no text baseline, the bottom edge sits on the baseline, leaving a gap below for descenders. That's why an image inside a link or a div often has a few pixels of unexpected space below it.

/* Remove the descender gap under standalone images */
img {
  display: block;
}

/* Or keep them inline and align differently */
.inline-icon {
  vertical-align: middle;
}

vertical-align: middle aligns the element's midpoint with the baseline plus half the x-height, which usually looks centred against lowercase text.

Baseline Alignment in Flexbox and Grid

When items in a row have different font sizes, aligning their centres looks wrong, because the text in each item sits at a different height. Aligning baselines lines up the text itself:

.price-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.price-row .amount {
  font-size: 2.5rem;
  font-weight: 700;
}

.price-row .period {
  font-size: 1rem;
  color: #555;
}

<div class="price-row">
  <span class="amount">£29</span>
  <span class="period">per month</span>
</div>

The large price and the small "per month" label now sit on the same baseline. align-items: last baseline aligns on the last line of each item instead, which is useful when items contain several lines of text.

Trimming the Space Above and Below Text

The newer text-box property, a shorthand for text-box-trim and text-box-edge, lets you trim the extra space that the font's ascent and descent add above and below text. This makes it much easier to centre text in buttons and align headings precisely with other elements:

.button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  line-height: 1.2;
  /* Trim from the cap height at the top to the baseline at the bottom */
  text-box: trim-both cap alphabetic;
}

With this rule, the top padding is measured from the top of the capitals and the bottom padding from the baseline, so the text looks optically centred. At the time of writing, text-box is supported in Chrome, Edge and Safari but not yet in every browser, so check current support. Browsers that don't recognise it simply ignore the declaration, which makes it a safe progressive enhancement.

Overriding Metrics in @font-face

If a font's built-in metrics make text sit awkwardly, you can override them when you load it:

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans.woff2") format("woff2");
  font-display: swap;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

The percentages are relative to the font size. These descriptors are supported in Chrome, Edge and Firefox; check current Safari support before relying on them there. They're also commonly used to make a fallback font occupy the same vertical space as a web font, which reduces layout shift.

Common Problems With Ascenders and Descenders

Clipped Descenders

When you set overflow: hidden on an element with a tight line height, the bottoms of g, p and y can be cut off. This often happens with text truncation:

.card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  /* Too tight a line height clips descenders; 1.25 or more is safer */
  line-height: 1.25;
}

If descenders still clip, add a small amount of bottom padding inside the clipped element.

Underlines Cutting Through Descenders

Default underlines sit close to the baseline and would cross descenders. Modern browsers skip the ink of descenders by default with text-decoration-skip-ink: auto. You can also move the underline down a little:

a {
  text-decoration-line: underline;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: auto;
}

Collisions in Tight Headings

Large headings often use a line height near 1. If a heading wraps and the first line has descenders above a second line with ascenders or accented capitals, they can touch. Test your headings with words like "Typography" on the first line and "Élan" on the second.

Drop Caps That Don't Align

The initial-letter property creates drop caps that align to the baseline of a specified line. It works in Chrome and Edge, while Safari has long supported a prefixed version, so include both and test before relying on it:

.article > p:first-of-type::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
  margin-inline-end: 0.5rem;
  font-weight: 700;
}

The value 3 makes the letter span three lines, with its baseline aligned to the third line's baseline and its top aligned with the cap height of the first line.

---

FAQ: Ascenders, Descenders and the Baseline

---

Conclusion

The baseline, x-height, cap height, ascender line and descender line form the vertical skeleton of every Latin typeface. Ascenders and descenders give words their distinctive outlines, which helps readers recognise them quickly and is one reason lowercase text reads more easily than all caps. Fonts also store vertical metrics that reserve space for these parts, and browsers use them to build every line box on a page.

Understanding that relationship solves many everyday layout problems. Use baseline alignment in Flexbox and Grid to line up text of different sizes, text-box to trim the extra space around text where it's supported, metric overrides in @font-face to tame awkward fonts and fallbacks, and enough line height to stop descenders being clipped or colliding with the line below.