Variable fonts, finally

Variable fonts shipped in 2016. I did not start using them seriously until 2023. This is a short post about why.

The technology was always reasonable. A single font file that can move along axes, weight, optical size, slant, and sometimes more, lets you pick exact values rather than the four or five static cuts the foundry happened to ship. In theory, it solves a real problem. You stop choosing between Light and Regular and get every weight in between, at any size, from one file.

In practice, for a long time, the catalogue of variable fonts I actually wanted to use was thin. Inter was there from early on. Recursive by Stephen Nixon arrived in 2020. Fraunces by Undercase Type came along not long after. But many of the typefaces I reach for, particularly serifs from smaller foundries, were still shipping as static families. The variable version was either not made or was bundled with a licence I could not justify for a small client.

Photo: Mika Baumeister on Unsplash.

The catalogue has finally caught up. Klim Type Foundry’s Söhne is now available as a variable. Pangram Pangram have variable releases on most new families. The Variable Fonts gallery at v-fonts.com is no longer the sparse field it was three years ago.

What has changed in the work itself: I now define type styles by axes rather than by named weights. A heading is “Fraunces, 9pt optical, 460 weight, 0 slant” rather than “Fraunces Medium”. The CSS expresses the same thing, with font-variation-settings: "opsz" 9, "wght" 460. The result is that styles are tunable rather than bracketed. If a heading needs to be a hair lighter on a particular page, I can move it without picking a different file.

The other change is that smaller clients can now afford typography that looks considered. A single variable font is one purchase. Picking three weights and five sizes from a static family is six or seven purchases, and the maths used to push small studios toward Google Fonts even when they wanted something else. That pressure has eased.

Things variable fonts do not solve: bad pairings. They do not rescue a design that is using the wrong typeface for the job. They are a better implementation of typography, not a different idea of it.

But when the implementation is better, the design tends to follow. I am paying more attention to the relationship between size and weight, because I can now adjust them in the smallest increments. I am writing CSS that thinks about optical size as a first-class consideration, because the file makes that easy. The technology has, finally, started to influence what I make.