Variable fonts are fonts that bring an entire family of styles together in a single file, arranged along axes: weight, width, slant, optical size or custom axes devised by the designer. Introduced in 2016 by Adobe, Apple, Google and Microsoft, the technology makes it possible to choose any intermediate value while keeping files lighter.
Where to see it
Variable fonts are controlled with sliders in design software and on platforms such as Google Fonts, where weight or width can be dragged in real time. Roboto Flex and Apple's SF Pro are examples, and on the web their axes are set with the CSS font-variation-settings property.
Why this detail matters
Variable fonts change the way a type family is designed and used:
- A single file replaces dozens of styles, which greatly lightens the loading of a font on a website;
- They allow very fine adjustment, down to the exact value, to fit the weight or width precisely to a headline, a screen or a use;
- Their axes can be animated in real time, opening up new possibilities for motion design and interfaces.
Related term
OpenType is the font format variable fonts are built on; they are an extension of it.