In general, if we want to include a number of different fonts faces of the same family on our webpage, we would need to load the same number of font files. The more font files you load, the more weight you add to your page, with an impact on performance — so it’s usually wise to load a maximum of three or four font files (depending on your performance budget).
Variable fonts change all that. They enable us to load a single font file for an entire font family. Although this file will usually be larger than a single font would, if you want to take advantage of different weights and styles, then a variable font is the more performant solution.
Not only that, but with variable fonts, we’re not limited to a small subset of font weights. When working with regular fonts, the available font weights are given in multiples of 100. Typically, 400 might be the regular weight, 300 the light weight, and 700 the bold weight — with different families supplying more weights or fewer. Variable fonts have an axis of variation, which provides us with a range of values for properties like the font weight. A font might have an axis of 1–900, which would provide us with access to 900 different weights!
The axis of variation is not just limited to weight. Variable fonts can have different axes for x-height, slant, serif length and contrast (to pick just a few examples) — meaning that a single font file could give us access to hundreds, or even thousands of variations! We could even animate these properties, enabling us to achieve some really cool effects. Mandy Michael (https://codepen.io/mandymichael) has a whole load of creative demos that really test the limits.
Browser support for variable fonts is pretty good, and many font foundries are actively developing new variable fonts that you can start using now — although these often come at a premium, especially for the more fully-featured font families. If you just want to get started playing around with variable fonts to see what they can do, there are a number of variable font playground sites:
Be aware, if you want to use variable fonts right now you need to make sure you’re using an up-to-date operating system — they won’t work on older OSs.
While we can alter the font weight easily enough with the font-weight CSS property, font-variation-settings is a new property that gives us full access to a font’s different axes of variation. These include both registered axes and custom axes.
There are five different registered axes, which correspond to various CSS properties. Each of these has what’s known as an “axis tag”. The registered axes are: wght (font-weight), wdth (font-stretch), slnt (font-style: oblique/angle), ital (font-style: italic), opsz (font-optical-sizing). We can access these axes either by the CSS property, or with font-variation-settings.
These axes are not necessarily all included in every variable font (some may only have one or two axes), but they are likely to be the most common.
Custom axes are bespoke axes included by the font designer, and could be anything at all. They could include (for example) serif length, x-height, even something more creative (and less typographically typical), like rotation.
Both types of axes must be expressed as a four-character tag. Registered axes must be lowercase, while custom axes are uppercase. Both can be combined in the font-variation-settings property. Font-variation-settings is animatable, which can allow for some very cool UI effects! Some very interesting experiments have been produced using icon fonts too.