The Conductor's First Un-battened Score: On the Silent Cacophony of a Perfectly Optimized Font Without a `size-adjust`

Imagine a conductor, baton poised, ready to lead the orchestra through a complex, modern piece. The score is perfect, every note meticulously placed for a harmonious performance. The first violins begin, their tone pure and exactly as intended. Then the brass section enters, but their instruments are tuned to a different, slightly larger scale. The notes are correct, but the sound is jarring, overwhelming the strings and throwing the entire ensemble into disarray. This is the silent, visual cacophony of a web font swap without the `size-adjust` descriptor.

For years, we've been taught to fight the dreaded FOIT and FOUT with `font-display: swap`. We celebrate as our text appears instantly with a fallback font, believing we've won the performance battle. And in a way, we have. The user gets content immediately. But we've often merely traded one jarring experience for another, subtler one. The fallback font—say, Arial—renders, and then moments later, our beautiful custom font—let's call it Maestro—loads and swaps in. But if Maestro has a significantly different intrinsic size, or "aspect ratio," from Arial, the entire text block will suddenly reflow. Headlines jump, body text shifts, and a button you were about to click silently slides down the page. We've avoided a blank screen, only to create a layout shift.

Tuning the Instrument Before the Performance

This is where `size-adjust` enters the stage. It’s not a magic bullet for all layout shifts, but it is a precision tool for this specific, font-induced instability. Think of it as tuning the brass section to the same scale as the strings before the concert begins. The `size-adjust` CSS descriptor, used within an `@font-face` rule, allows us to scale a font’s metrics—its em-box, its advance widths, its glyph outlines—by a percentage. The goal is to make the swap from fallback to web font a purely aesthetic change, not a geometric one.

The process is one of meticulous measurement. You must first identify your key fallback font. Is it Arial? Georgia? Helvetica? Then, using tools like the `font-style-matcher` or by inspecting metrics in a program like Glyphs, you calculate the percentage difference in their widths. If your custom font, Maestro, is 5% wider than Arial on average, you would declare: `size-adjust: 95%;`. This effectively squishes Maestro’s metrics down to match Arial’s footprint. When the swap occurs, the text will not reflow. The letterforms will change, their style and feeling will transform, but the layout will hold firm, stable and predictable.

It feels like a small thing, a single line in a stylesheet. But its effect is profound. It moves our craft beyond mere optimization for speed's sake and into the realm of considered, stable user experience. It acknowledges that performance is not just a stopwatch metric of how fast something *appears*, but a holistic measure of how *well* it appears. By battening down the score with `size-adjust`, we ensure our typographic performance is not a jarring cacophony of shifting elements, but a seamless, harmonious composition from the first note to the last.

Notes & further reading

A few pages I came back to while writing this: