Inter in color, its fallback in gray underneath. The closer they line up, the less the page moves when Inter arrives.
Type is the voice of a page. When a web font arrives late, the browser must decide whether to wait for it, to show the words in a fallback font, or to give up. Each choice has a cost: blank space, a jump, or a page that never looks the way it was designed.
| Font | Lines | Height | Against Inter |
|---|---|---|---|
| Inter | … | … | — |
| Arial | … | … | … |
| Inter fallback (adjusted Arial) | … | … | … |
With line-height: normal, each line is as tall as the font's ascent plus descent plus line gap, rounded to whole pixels. Inter's ascent at 16 pixels is exactly 15.5, a half-pixel edge: the computed 91.31% gives the fallback 15.4996 pixels, which rounds down and loses a pixel a line, so this demo nudges it to 91.5%. With a number such as 1.5, every line is the same height whatever the font, no nudging is needed, and only the line breaks can move the page: that is the job of size-adjust.
Type is the voice of a page. When a web font arrives late, the browser must decide whether to wait for it, to show the words in a fallback font, or to give up. Each choice has a cost: blank space, a jump, or a page that never looks the way it was designed.
This line comes after the paragraph. When the font swaps, it moves by the difference in height.
From the fonts' tables (units per em: 2048 for both)
Inter: ascender 1984, descender 494, line gap 0
Arial: ascender 1854, descender 434, line gap 67
Sample paragraph, advance widths: Inter 118.414 em
(at optical size 16), Arial 111.615 em
size-adjust = 118.414 / 111.615 = 1.0609 → 106.09%
ascent-override = (1984 / 2048) / 1.0609 = 0.9131 → 91.31%
(used here: 91.5%, past the half-pixel edge at 16px)
descent-override = (494 / 2048) / 1.0609 = 0.2274 → 22.74%
line-gap-override = 0 / 2048 = 0%
The overrides are divided by the size adjustment because they apply to the font after it has been resized. Inter has an optical size axis, so it is a little narrower at larger sizes: these values match it at 16 pixels, the size used here, and drift at others.