Font-display Swaps Can Shift Layout Through ch-Based Widths, Harness Shows
A developer argues that font-display: swap is a three-phase timing contract rather than a single behavior, and that its layout impact can be larger than typically assumed. Using a test harness on a hero page with a 52ch-constrained paragraph, the author found that the paragraph's width jumped about 35.6% when the webfont replaced the fallback, because ch is recalculated from the active font's zero-glyph width. That width change reduced the paragraph from three lines to two, moving the button up 29px. Measured layout-shift values varied by display setting, with swap producing a cumulative layout shift of 0.00083 and a size-adjusted fallback reaching 0.00779. The author notes these figures come from a single controlled setup and states the limits of the test.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in