The Potter's First Uncentered Clay: On the Subtle Wobble of a Non-Guaranteed Font
Every potter knows the first, most critical step: centering the clay. It’s a foundational act of pressure and patience, a process of convincing a spinning, amorphous lump to find its true axis. A potter works with an intimate understanding of their material, its weight, its moisture, its resistance. They know that if the clay is not perfectly centered at the start, every subsequent action—pulling up the walls, shaping the form—will amplify that initial instability. The final piece, no matter how beautiful its glaze, will carry a subtle, inherent wobble.
This principle of a centered foundation has a direct and often overlooked parallel in our work on the web. We are not shaping clay, but user experience, and our most common uncentered material is typography. We select a beautiful, expressive font, load it asynchronously, and trust the browser to handle the swap. We’ve done our job, haven’t we? We’ve prevented a blocking request. But like the potter who assumes the clay is close enough to center, we’ve ignored the foundational wobble we’ve introduced: Layout Shift.
The browser, without the guaranteed presence of our chosen font, must render text with a fallback. It calculates the layout based on the dimensions of Times New Roman or Arial. Then, seconds later, our web font arrives. The browser swaps it in, but the new glyphs have different widths, different spacing, a different personality. The text reflows. A headline jumps down, pushing a button with it. A paragraph shifts, causing a caption to vanish below a fold. The entire page, meticulously crafted, jitters with the unmistakable wobble of a foundation that was never truly centered.
The potter’s craft teaches us that the solution isn’t to avoid using the beautiful clay; it’s to understand it and control for its behavior from the very first moment. For us, this means moving beyond simply specifying a fallback font. It means using `font-display: optional` for secondary text where a perfect match is less critical, allowing the browser to use the fallback for the entire session if the custom font isn’t available immediately. For our primary branding, it means employing the `size-adjust` descriptor in our `@font-face` rules, a tool that lets us pre-emptively sculpt the fallback font’s metrics to mimic those of our final choice, effectively ‘centering the clay’ before we even begin to pull up the walls of our layout.
This isn’t about perfectionism for its own sake. It’s about respect for the user’s focus and the integrity of the experience we’re building. A potter feels the wobble through their hands; we see it in our Cumulative Layout Shift scores and, more importantly, in the confused squint of a user trying to read text that won’t stay still. By borrowing the potter’s insistence on a centered start, we build a sturdier, more stable, and ultimately more professional experience. We trade the subtle, distracting wobble for the satisfying, silent spin of a thing that is perfectly, reliably true.
Notes & further reading
A few pages I came back to while writing this: