The Tailor's First Unpinned Hem: On the Unseen Drag of a Font Waiting for Its Fallback
There is a moment in tailoring, just before the final stitch, when the garment is merely pinned. It looks complete. It hangs with the intended line and drape. But it is an illusion of readiness. The slightest movement, the first real step, reveals the temporary nature of the hold. The fabric shifts, the pins threaten to give way, and the entire structure is exposed as precarious. This is the state of a web page rendering a beautiful custom typeface without first defining its fallback.
We pour immense effort into selecting and loading our perfect web fonts, treating them as the finished garment. We see them in our design tools, static and glorious. But the browser encounters them differently. It must first locate the font resource, often across a network, and only then can it paint the glyphs. In that gap—between the initial layout with the fallback font and the subsequent swap to the custom one—lies the unpinned hem.
This period is known as the Flash of Unstyled Text (FOUT), or if we’ve clumsily tried to hide it, the Flash of Invisible Text (FOIT). Both are failures of the craft. They are the dress rehearsal in front of the audience, the pins clearly visible. The user sees either a jarring shift in text, causing them to lose their place, or worse, a blank space where content should be, causing them to question the page’s stability.
The true craft lies not in eliminating this gap, but in orchestrating it. It is in the meticulous pinning—the `font-display: swap` directive that tells the browser to use the fallback immediately and swap later. But even this is only half the measure. A master tailor knows the undergarments must match the final dress in form and function. So too must our fallback fonts.
We must choose a system fallback that closely mirrors the metrics of our custom font—its width, its cap height, its x-height. We can use CSS `font-metrics-overrides` or tools to calculate and set `size-adjust`, `ascent-override`, and `descent-override`. This ensures that when the browser lays out the page with the fallback, it reserves almost precisely the same amount of space the custom font will need. The swap becomes a quiet, nearly imperceptible change in texture, not a violent reflow of the entire layout. The hem is sewn, not pinned. The page is stable from the first moment it meets the user’s eye, a testament to a craft that considers not just the final beauty, but the integrity of the entire journey.
Notes & further reading
A few pages I came back to while writing this: