30 Font Fallback Metrics. 30 of 95.
30/PERCEIVED PERFORMANCE/30 of 95
Font Fallback Metrics
Match the space, not just the look — then the swap won’t move the page.
The problem
When a webfont arrives late, a “similar looking” fallback still has different widths and baselines, so the page jumps as letterforms swap.
The solution
Right: make the fallback occupy the same space (size-adjust + ascent/descent overrides). Letterforms change; nothing moves.
Experiment
Play with the values
1200ms
107
How it works
- Text renders with the fallback face first, so there is something to read before the webfont arrives.
- A lookalike face with different metrics would reflow the page when the real font swaps in.
- size-adjust plus ascent and descent overrides make the fallback occupy the same space as the webfont.
- When the webfont loads, the letterforms swap.
- The layout does not move, because the metrics already matched.
Seen in
Marketing heroes
Big headlines keep their bounding box when Inter or a brand face finishes loading.
Article body
Reading position and wrap lines stay stable across font swap.
Product cards
Price and title rows do not reflow when the webfont replaces the system face.
Design systems
Tokenized fallback stacks are generated with metric overrides for each brand face.