The Orchardist's First Thinned Sapling: On the Necessary Sacrifice of Unseen Typefaces
There is a particular quality to the light in late autumn, a stark clarity that reveals the architecture of things once hidden by summer’s lushness. The trees on the hill behind my house stand skeletal against the grey sky, their forms honest and unadorned. It’s a season of pruning, of cutting away the deadwood to make way for future growth. And in this seasonal ritual, I find a profound parallel to a practice we often resist in our digital craft: the aggressive pruning of our font families.
We front-end developers, much like eager gardeners, often approach our projects with an abundance of optimism. We envision a typographic landscape rich with personality—a strong, authoritative headline face, a friendly and legible body font, perhaps a playful accent type for quotes. We load entire families with their thin, light, regular, medium, semi-bold, bold, and black variants, just in case the design calls for a specific semantic weight. It feels like preparation, like having a full toolbox. But as the autumn orchardist knows, not every sapling planted in the spring will bear fruit. Some must be thinned to ensure the remaining trees have the light and resources to flourish.
This ‘just-in-case’ typography is a subtle drain. Each additional font file, each stylistic variant, is a network request, a block of data the browser must fetch, parse, and integrate into the rendering tree. While a few kilobytes per font might seem negligible in isolation, the cumulative effect is a layout waiting in suspense. The browser, like a reader hesitating over an unfamiliar word, must pause its rendering journey. It knows text content is present, but without the precise metrics of the designated typeface, it cannot accurately calculate the space that text will occupy. This uncertainty is the digital equivalent of planting a sapling and having no idea how wide its canopy will spread, leading to a shaky, unstable layout until the final font arrives.
The Bitter Pruning Shears of `font-display: swap`
Our common remedy, `font-display: swap`, is a compromise that mirrors the chaotic growth we sought to avoid. It tells the browser to render the text immediately with a fallback font, and then to ‘swap’ in the custom font once it loads. This prevents the invisible text flash, but often introduces a more jarring experience: the layout shift. The fallback font and the custom font, no matter how carefully chosen, will have different widths, different heights. The text reflows, images jump, and the user’s focus is broken. We’ve traded one form of delay for another form of instability. It is a wild, unpruned growth spurt, unsettling the very ground the user is standing on.
The autumn’s lesson is one of deliberate sacrifice. It asks us to be more like the orchardist who, with a grimace, selects the weakest saplings for removal. We must ask ourselves: does this page *truly* need the ‘Thin 100’ italic? Is the ‘Black 900’ a necessity, or merely a design luxury? By brutally limiting our font palette to only the essential weights and styles we actually use—perhaps just Regular and Bold—we reduce the number of critical requests. We give the browser a clear, predictable set of instructions from the outset. The layout can be calculated with confidence, resulting in a stable, instantaneous rendering that feels solid and deliberate.
This act of reduction is not a constraint, but a form of clarity. It is the structural integrity of a well-pruned tree, standing strong against the winter winds. By sacrificing the potential of unseen typefaces, we secure the performance and stability of the content that is truly present. We trade a bloated promise for a lean, reliable reality, allowing our core message to stand tall and unshaken.
Notes & further reading
A few pages I came back to while writing this: