Variable fonts (an evolution of the long-used OpenType font) are fonts that instead of having multiple font files to load different variants of a particular font, they allow you to load all the variations from a single, highly efficient file. This is opening new possibilities in special effects, website design, and general digital efficiency. In most cases this is a big performance win (although the file tends to be larger than a regular font file on its own, so it is best to only use a variable font if you need it).
Variable fonts come with different weights, axis, widths, italic, slant, optical size, and grade. Variable fonts provide a range of values, and the weight can be varied anywhere within that range. Axes can be accessed using the font-variation-settings property. This property enables us to not only adjust the standard axis, but custom axes as well. The designer can decide which axes to include and define minimum and maximum values. On the web, that means you can load a single file and use a system to set any axis, anywhere along the allowable range, without any artificial distortion by the browser. Some fonts might only have one axis (weight being the most common), and some may have more. A few are defined as ‘registered’ axis, which is the most common, but the format is extensible expressly so that designers can define their own custom axis and allow any sort of variation they want to create.
The benefits of variable fonts are extensive. From a performance standpoint, while variable fonts may be larger than single-instance font files, they are still far smaller than the sum total of static files they replace—and often come in smaller than 3-4 single fonts, meaning that page loading times can substantially improve. Once you have variable fonts on your site(s), you are free to get infinitely more expressive. And with the sophistication of our design systems, building some of that flexibility into our design/development process should not be far behind. Variable fonts also offer copious amounts of creative opportunities, from animation to customisation.
