Variable Fonts

Today I would like to talk about variable fonts on the web. But what are those?

Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They let you access all the variations contained in a given font file via CSS and a single @font-face reference.
-- MDN

Status quo BEFORE variable fonts

Let us first recap on how we brought in variation into web fonts since the start of custom web fonts:

Okay, yes. So for different variations we had to load a number of different font files, each of them for a specific font type bringing in different variations of the typeface.

So how do the variable fonts solve this problem of requesting a bunch of files over the network?

Technical background

Design axes

Variable fonts define axes of design, thus dimensions of variations the typeface has like its weight.

Before this was done by redrawing each single glyph for each, different characteristic of the variations.

Now – with variable fonts – each glyph defines a delta inside which each of the glyph's control points can vary. Any variation within this delta can be interpolated then and thus instead of saving a lot of variations of the glyphs, what is saved and shipped through the font file is this delta.

And with this we have the full power to create our own, custom variations within the whole delta range instead of just using the fixed variations given by the different font files before.

For a more detailed introduction I would like to highly recommend you Chris Lilley, technical director at the W3C, and especially his talk on "WebFonts in 2018: Everything Changes".

(starting at 6:50)

At Axis Praxis you can try it out your own changing the font variations. I can recommend for all of you which are not familiar to variable fonts to play around with the range sliders on their side to see how the font and the website changes.

Control design axes by font-variation-settings

The described design axes are controlled by the font-variation-settings which are described as a list of key/value pairs.

It is build up by four letter axis names followed by their respective value, e.g.

html {
    font-family: "etc-grandstander", sans-serif;
    font-variation-settings: "wght" 600, "slnt" 0;
}

Browser support

Although variable fonts are quite a new thing, the browser support is ~80% of all global users according to caniuse.com. Internet Explorer is not supporting variable fonts though!

If you are interested in using variable fonts on your page, I can recommend you a good article from Clearleft which is also pointing out fallback solutions.

Variable fonts in the wild!

Back in December I bought ETC Grandstander from the great ETC team which are selling also a few other, nice variable fonts.

You can find a list of available variable fonts at v-fonts.com.

Over there at CSS Tricks you can read all the weird things you can do with variable fonts. And they have a growing guide collection about that topic. Take a look!

Developer tools

I can highly recommend the font inspection in the Firefox Developer tools.

They provide the whole list on information including the design axes with a range slider you can modify on the fly at the page.

Take a look 🎉

As you might have seen already, I'm actually using my bought font on my blog for the headings of my posts.

Take a look with the mentioned Firefox Devtools! 🤣

Cheers,

Andi