The Calligrapher's First Un-inked Brush: On the Silent Promise of a Perfectly Optimized Page Without a `font-display`
There is a moment, before the first stroke, when the calligrapher’s brush is poised above the paper. It is dry, unburdened by ink, yet heavy with potential. It holds every character, every word, every elegant serif and bold stroke that might soon flow from its tip. It is a vessel of pure, unmanifested intent. This is the quiet, almost sacred state of a web page the instant before a custom font arrives—a moment governed not by what is rendered, but by what is promised.
We speak so often of the font itself, of its weight and its kerning, of the FOUT and the FOIT that disrupt our carefully laid compositions. We wrestle with the `font-display` directive, a set of instructions we hope will tame the chaos of network timing. But we rarely pause to consider the canvas in that breath between the request and the response. It is a canvas of fallbacks. It is a page rendered in the anonymous, utilitarian typefaces of the system—Arial, Georgia, Times New Roman. It is the un-inked brush.
This fallback state is not a failure of design; it is its first and most honest draft. It is the raw structure of our thought, laid bare without the tailored costume of our chosen typeface. In this state, the page must stand on its own merits. The hierarchy must be clear, the spacing must be true, the content must be legible. It is a test of the page’s fundamental integrity. A poorly built layout will crumble under the weight of a slightly different font metric, but a honest one will hold its shape, its meaning intact.
To omit a `font-display` strategy is to leave this moment to chance. It is to let the browser decide, in its ancient wisdom, how long to hold that silent, empty breath before exhaling the fallback text. It is an act of faith, or perhaps neglect. But to consider it deeply is to understand that our design does not begin when the web font loads. It begins in that anticipatory silence. The choice of fallback is not a contingency plan; it is the foundation. The `size-adjust` and `descendant-scale` are not mere tweaks but fine calibrations to ensure the soul of the layout remains steady through the transition.
Perhaps perfection is not found in the seamless, instantaneous swap from nothing to everything. Perhaps it is found in honoring that intermediate state—the un-inked brush, the silent promise. It is the acknowledgment that the true performance of a page is not just its speed, but its steadfastness. It is the ability to be complete and meaningful even while waiting, holding its form patiently, a perfect and readable map even while the cartographer’s finest inks are still drying.
Notes & further reading
A few pages I came back to while writing this:
- The Cartographer's First Un-anchored Map: On the Drifting Coastline of a Perfectly Optimized Viewport Without a Meta Tag
- The Glassblower's First Un-annealed Vessel: On the Brittle Tension of a Perfectly Optimized Page Without a `fetchpriority`
- The Archivist's First Unbound Folio: On the Scattered Leaves of a Perfectly Optimized Gallery Without a `grid-template`