Using font-size-adjust for Consistent Fallbacks

font-size-adjust for Consistent Fallbacks

When a browser cannot load your primary font and falls back to an alternative, the visual size of text often changes dramatically — even if the font-size stays the same. This happens because different fonts have different x-height ratios (the height of lowercase letters relative to the font size).

The Problem

font-family: "Custom Font", Arial, sans-serif;

If "Custom Font" has an x-height ratio of 0.53 and Arial's is 0.52, the fallback looks nearly identical. But if the ratio differs significantly (e.g., 0.43 for Futura vs 0.52 for Arial), the fallback text looks noticeably larger or smaller, causing layout reflow.

The Solution

font-family: "Custom Font", Arial, sans-serif;
font-size-adjust: 0.53;

The font-size-adjust property tells the browser: "When falling back, adjust the font size so the x-height matches 0.53 of the computed font size." This keeps line heights, text block heights, and overall layout stable during fallback.

How to Calculate the Value

1. Find your primary font's x-height ratio. You can measure it:

   • Render a lowercase "x" and measure its height relative to the em-box
   • Or use tools like Font Squirrel's x-height calculator

2. Common ratios:

Font	x-height ratio
Inter	0.53
Arial	0.52
Georgia	0.48
Times New Roman	0.45
Verdana	0.55
Courier New	0.43

Browser Support

font-size-adjust is supported in Firefox (since version 3!), Chrome 127+, and Safari 17+. For older browsers, it is simply ignored.

Combined Example

h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size-adjust: 0.47;
}

body {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size-adjust: 0.53;
}