Variable Fonts on the Web, Explained
Variable fonts are, in a nutshell, font files which have settings you can change to subtly, or dramatically modify the font’s appearance. They’re set to make a big difference to type on the web—let’s take a closer look!
Watch the Explainer Video
Variable Fonts for Web Designers
Through variable font settings (which are called axes) you can take a single font file and create the kind of variations you could previously only get through using multiple font files.
For example, with a regular font family, if you wanted a light, normal, and bold weight version, you would have to load in three different font files.
However, with a variable font which as a weight axis you can adjust the weight via CSS to get the light, normal, and bold looks from a single file:
.light {
font-variation-settings: "wght" 66;
}
.regular {
font-variation-settings: "wght" 84;
}
.bold {
font-variation-settings: "wght" 154;
} With this approach you get the same typographic appearance, but with vastly improved load times. Where you would previously have had to minimize the number of variants you load into a web page, with variable fonts that is no longer an issue, you have vast numbers of variants at your finger tips:
Style Variability
As far as style variability goes, it doesn’t just stop there. You aren’t restricted to just the kinds of variations you’d be used to, like normal weight, or italic.
Firstly, any axis can have its value set anywhere along a sliding range, not just at set values. So if you were looking for a weight somewhere between normal and bold, that’s perfectly possible. Or if you wanted your italics to lean just a little bit less, or you wanted character widths to be slightly more than standard, the power is in your hands. Fine tune your settings to exactly what you need.
Secondly, fonts can use any axes the designer cares to think of! Take a look at the settings available for Bitcount:
Depending on the font, you’ll find axes which give you control over drop-shadows, or stencil gaps, or character terminals, the options are limitless.
Winds of Change
Variable fonts look to make a big impact on how we work as web designers. They will allow us to achieve much greater diversity and control, whilst simultaneously reducing our load speeds. They will also allow us to branch out in our typographic creativity in ways which were technically impossible before.
To get you started with variable fonts we’ve put together a course that guides you through all the most important facets of how they work, gets you set up with the tools that you’re going to need, walks you through coding the CSS that controls variable fonts, and shows you how to create fallbacks for browsers which don’t yet have support.
