---

Variable fonts are OpenType fonts which give font users control over certain design features like weight, width, slant and so on. So for example, instead of having to choose a font style like regular (“400”) or bold (“700”), any weight can be selected using a slider or by setting a specific weight value. 500, 600, 431, 654 … It’s up to the designer using the font. 

To achieve all this, automatic mathematical interpolation is being used. The type designer needs to create at least two compatible designs and many steps (called “instances”) in between those designs are then generated on the fly. 

This technology already existed in the 1990s. Apple had it as part of their TrueType GX system. Adobe had a similar technology for PostScript fonts called Multiple Master. But both technologies didn’t really catch on. Type designers continued to use it to create larger font families, but what they would ship to the users were selected, individual fonts representing independent styles. 

Third time’s the charm

So what changed? Why was there another attempt in the 21st century? 

First of all, unlike the font interpolation techniques of the 1990s, variable fonts were a joint effort of the major tech companies in the field. Apple, Microsoft, Google and Adobe developed variable fonts together and the technology was also added to the OpenType specifications. This almost guarantees a broad software support. 

Second, a new font use developed over time that didn’t exist in this way in the 1990s: webfonts. When fonts are embedded in websites, every kilobyte counts. Loading various independent fonts of a font family can significantly increase the loading time and variable fonts can mitigate this problem. Now only one font needs to be loaded and every instance is being generated on the fly. In addition, the font can even dynamically respond to certain parameters on the client’s device. This allows for creative and experimental uses, but can also address typical problems like the many different screen aspect ratios people use to access web content. With a variable font, a wide screen could show a wide font for all headlines and the smaller the screen gets, the more narrow the font becomes—all without needing to load multiple fonts. 

Variable font demo from Mandy Michael

Design axes

The design variations of a variable font are calculated and accessed along one axis or several axes. A variable font needs to have at least one axis to be variable font. Five typical axes are included in the current OpenType specifications:

• Weight
• Width
• Optical size
• Italic
• Slant

A typical variable font with an axis for weight and one for width

 

But in addition to the standardized axes with an expected behavior, type designers can also choose to add any number of custom axes to their fonts. And their functionality is completely up to the type designer. This gives type designers a lot of creative freedom and many playful and experimental variable fonts have already been created since the introduction of variable fonts. 

The axes of a variable font don’t need to affect every character and the design changes along an axis can be seamless or sudden. For example: One axis might seamlessly change the height of the crossbar in just a few uppercase letters which have a crossbar. Or one axis might switch a few letter designs from an upright design to a cursive design. 

Variabler Font Format Shards

 

How do variable fonts work?

While interpolating vector shapes is simple and straightforward, the technical implementation of variable fonts is rather sophisticated. 

Each glyph in a variable font is technically only stored once, just like in a conventional font. The other glyph designs used for interpolation are stored as mathematical variation of the base glyph. Type designers can also choose to add intermediate steps along the design axes. This avoids a typical problem of font interpolation: If only the masters (like light and black) are used for interpolation, the frequently used instances in the middle (like regular) cannot be controlled directly by the type designer. But variable fonts do not have this problem. 

The font Inter has a weight axis between light and black, but a regular style controlled by the type designer is added in the middle of the weight axis. 

 

Variable fonts also contain named instances. This means font users can easily access specific points along the design axes chosen by the type designer. So a variable font can still show “bold condensed” and other style options like a conventional font family. The many steps along the design axes can be used, but it is by no means required. The named instances avoid that font users are overwhelmed by the many choices. You don’t have to decide what the regular style it. The type designer will still make that choice for you. 

Variable fonts appear like conventional font families in InDesign. Only the O-VAR logo in the font menu points to the additional options of a variable font.

 

While the PostScript fonts of the 1980s and 1990s were rather simple, OpenType already allows for lots of dynamic changes of outlines and metrics. When font instances are calculated on the fly, those changes need to be taken into account as well. So kerning values for example also need to be interpolated. Where required visually, variable fonts can also activate and deactivate ligatures at certain point along a design axis. The complexity of all those calculations does make the implementation of the variable font technology quite challenging. 

Software support of variable fonts

Variable fonts are already supported in all major browsers (Chrome, Safari, Firefox, Edge, Opera) when used on recent operating systems. So there is hardly any reason not to use them for websites if you can make good use of the new format. You can even add a conventional font as fallback solution. 

More and more desktop design applications also gained support of variable fonts:

• Adobe Photoshop und Illustrator (since CC 2018), InDesign (since CC 2020)
• CorelDRAW supports variable fonts since its 2020 release
• Sketch supports variable fonts since version 59

In Photoshop, variable fonts are somewhat hidden. You need to open the properties panel to find the sliders. 

 

Office apps and apps from other fields (like video editing) currently don’t have much support of variable fonts yet. 

How to find and install variable fonts

Licensing and installation don’t differ much from regular fonts. After all, variable fonts are regular fonts—just with added functionality. For most commercial fonts, conventional and variable fonts are offered next to each other or bundled together. This will still be required for a while, since variable fonts are not backward compatible. To make use of the range of style options in a variable font, the operating systems and apps need to fully support the new format. 

It’s also useful to mention that you are usually buying the entire family with a single variable font. You can’t save money by just picking a few styles from a larger family, since all styles are usually included in a single variable font. 

With the keyword “variable” you can easily find variable fonts at resellers like MyFonts and Fontspring. 

• MyFonts: https://www.myfonts.com/search/variable/
• Fontspring: https://www.fontspring.com/tag/variable

The Google font directly has a filter to only show variable fonts:

• https://fonts.google.com/?vfonly

Adding variable fonts to your website is as simple as with conventional fonts, with the added benefit of being able to generate any number of instances without increasing the loading time. For code examples, open the next lesson of this course. 

To play around with the many options of variable fonts, check out websites such as Axis Praxis and V-Fonts.com. They present a selection of variable fonts with sliders to test out the on-the-fly instance generation.