The Lapidary's First Unpolished Facet: On the Accumulated Friction of a Perfectly Asynchronous Font Load
There’s a particular tension when you introduce a beautiful, custom typeface to a page. It feels like a finishing touch, the final polish that elevates the raw text into a crafted experience. Yet, the very act of applying this polish can, paradoxically, create a moment of profound friction for the reader. The page renders, the layout snaps into place, and for a hair’s breadth of a second—or sometimes for a painfully long stretch—the text is invisible, or worse, a jumble of unstyled system fonts that suddenly reflow into your chosen typeface. This moment, this flash of unstyled text (FOUT) or, more jarringly, the blank space of invisible text (FOIT), is the rough, unpolished facet on an otherwise gleaming interface. It’s a failure of perceived performance, where the page seems to be, but the soul of its communication is still missing.
The instinct, especially for a craftsperson, is to control this. We reach for `font-display: block` to hide the text until our perfect font is ready, ensuring no ugly swap. We’ve cut the gem, but we refuse to set it until the perfect polish is applied. The page waits, pristine and silent, holding its breath. But this is a trade-off. That silence is a cost levied on the user’s patience. A slow connection, a hiccup in the network, and that held breath becomes a suffocating pause. The user is left staring at a blank canvas, wondering if the content has failed to load entirely.
The alternative, `font-display: swap`, feels messy. It’s the lapidary setting the gem with a temporary, crude polish. The text appears immediately in a fallback font, and when the custom font loads, it swaps in. This causes a reflow—the text shifts, the layout adjusts. It feels like an admission of imperfection. But this is where we must challenge our aesthetic instincts. This momentary shift, while visually imperfect, is far kinder than the uncertainty of a blank screen. The user can begin reading immediately. The content is present. The experience is progressing.
But there’s a more refined technique, a way to minimize this reflow almost to the point of imperceptibility. It’s not about preventing the swap, but about making it so smooth it’s barely noticed. The key lies in the humble, often-overlooked fallback font. We must become masters of the substitute. Instead of accepting the default system font behavior, we can use the `size-adjust` and `ascent-override` descriptors in our `@font-face` rule for the fallback. By meticulously tuning the fallback font’s metrics to mimic the dimensions of our custom typeface, we can engineer a near-perfect placeholder. The swap still happens, but the text no longer jumps. The layout remains stable.
This is the true polish. It’s not the polish of hiding the process, but the polish of perfecting the transition. It acknowledges the reality of the network and prioritizes the user’s time. The initial view is not a compromise; it is a carefully engineered preview. When the custom font finally glides in, it does so seamlessly, filling the exact space reserved for it. The friction is gone. The lapidary hasn’t just chosen a beautiful stone; they’ve mastered the setting, ensuring that from the first moment it’s seen, the experience is whole, stable, and respectful of the observer’s time. The craft is in the preparation, not just the final shine.
Notes & further reading
A few pages I came back to while writing this: