The Calligrapher's Unsteady Hand: On the Necessary Tremor of a Variable Font

We have been taught, with the stern certainty of a master mason laying a foundation, that a performant page is a predictable one. Every resource must be known, measured, and accounted for before a single line of text is painted to the screen. This dogma extends to our typography, where the prevailing wisdom champions the static, self-hosted font file. We subset, we preload, we declare explicit fallbacks, all in the name of eliminating the dreaded layout shift. We seek to build a page that arrives not like a living thing, but like a stone tablet: complete, immutable, and utterly still.

But in this quest for absolute stability, have we sanded away something vital? Have we, in our fear of the jittery reflow, rejected the very quality that makes the web feel… human? The common advice treats a font as a fixed asset, a binary to be loaded or not. Yet, a variable font is not a static asset; it is a spectrum of expression, a potentiality. To pre-define its every possible axis and weight is to ask a symphony to play only a single, pre-recorded note.

The counterintuitive truth is that the subtle, intentional movement of a variable font—the very thing we’ve been taught to suppress—can be a feature of superior user experience, not a bug. Consider the act of a page’s content settling into its final form. Instead of a jarring, uncontrolled jump from system font to web font, what if the transition itself was a graceful, designed animation? A headline could gain weight and presence as it loads, not snapping into a new form, but growing into it. A blockquote could subtly italicize itself into being. This is not a layout shift in the pejorative sense; it is a guided performance.

This approach requires a different kind of craft. It demands that we move from being mere load-time accountants to becoming choreographers of perception. We must design the loading sequence with the same intent we apply to a hover state or a page transition. It means using the `font-display: optional` value not as a defeat, but as a creative constraint, and writing CSS that gracefully handles the in-between states—the ‘tremors’—as the font’s full range becomes available.

To reject this possibility outright in the name of a perfect Lighthouse score is to prioritize the machine’s cold metric of stability over the human’s warm perception of fluidity and life. It is the difference between a printed page, which is dead upon arrival, and a calligrapher’s hand, whose slight shake and varied pressure are the undeniable marks of its creation. The web was never meant to be a stone tablet. Perhaps its greatest performance trick is not in hiding its loading, but in making the loading itself beautiful.

Notes & further reading

A few pages I came back to while writing this: