When using static font files on your websites, you individually load each font style that you plan to use. This means if the font you’re using has three style variants (e.g. different weights), then you’ll need to load those three font files in order to use them. If you use many font styles, this could have a performance impact.
Work Sans
Light Weight (300)
Work Sans
Medium Weight (500)
Work Sans
Bold Weight (700)
In contrast, when you use variable font files on your websites, you only need to load a single font file, regardless of the number of styles it contains. This means the font you’re using could have anywhere from 3 to 1000 font variants, and you still only need a single font file. This can improve performance in some use cases.
Work Sans
Light, Medium & Bold Weights
(300, 500, 700)
Thin Weight (100)
Light Weight (300)
Regular Weight (500)
Bold Weight (700)
Heavy Weight (900)
1. Weight
2. Width
3. Italic
4. Slant
5. Optical Size
Although the semantics of each registered axis can be more easily understood via many of the other comprehensive guides to variable fonts out there, they’re each pretty straightforward. For example, we’ve already covered font weight.
You also may be familiar with font width if you’ve ever encountered condensed and extended versions of fonts. The italic font variant is ubiquitous, but the slant font variant might be new to you. Slant variants essentially rely on interpolated skewing of around 8º to 12º, as opposed to the italic glyphs that are usually specifically designed by typographers.
CSTM Xprmntl 03
(Cyrillic Variant)
CSTM Xprmntl 03
(Medium Variant)
CSTM Xprmntl 03
(Blackletter Variant)
Beyond the five registered axis variants, variable fonts can also have an unlimited number of other custom axis variants. These custom variants need to be specified by the font author, but the sky’s the limit in terms of what those variants can encompass.
For example, the font above, called CSTM Xprmntl 03, is a work-in-progress font that currently has a single custom axis variant. It’s the result of the CSTM Fonts foundry asking themselves the following question, “What’s happens if we interpolate Blackletter typeface with Old Cyrillic Ustav?” The result is an extremely unique font that displays a lot of breadth despite only having a single axis variant!
There are 5 registered font axes in the OpenType Design-Variation Axis Tag Registry are weight, width, italic, slant, optical size.
The possibilities are infinite when it comes to custom axes in variable fonts. They can even be used to animate icons and imagery!
Beyond passive animations, variable fonts let you add complex forms of interactivity based on both simple and complex forms of input.
Variable fonts can improve website performance while consolidating the number of font files you have to load. This means you get smoother transitions with less loading time!
A great resource for free fonts you can load on your website using Google Fonts' API.
This directory lists both free and paid fonts, and makes it easy to test custom text.
I presented this project on November 14, 2020 as a keynote talk for IndieWebCamp East 2020. This project features three variable typefaces: CSTM Xprmnt l03 a paid font by CSTM Fonts, Space Grotesk a free font by Florian Karsten, and Work Sans a free font by Wei Huang.
Made by Outer Outer Space