The Potter's Centered Clay: On the Balance of a Shifting Baseline

We often speak of a page’s Core Web Vitals as if they are isolated metrics, each a distinct measure of a particular discomfort. But a visitor’s experience is not a checklist; it’s a continuous, fluid narrative. One moment, in particular, feels uniquely jarring: when you’re about to tap a link or a button, and the page suddenly lurches, pushing your target away at the last second. You tap the wrong thing, or tap nothing at all. The page has betrayed your intention.

This specific frustration is born from a phenomenon known as layout shift, and its most insidious cause is often something that feels utterly innocuous: a web font finally snapping into place. We think of fonts as a question of style, of branding. But to the browser, a font file is a resource that must be fetched and applied. In that gap between the initial page render and the font’s arrival, the browser makes a calculation. It renders the text with a fallback font. Then, when the intended font loads, it swaps it in. This is FOIT, or Flash of Invisible Text, and its more common modern counterpart, FOUT—Flash of Unstyled Text.

The Unseen Hand on the Wheel

The problem isn’t the swap itself; it’s the difference in the metrics between the two fonts. A fallback font like Arial and a custom font like your sleek, brand-specific typeface are not pixel-perfect matches. They have different widths, different heights, different spacing. When the swap occurs, the text reflows. A paragraph might become longer, pushing content down. A button’s label might become wider, causing the entire component to shift. This is the ‘shifting baseline’—the invisible hand that moves the ground beneath your reader’s cursor.

The solution isn’t to avoid custom fonts, but to approach them with a potter’s mindset. A potter centers the clay on the wheel before beginning to shape it. This centering is everything; without it, the entire piece will be off-balance and will wobble uncontrollably. Our ‘clay’ is the initial layout, and our ‘centering’ is the act of defining the space the text will occupy before the preferred font even arrives.

We do this by tuning the `font-display` descriptor and, more crucially, by using the `size-adjust` and `font-display: optional` properties or tools that simulate their effect. By meticulously adjusting the fallback font’s metrics—its aspect ratio, its vertical alignment—we can pre-emptively carve out a space that the final font will fill almost perfectly. The swap still happens, but the layout holds firm. The baseline does not shift. The reader’s tap lands true. It is the craft of anticipation, of building stability not through brute force, but through thoughtful, precise preparation.

Notes & further reading

A few pages I came back to while writing this: