The relative font weight axis — how variable fonts ease font weight transitions

I'm not a font person. I have neither the skills nor the patience to get into font fiddling. But I do notice and appreciate a site with beautiful font combinations.

Web fonts also come with challenges, such as layout shifts and the typical performance hit to load and display them.

That's why this blog uses the most boring (but fastest) fonts possible.

html {
  /* Use whatever is available */
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

This font-family declaration tells the browser to use whatever font is available on a system so that it doesn't have to download anything and can display text immediately.

But that's just my tiny blog, if you're building something polished and designed, it has been common that you had to download multiple font files — one font for bold, one for italic, one for bold-italic, and so on.

But it's 2023 and variable fonts solve the multiple-download problem.

Today I learned about relative font weights, solving a problem I've had for almost a decade. Let's have a look!

Variable fonts are configurable and the font-variation-settings CSS property give you font styling super powers.

MDN Compat Data (source)

Browser support info for font-varation-settings

62	62	17	62	62	11	11	8.0	62

Variable fonts provide parameters (called axes) to tweak their rendering. Instead of downloading multiple font files for bold and italic, you download one variable font with unlimited font rendering options.

font-variation-settings: "wdth" 57, "wght" 200, "slnt" -10, "opsz" 30, "ital" 1;

The CSS Fonts Module Level 4 spec defines five registered axes matching common font requirements.

Interestingly enough, the spec recommends not to use these font variations. 😅

That's fair (I guess) because there are matching CSS properties for these axes.

But things get exciting when we look at unusual font variations.

In addition to the registered axes, font creators can define custom variable font axes. But how do you know what axes are defined for a variable font?

To inspect a font and discover all the visual options, Wakamai Fondue is an exceptional tool. You can drop in a font and start playing with it. Here's the Roboto variable font if you want to try it.

Look at this! There are 13(!) properties to tweak Roboto. 🤯

.preview {
  font-family: Shantell;
  font-variation-settings: "ital" 0.5,"INFM" 50,"BNCE" 20,"SPAC" 10;
}

But coming back to Roboto; you probably didn't notice it, but there's one custom axis in there that you might wanted to use since forever!

You've probably encountered the following problem before: you want to change a link's font-weight on hover, and whoops... changing its font weight will also change every character's horizontal size. Bummer.

What if there were a way to make the text bolder without changing its horizontal size?

The custom GRAD axis is doing exactly this.

Let's see it in action.

p {
  font-family: Roboto;
  font-variation-settings: 'GRAD' 0;
}

Disclaimer: while testing things across browsers, I discovered that desktop Safari renders Roboto and the GRAD axis so subtle that it's barely noticeable. iOS Safari seemed to work fine, though.

Now, who would have thought that custom variable font axes can ease font weight transitions?

But so cool that is — for me right now: loading an article on this blog without images usually needs less than 250KB (that's everything: HTML, CSS, JS). The Roboto variable font weighs 700KB alone. 😢 I guess, I'll pass on loading it for now.

Update: I was able to reduce Roboto's size to 58KB using font subsetting.

Nevertheless, I'm very into transitioning font weights without causing layout shifts. If you're using variable fonts, it's worth checking if it supports GRAD to add some nice hover effects!