The Potter's First Unwedged Clay: On the Hidden Fracture of an Unsubscribed Font
I remember the exact moment the vessel cracked. It wasn’t on the wheel, where my hands were coaxing a lump of cool, grey clay into a slender vase. It wasn’t in the kiln, where the alchemy of heat transforms soft earth into permanent ceramic. It was on a screen, in a browser, moments after I’d hit ‘publish’ on the portfolio page meant to showcase it.
The site was a simple, minimalist thing, designed to let the work speak for itself. I’d chosen a beautiful, elegant typeface for the descriptions—a font with fine serifs and a delicate weight that felt like the perfect verbal counterpart to the physical pieces. I’d done everything the tutorials said: I’d subset it, I’d used `font-display: swap`, and I’d watched the Lighthouse score tick up to a satisfying green. The page loaded, as they say, ‘blazingly fast.’ I leaned back, proud.
Then, I watched a friend load the page on her older laptop. The initial render was indeed fast, a flash of system-font ugliness that was quickly painted over as my chosen typeface swooped in. But it didn’t swoop. It stuttered. The text rendered in that fallback font, held for a beat, and then the entire text block visibly reflowed as the web font finally arrived. The page jolted. A line of text describing the vase’s ‘graceful, uninterrupted curve’ suddenly jumped down, knocking into the image below it. The elegant caption now looked clumsy, an afterthought crashing into the art it was meant to complement.
In that moment, I didn’t see a web font. I saw my vase, the one I’d spent hours perfecting, developing a hairline crack from base to lip. The form was still there, the function intact, but the flaw was all I could see. It was a fracture in the experience. My meticulous care for the physical object had been undermined by my oversight of the digital one. I had been so focused on the speed of delivery, on the technical victory of a fast load, that I’d forgotten the user’s journey. I’d forgotten the jarring dissonance of something arriving out of sync with itself.
That reflow was the digital equivalent of a poorly wedged piece of clay—a hidden pocket of air that, under the pressure of firing, causes a rupture. I had eliminated the air bubbles from my clay with painstaking patience, yet I’d left one lurking in my CSS. The fix was simple, almost embarrassingly so: `font-display: optional`. A single property change that acknowledged a hard truth: if the font isn’t there almost immediately, it shouldn’t interrupt the party later. It was a lesson in humility. Performance isn’t just a score; it’s the integrity of the moment. It’s ensuring that what you build, whether from earth or from code, holds its shape for everyone who encounters it.
Notes & further reading
A few pages I came back to while writing this: