The Potter's Wet Clay and the Glassblower's Set Crystal: On the Settling Tension of a Late-Applied Font

There is a quiet, often overlooked struggle that occurs in the first moments a visitor arrives at a page. It’s a brief tug-of-war between two philosophies of rendering, two distinct approaches to one of the most fundamental elements of our craft: the font. On one side, we have the method of the Potter, working with wet clay. On the other, the discipline of the Glassblower, whose material is set and immutable. This is the battle between the Flash of Unstyled Text and the Flash of Invisible Text.

The Potter’s approach—FOUT—is one of progressive enhancement. It acknowledges that the web is an asynchronous and unpredictable medium. A custom font is a resource that must be fetched, and fetching takes time. So, the Potter lets the text appear immediately in a system font. The clay is on the wheel, visible and malleable. The reader can begin their work without delay. Then, when the custom font finally loads, the page reflows. The text shifts, the layout adjusts, the clay settles into its final, more beautiful form. It’s a practical concession, prioritizing utility over perfect initial aesthetics.

The Glassblower’s method—FOIT—demands perfection from the outset. It operates under the principle that a visitor should never see a fallback; they should only ever see the intended design. So, the browser is instructed to hide the text entirely, rendering invisible glyphs until the custom font is ready. The page holds its breath. For a few hundred milliseconds, or tragically sometimes for seconds, the user sees a blank space where content should be. Then, in one instantaneous event, the entire text block appears, perfectly formed like crystal from the glassblower’s pipe. It is a flawless, all-or-nothing reveal.

Each approach carries its own cost. The Potter’s reflow is a jarring experience, a cumulative layout shift that can disorient a reader mid-scroll, knocking buttons and images out from under their cursor. The Glassblower’s silence, however, is a barrier to access. It presumes a fast connection and a patient user, punishing those without either. It trades potential layout instability for a guaranteed delay in content delivery.

Modern best practices suggest we are now leaning toward the Potter’s pragmatic wisdom, using `font-display: swap` to minimize the invisible text timeout. We accept the minor shift to avoid the major void. It is an acknowledgment that content, in its raw and immediate form, is the true foundation. The beautiful font is an enhancement, a layer to be applied when ready, but never at the cost of locking the user out. The clay must be worked while it is still wet; waiting for the perfect moment risks it drying into an inaccessible block.

Notes & further reading

A few pages I came back to while writing this: