CSS descent-override: Aligning Fallback Font Baselines

The CSS descent-override descriptor allows developers to manually define the descent metric of a font face within an @font-face rule. This article explores what descent-override does, the typographic problems it solves, and how it aligns baseline heights between custom web fonts and system fallback fonts to eliminate Cumulative Layout Shift (CLS) during page loading.

What is the descent-override Descriptor?

The descent-override property is a CSS descriptor used inside an @font-face block. It overrides the font’s built-in descent metric—the space reserved below the typographic baseline for characters with descending elements, such as the lowercase letters "g", "y", "p", and "q".

By default, every font file contains embedded metadata defining its descent, ascent, and line gaps. Different typefaces have different default descent values even when assigned the exact same font-size. The descent-override descriptor lets you bypass the font file's internal metrics using either a percentage value or the normal keyword:

@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  descent-override: 20%;
}

The percentage value is calculated relative to the font's 1em sizing unit. A value of 20% instructs the browser to allocate exactly 0.2em below the baseline for glyph descenders.

The Problem: Baseline Shifts and Layout Instability

When a browser renders text using a remote web font, it typically displays a local fallback font (such as Arial, Times New Roman, or system-ui) while downloading the custom font file.

Because the fallback font and the web font almost always possess different internal vertical metrics, the position of the baseline shifts when the web font swaps into place. Even if the text's overall line box remains identical, text lines can jump up or down vertically. This visual movement creates layout instability and negatively impacts Cumulative Layout Shift (CLS) scores, a Core Web Vital metric.

How descent-override Aligns Fallback Baselines

To eliminate baseline jumping, developers create a dedicated @font-face rule for the system fallback font using local(), applying metric overrides to force the fallback font to mimic the dimensions of the primary web font.

The baseline of an inline box is calculated from the top of the line box down to the bottom, dictated heavily by the ascent and descent metrics. When you alter the descent:

1. Recalibrating Below-Baseline Space: Applying descent-override to the fallback font forces its baseline to sit at the exact vertical position that the incoming web font requires.
2. Preventing Line-Height Discrepancies: Paired with ascent-override, modifying the descent balances the total content area height of the fallback glyphs, keeping multi-line text blocks from expanding or contracting during the font swap.

Implementation Example

To align a local fallback font with a custom web font, measure the target font's metrics and declare a modified fallback font face:

/* Primary Web Font */
@font-face {
  font-family: 'BrandWebFont';
  src: url('/fonts/brand-font.woff2') format('woff2');
  font-display: swap;
}

/* Adjusted Fallback Font */
@font-face {
  font-family: 'BrandFallback';
  src: local('Arial');
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* Applying the Fonts */
body {
  font-family: 'BrandWebFont', 'BrandFallback', sans-serif;
}

In this implementation, the browser loads the text initially using the local Arial glyphs, but forces Arial's descent to 25% of the font size. When BrandWebFont finishes downloading and replaces Arial, the baseline and the space reserved beneath it remain virtually motionless, creating a seamless visual transition with zero layout shift.