The Scribe's Flourish: On the Cost of a Hand-Drawn @font-face

In the scriptoriums of medieval monasteries, the act of writing was an exercise in deliberate patience. A scribe, hunched over a sheet of vellum, would carefully form each letter, his quill following the established rhythm of a specific script—the stately Carolingian minuscule or the dense, authoritative Textura. The page was constructed letter by letter, stroke by stroke, and the reader’s experience was built upon this foundational stability. There was no such thing as a ‘flash of unstyled text.’ The style was the text, inseparable from its form from the very first moment it met the eye.

This harmony stands in stark contrast to the modern web, where our typographic ambitions often outpace the browser’s ability to render them. We declare a beautiful, bespoke typeface with a simple @font-face rule, a digital flourish meant to elevate our design. But in doing so, we inadvertently reintroduce a frantic, invisible race against time. The browser, upon encountering our instructions, must now fetch this custom asset over the network. And in that critical gap—the time between the HTML being parsed and the web font file arriving—it faces a dilemma: what should the user see?

This is our modern-day equivalent of the scribe pausing to dip his quill. The browser, like a conscientious apprentice, can choose to wait patiently with a blank space, holding the entire text until the flourish is ready. This is the dreaded FOIT, the Flash of Invisible Text, where a page can feel broken, suspending content in an unnerving void. Alternatively, the browser can proceed with the work using the tools it has on hand—a fallback system font—and then perform a sudden, jarring restyle the moment the custom font loads. This is the FOUT, the Flash of Unstyled Text, a typographic quick-change that can disorient a reader mid-scroll, much like a scribe changing his handwriting style halfway through a sentence.

Neither outcome is ideal. Both break the sacred contract of the scribe: that the presentation of the word should be an immediate, stable, and trustworthy vessel for its meaning. The problem isn’t the flourish itself; it’s our failure to account for the time it takes to prepare it. We have become masters of design but amateurs in the logistics of delivery.

The lesson from the scriptorium is one of holistic craft. The scribe understood that the beauty of the flourish was not an afterthought; it was integrated into the entire process. For us, this means treating a web font not as a decorative layer but as a critical, load-bearing component of the initial render. It means using font-display: swap not as a mere performance hint, but as a deliberate choice to prioritize immediate readability, accepting the FOUT as the lesser evil. It means aggressively preloading critical fonts and perhaps even considering the strategic use of a fallback font that closely mirrors the dimensions of our custom choice, ensuring layout stability even during the swap. Our craft lies not just in choosing the beautiful typeface, but in ensuring its arrival is as graceful and uninterrupted as the stroke of a scribe’s pen.

Notes & further reading

A few pages I came back to while writing this: