Background reading:
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. It’s no exaggeration to say that this represents a huge leap forward in font technology in recent years.
With variable fonts, the choice of exactly how heavy or slanted or wide (or any other parameter) type should be is placed into the hands of the user, rather than having those decided for us by the type designer. Traditionally, all possible weights and styles have been separated out into different font files, whereas variable fonts combine all of those variations into one. Because of this, overall file size is greatly reduced compared to loading multiple individual font files—and that’s a key consideration for web typography.
(Did you know you can browse for just variable fonts using the “Show only variable fonts” checkbox on Google Fonts?)
The simplest way to think of variable fonts is to imagine a slider (actually called an axis), with the lightest weight (usually called something like Thin or ExtraLight) at one end, regular in the middle, and the heaviest weight (usually called something like ExtraBold or Black) at the other. Where traditionally we’ve had to choose weights from specific points on that scale—determined by the type designer during font production—we can now choose any point on the scale. Rather than decide between using a bold font at the value of 700 (which might not feel heavy enough), or an extra bold font at the value of 800 (which might feel too heavy), we can now choose somewhere in the middle, such as 742 – just right!
However, the real power of variable fonts is that you can have any axis for any variable the type designer chooses, and combine them. Slant? Yes. Width? Yes. Optical size? Yes. Temperature?!? Yes! And all of the above, used in concert.
By the way, it’s important to note that familiar style names—light, regular, bold, etc. for weight, or condensed, normal, wide etc. for width—still appear in font menus when variable font families are installed. They’re referred to technically as “named instances.” So, using variable fonts doesn’t mean waving goodbye to the labels and conveniently-shared styles that we’ve been used to.
The best way to understand variable fonts is to start playing with them—and in a way that doesn’t require you to install any font files or write any code. So we’ve put together a few recommendations on what to try, and the results to look out for.
Go to etceteratype.co/epilogue and play with the weight axis of Epilogue to see how it affects the overall spacing of the type:
Now go to etceteratype.co/grandstander and compare that with Grandstander, which was designed to take up the same amount of horizontal space regardless of changes made to the weight axis. This shows how what happens within an axis of variation is determined by the typeface designer.
Go to etceteratype.co/anybody and play with the weight and width axes on Anybody, to see how they can be combined, and how they affect each other in a subtle way:
Go to etceteratype.co/imbue and play with the optical size axis of Imbue to see how the contrast, spacing and other details change to optimize the design for different sizes:
Go to fonts.google.com/specimen/EB+Garamond and play with the italic axis of EB Garamond to see how the design “snaps” between roman and italic styles, with no intermediate values:
Go to recursive.design and play with the Casual axis of Recursive to see how the outlines become more curvy and playful. Note that this is an example of a custom axis.
For more chances to play around with variable fonts directly in your browser, consider visiting these websites:
* Content is owned by Google. Thank you to