The Hatter's Two Felt Blocks: On the Drape of a Font vs. The Fit of a Font

There’s a quiet, consequential battle being waged in the space between the end of our stylesheets and the start of our content. It concerns the fonts we choose, and more importantly, how we choose to let them arrive. For years, the prevailing wisdom for performance-conscious developers has been clear: control everything. Use `font-display: optional` or `swap`, lean heavily on system fonts, and above all, avoid the Flash of Unstyled Text (FOUT) or the Flash of Invisible Text (FOIT) like the plague. This is the ethos of the precise fit. We tailor the experience, pre-defining fallbacks and swap strategies so that the page, while perhaps not instantly beautiful, is instantly *legible* and stable. The layout is calculated with the known dimensions of the fallback font, and when the web font loads, if it loads at all, it swaps in—hopefully without causing a jarring reflow. The page fits together like a felt hat blocked over a precise form.

But recently, a different, almost philosophical approach has been gaining ground, championed by proponents of the `size-adjust` descriptor in `@font-face`. This is the art of the drape. Instead of wrestling with two different fonts (your web font and its fallback) that have wildly different widths and heights, you can now instruct the browser to treat the fallback font as a mere ghost, a stand-in scaled to match the dimensions of your preferred typeface. You use `size-adjust` and `ascent-override` to manipulate the fallback's metrics so that it occupies the exact same space as the desired web font. The result? When the page renders, it calculates its layout using the fallback font that is now, for all mathematical intents and purposes, your web font. There is no swap. There is only a seamless, invisible replacement of one glyph set for another. The content drapes over the unchanging layout, smooth as silk.

The Cost of the Seam

Each approach has its texture. The fitter’s way, the traditional swap, is honest. The user sees a shift, a momentary hiccup that acknowledges the network’s reality. It demands careful pairing of fallback fonts to minimize the shift’s disruption—a craft in itself. But it can never be perfectly seamless, and in that imperfection lies a kind of integrity about the medium. The draper’s way, with `size-adjust`, is undeniably elegant when it works. It promises a pure, stable experience from the first pixel. Yet its elegance is built on a new layer of complexity. You must know your font’s exact metrics and apply them correctly. It creates a dependency not just on the font file, but on your accurate translation of its soul into a few lines of CSS. Get it wrong, and the drape sags or strains.

In the end, the choice isn't merely technical; it's a question of what kind of maker you are. Do you value the robust, fault-tolerant craft of the fitter, who plans for failure and makes its transition part of the story? Or do you pursue the illusionist's perfection of the draper, who spends immense effort upfront to make the machinery invisible? One accepts the web's grain and works with it; the other seeks to sand it perfectly smooth. Both are valid paths toward a stable, performant page—one concerned with the fit of the moment, the other with the drape of the ideal.

Notes & further reading

A few pages I came back to while writing this: