Variable fonts have been around for a little while and have been fairly widely supported by browsers for some time. Yet, according to the recent State of CSS 2021, there are many folks who haven’t even heard of the syntax to use them.
With variable fonts, you potentially get a whole font family worth of styles within one handy file. This helps to reduce the number of files needing to be loaded and could improve your sites’ core web vitals.
What on earth are Variable fonts?
In an opening statement from this useful Google fonts knowledgebase article:
Variable fonts—officially known as OpenType Font Variations—remove the explicit distinctions between different weights and styles, which have existed since the early days of typesetting.
What does this mean for webfonts?
Essentially, this means that instead of loading individual files for each weight and axes such as italics, we can load one variable font file. We then use CSS attributes to style the typography based upon the available axes within the variable font. These can range from weight, optical size, slant and width.
An example of weight saving
Let’s say you wanted to use Raleway to style the typography of your whole website. You might need a few different weights to differentiate between a number of headings, body copy, strong text. You may also want to include an italic version for emphasising text within your body copy. It wouldn’t, therefore, be odd to need to load at least three or four font files to accommodate all these styling needs.
Taking Raleway as an example, using two weights and an italic version of the regular weight, you would need to load 3 font files totalling 487kb. This may not seem like a huge amount of weight, but imagine extrapolating this out to websites with many page visits per month, needing to transfer that data on the first visit. That could add up to a great deal of data transfer and energy. So what if we could improve this and at the same time offer more variation?
Raleway has a variable font version, which weighs 310kb. This allows a full spectrum of the weights that Raleway offers and any weight between. You could for instance style the variable Raleway version from 100 to 900, in singular digit increments. So instead of loading two font files and having two weights, we can load one font file and have literally hundreds of possible weight variations.
What about italics?
Unfortunately, Raleway, along with many of the other variable compatible fonts on Google fonts, don’t have italics or slant built into the one variable file. That means you will still need to load a second font file-also weighing around 310kb-to allow italic styles. This does mean you will have a much higher number of Kbs to load, but you would then have a near-infinite number of possible variations.
How to use variable fonts
As the articles on Google’s knowledge cover this quite well, I think it is best to read those, rather than re-write the how-to here. You can read Styling type on the web with variable fonts here.
The possibilities with variable fonts
Not only could using a variable font save page weight and reduce the number of files you need to load, but it can offer up some really interesting and creative uses of typography. Such as animating type without the need for any JavaScript like this example of CodePen.
There are also many more axes and options that could be possible within the font file. For example, you can find variable fonts that change the width of a glyph to create a condensed style. You could change the contrast between fonts with thinner and thicker stokes, meaning you could alter the optical size and style, creating a really big difference between headings and body copy. The options are really varied and expansive, depending on what the font foundry creating the files have added. Even custom variables are available, such as how much a font can look slimy and ‘ooze’ like in this example on CodePen.
Conclusion
There is no doubt that variable fonts can add some very interesting options to styling typography on the web. Plus, depending on your font choice, you could save a reasonable amount of page weight from your website’s initial loading of fonts. Personally, I think variable fonts are a very exciting next chapter for typography on the web and I’m looking forward to seeing how designers and developers use them moving forward.
Not interested in using Variable fonts? No problem! Learn how to load web fonts for the best page load performance in our article here.