Equalize Font Spacing with CSS line-gap-override

When web fonts load asynchronously, differences in intrinsic font metrics between the custom font and the local fallback font cause text to shift vertically, leading to Cumulative Layout Shift (CLS). The CSS line-gap-override property solves this issue by allowing developers to redefine the line-gap metric of a fallback font directly within an @font-face rule. By adjusting this value to mirror the vertical spacing of the custom web font, browsers can render the fallback text with the exact vertical footprint of the incoming custom font, preventing sudden jumps in line height and page layout.

The Font Metric Mismatch Problem

Every font file contains built-in typography metrics determined by the type designer, including:

  • Ascent: The distance from the baseline to the top of the tallest glyphs.
  • Descent: The distance from the baseline to the lowest point of descending glyphs.
  • Line Gap: The recommended extra leading (vertical spacing) between successive lines of text.

When using font-display: swap, browsers instantly display a system fallback (such as Arial, Times New Roman, or Roboto) until the custom web font downloads. Even if both fonts share identical font-size and line-height declarations, variations in their internal line-gap metrics cause lines of text to occupy different amounts of vertical space. When the custom font swaps in, paragraphs expand or contract, causing content below to jump.

How line-gap-override Works

The line-gap-override property defines the font's internal line-gap metric as a percentage of the font's standard 1em size (or as normal, which uses the font's embedded default).

line-gap-override: <percentage> | normal;

A value of 0% removes the font's built-in internal line gap entirely, while a positive percentage adds extra spacing. When applied within a fallback @font-face declaration, it alters the distance between lines of text specifically for that fallback, without changing global CSS line-height rules.

Equalizing Spacing Between Custom and System Fonts

To equalize spacing, you create an aliased system fallback font and adjust its metrics to match the incoming web font:

/* 1. Define the web font */
@font-face {
  font-family: 'CustomSans';
  src: url('/fonts/custom-sans.woff2') format('woff2');
  font-display: swap;
}

/* 2. Create a modified fallback font */
@font-face {
  font-family: 'AdjustedFallback';
  src: local('Arial');
  line-gap-override: 0%;
  ascent-override: 90%;
  descent-override: 22%;
}

/* 3. Apply the font stack */
body {
  font-family: 'CustomSans', 'AdjustedFallback', sans-serif;
  line-height: 1.5;
}

Steps to Match Metrics

  1. Inspect Custom Font Metrics: Tools such as font inspection utilities or online font-metric generators extract the exact ascent, descent, and line-gap values from the primary custom font.
  2. Calculate the Ratio: Determine the line-gap ratio relative to the custom font's units per em (UPM). For example, if a font has a UPM of 1000 and an external line gap of 100, its line gap is 10%.
  3. Override the Fallback: Set line-gap-override on the fallback font so that its total line height matches the web font. If the web font has a line gap of 0%, setting the fallback's line-gap-override: 0% eliminates the fallback font's default internal padding.

Achieving Perfect Vertical Alignment

While line-gap-override specifically normalizes the spacing between consecutive lines, it is usually combined with ascent-override and descent-override. Together, these three properties define the exact vertical boundaries of the font box:

  • ascent-override sets the baseline-to-top boundary.
  • descent-override sets the baseline-to-bottom boundary.
  • line-gap-override handles the residual inter-line spacing.

By matching all three metrics to the custom font, the browser renders the fallback font within the identical vertical dimensions required by the web font, completely eliminating layout shifts when the font swap occurs.