One variable font to rule them!

It's easier to explain how variable fonts work by showing them in action, instead of trying to describe the effect. Take a look at the demo below, play around with the sliders and see what happens.

OpenType font axes

OpenType fonts can be given different axes since version 1.8 of the OpenType format. The value that's given to the variable connected to one of these axes will then determine how the characters look. In our demo, the sliders determine the values of the different axes that have been set up in thfont we use. As you can see in the first example, the possibilities for font designers are basically endless. The different options that come with the font Nobotoflex can change things that are quite specific, like the distance between the dots of i's and j's and the rest of the character. The designer of the font has coupled that axis to the variable DIAC. This value can then be set by doing the following:

.font1 {
  font-variation-settings: "DIAC" 50;
} 

Changing the value of a second axis, or a third, or a fourth etc. can be done by adding a comma, like this:

 font-variation-settings:  "DIAC" 50, "DESC" 825 

Setting correct axis values

Technically using the font is the easiest part, as most work has already been done by the font designers. All you have to do is look up what axes the font posseses, and to what values these axes respond. This last bit is quite important, as every variable has a different range of values to which it reacts.

In our emoji example, the variables changed by the first four sliders respond to values between 0 and 1 whereas the last two sliders respond to a value between -1 and 1. These values are completely dependent on how the font designer designed the axes.

In practice

Variable fonts are not only very nifty things, but they have also quite a bit of real world impact. You can now basically create multiple different fonts without having to load them all as separate faces. Just configure different values and you're good to go! With fonts being one of the heavier assets (especially if you have a lot of variations) this will most definitely positively impact performance.

Browser compatibility

As noted in the intro earlier, support has grown quite a bit over the last few months. Mobile is still behind a little bit and it's still in development for Edge, but that's pretty good considering that it's only been a year since it's implementation in OpenType fonts.

• chrome
• firefox flag
• android chrome
• safari MacOS 10.12
• ios safari iOS 11.2

More detailed information on caniuse.com

I want more!

• 'font-variation-settings' spec for CSS fonts level 4
• Smashing magazine article about variable fonts by François Poizat
• AxisPraxis, a variable fonts playground created by Laurence Penney

The fonts used

• NobotoFlex
• Zycon by David Berlow