The Potter's First Kiln: On the Cracking Clay of an Unoptimized Typeface

I remember the heat of the monitor on my face more than the warmth of any kiln. It was my first real commission, a website for a local ceramicist whose work was all elegant, flowing curves and impossibly smooth glazes. I wanted the site to feel like her art: deliberate, tactile, and beautiful. I spent days meticulously crafting the layout, ensuring every div was perfectly centered, every shadow subtly applied. And then I found it: the perfect typeface. It wasn’t just a font; it was the voice of the project. It had delicate serifs that echoed the lip of a vase, a variable weight that felt like wet clay under a skilled hand. I embedded it with a triumphant flourish, certain I had nailed the assignment.

I sent her the link to the staging site late one evening, proud as any artisan presenting a finished piece. The reply came the next morning, not with praise, but with a confused, slightly concerned question. "It looks beautiful," she wrote, "but it took a long time to come into focus. For a while, it was just blank, then blocky text, and then it sort of… snapped into place. Is that normal?"

My heart sank. I opened the site on my phone, on a weaker connection, and witnessed the betrayal myself. The blank canvas of the FOIT—the Flash of Invisible Text. There was her beautiful content, held hostage by my beautiful font, a blank space where her words should have been. Then, the jarring shift as the fallback font finally conceded and loaded, only to be violently ripped away a second later when my chosen typeface decided to make its grand, late entrance. The entire page reflowed, images jumped, and the serene experience I had designed was shattered into a chaotic, janky mess.

In that moment, I wasn’t a designer; I was a potter who had failed to account for the shrinkage of the clay in the fire. I had been so obsessed with the final, ideal state—the glazed piece coming out of the kiln—that I ignored the volatile, unpredictable process of getting it there. The user doesn’t experience your ideal state first; they experience the journey. That blank space was the cracking of unfired greenware. The reflow was the warp of a piece cooled too quickly.

The lesson was seared into me. Beauty is not just an aesthetic outcome; it is the entire process of arrival. Now, `font-display: swap` is my first instinct, not an afterthought. I preload. I test on throttled connections relentlessly. I have learned to design for the transition, for the space between the request and the resolution. Because a page that loads gracefully, that respects the user’s time from the very first millisecond, is the truest form of craftsmanship. It’s the difference between a piece that survives the kiln and one that emerges, not just intact, but perfected by the fire.

Notes & further reading

A few pages I came back to while writing this: