size-adjust

A fallback font that does not move the page

Live demo

Caveat and fallback

CaveatEach box is as wide as its own text, and the blue edge is where that text ends. The middle one overshoots by a third, which is the shift every reader sees when the real font finally lands. size-adjust scales the substitute until its advance widths match, and the three overrides pin ascent, descent and line gap so the line boxes agree as well. All four are @font-face descriptors, and they are per face, so bold needs its own numbers.

FallbackAn engine that ignores the descriptors loads the same file at its natural metrics, which is the middle box and no worse than doing nothing at all. The numbers are the fragile part. One ratio can only ever match an average, because a monospaced stand-in for a proportional face disagrees character by character, so 76.4% lands this sentence exactly and another one a few pixels out. Measure against your own copy, pick the fallback that already has the closer proportions, and remeasure the day either font changes.

Source code

<p class="copy">no reflow when it lands</p>

@font-face {
  font-family: fallback-matched;
  src: local("Arial");
  /* measured, never guessed */
  size-adjust: 76.4%;
  ascent-override: 137%;
}
.copy { font-family: Inter, fallback-matched; }

Published 29 Oct 2026