The Tailor's First Un-basted Seam: On the Precise Drape of a Perfectly Sized Typeface

In the quiet, lamplit workshop of a master tailor, there is a moment before the final stitch. A suit jacket, meticulously cut from the finest wool, is held together not by permanent thread, but by long, loose basting stitches. This temporary seam allows the garment to be tried on, to see how the fabric falls and moves with the body. The tailor assesses the drape, the pull across the shoulders, the break at the cuff. Only when the fit is judged to be perfect are the basting threads pulled away to make room for the precise, final work. This practice, a cornerstone of bespoke craftsmanship, holds a profound and often overlooked lesson for those of us stitching together experiences on the web.

We, too, work with a material that has a drape: type. A block of text is not an inert, rectangular object. It is a fabric woven from letterforms, and its appearance is entirely dependent on the font file we load. For years, the web’s default state was the unstyled, system font—our metaphorical basting stitch. It was a functional placeholder, but it told us nothing about how our chosen typeface would truly behave. We would apply our ‘final stitches’—specifying our web font—and hope for the best, often resulting in a jarring flash of unstyled text (FOUT) or, worse, a hidden flash until the font loaded (FOIT), leaving the user staring at a blank space where content should be.

The Measure of the Client

A tailor takes the client’s measurements not once, but throughout the process, understanding that the form is dynamic. Similarly, modern CSS gives us the tools to measure our ‘client’—the user’s context—and describe our fonts with a new precision. The `font-display: swap` directive is our permission to use a basting stitch; it immediately renders text in a system font and then swaps in the web font once it loads. This avoids the FOIT and provides content immediately, but it can still cause a jarring, layout-shifting ‘re-drape’ of the text as one font is replaced by another.

The true craftsmanship lies in going further, in taking the measurements that allow for a perfect fit from the very first moment. This is where the `size-adjust` descriptor in the `@font-face` rule becomes our most precise tool. Much like a tailor creating a pattern based on a client’s unique proportions, `size-adjust` allows us to optically scale a fallback font to more closely match the metrics of our primary web font. We can pre-emptively correct for the differences in x-height, width, and overall scale between, say, Fira Go and the system’s Arial.

By meticulously defining our fallback with `@font-face` and using `size-adjust`, `ascent-override`, and `descent-override`, we are effectively creating a bespoke basting stitch—a placeholder that already knows the exact measurements of the final garment. When the page loads, the text appears in a fallback font that is no longer a generic stand-in, but a tailored proxy. The layout is stable. The spacing is correct. Then, when the web font finally swaps in, the change is seamless. There is no jump, no reflow. The final stitches are applied without a single pull or pucker in the layout. The drape, from first moment to last, is perfect.

Notes & further reading

A few pages I came back to while writing this: