Variable Fonts are the next big thing in web typography, especially when you consider that variable fonts are coming from a rare cooperative effort between Microsoft, Apple, Google, and Adobe.
In a nutshell, variable fonts are font files that have settings you can change as you please to either subtly or dramatically modify the font appearance. Through these settings, called axis, you can transform texts fluidly, for instance from bold to light, narrow to wide, or a combination of both. In the past, this was only possible using multiple font files.

In this article, I will bring you up to speed about variable fonts, why the underlying technology is such a big step forward, and everything you need to know to start designing your own variable font and use it in your website.

In this article, I’ll explain to you:

What are fonts?
What are Variable Fonts?
How do variable font work?
What’s the difference between static and variable fonts?
What is an axis?
How do I create a variable font?
What are Color Fonts?
Combining variables and color
Variable color fonts and browsers

What are fonts?

Some refer to fonts and typefaces interchangeably, but a font is a graphical representation of a collection of characters. Each character has its own drawing assigned to it, made out of vectors or pixels. Every character also has a unique code, a Unicode, which tells your computer which letter you type when using the keyboard, or which letter to show on the screen. Not just letters have a Unicode, from spaces to punctuation have dedicated Unicode.

A character in a font does not have to be a letter. It can be anything, from icons to logos and ornamental borders. Characters that use vector drawings as a base are interesting. They can scale indefinitely and are the key to variable font technology.

Lastly, a group of fonts can be bundled into a family, allowing you more options, such as using italic or bold versions of the character set. This is also the biggest difference between a ‘normal’ font and a variable font.

What are Variable Fonts?

A variable font is a special type of font that contains multiple variations within it. Through desktop applications such as Figma, Sketch, or the Adobe Creative Cloud, you can change the appearance as you please. You can also control the variations through CSS, allowing websites to have fluid typography.
For example, if you wanted to use a light, regular and bold version of a font, you would have to use three different font files. With a variable font that has a weight axis, you can adjust the weight by changing the CSS to get the light, regular and bold all from the same file. Now you have the same looks, but with a third of the load time for your font files.

Variable fonts do not only have an axis for weight, italic, and width, settings that you already are familiar with, they can have any axis the (font) designer can think of.

How do Variable Fonts work?

Variable fonts transform using a method called interpolation this allows the letter to transform fluidly between two or more existing drawings. For this, both drawings have to consist of exactly the same amount of points and handles, as you can not interpolate into the void!
Normally, the designer chooses a certain weight or position to interpolate into a final (static) design, but with variable fonts, this interpolation becomes fluid, which the user can adjust using CSS or the variable-font supporting application of their choice.

What’s the difference between static and Variable Fonts?

Static fonts are fixed to one specific style within their ‘font family’, such as ‘bold’ or ‘italic’, and their appearance cannot be changed. Variable fonts can move fluidly between styles, transforming from ‘bold’ into ‘bold-italic’ or something in-between, offering a much wider range of styles.

Variable fonts have a smaller download size compared to many static fonts
Variable fonts consist of just one font file, containing all font family styles
Variable fonts allow for typographic forms of interactivity
Last but not least, with variable fonts, you can animate.

What is a Variable Font Axis?

An axis is an expression of a single aspect of a typeface’s design. For example, ‘width’ determines how narrow or wide a character can be. ‘Weight’ describes how light or bold it is.

How do you create a Variable Font?

Variable fonts or variable illustrations are created in the same way as any other vector-based drawing. For every variation, you create a new master and use the same amount of vector points. Applications you can use to create and export variable fonts are Glyphs 3, and Fontlab.
For basic shapes, you can use a vector graphics editor such as Adobe Illustrator, Figma, Sketch, CorelDRAW, or Affinity Designer

What are Color Fonts?

Color fonts are like normal fonts but contain extra color information, which can be done using multiple methods. We have bitmaps (which have colored pixel pictures in each character slot), SVG color fonts, (with SVG vector pictures in each character slot), and lastly, the COLR color fonts.

Each of these fonts work differently depending on the operating system or browser, but it’s the COLR fonts that allow you to create a variable color font.

The construction of a COLR character differs from a non-color font and is built using layers, each with a specific color assigned to it. These colors are imported through an external palette (called CPAL), which works in tandem with the variable font interpolations. The colors in this palette can contain RGB values you would like and have an optional alpha channel, allowing transparent colors.

Combining Variables and Color

With your variable font enriched with a CPAL palette, and constructed out of color layers, you can assign your variables to an axis (such as width, weight, or your own invention). You can add a value to these axes, allowing you to have control over each transformation, up to the decimal.
Now you just have to export it! This is a breeze in Glyphs 3, which can export a variable font directly as a WOFF2 file.

Users of Glyphs 2 will need a workaround and use one of the many online converters to transform their desktop export (a .ttf file) into WOFF2.

Variable Color Fonts and the Browser

Variable color fonts are supported in the latest versions of all major browsers, but there are differences in rendering quality and performance. When using your own variable color fonts, some browsers, such as Chrome, require extra specifics, such as style settings, in the CSS.

While color fonts and variable fonts are supported by programs such as Adobe Illustrator, Adobe Photoshop (CC 2108 or later), InDesign (CC 2020 or later), or Figma, variable color fonts are not. These programs will only show a placeholder character when loaded, and although this character will be variable, the color table will be inactive.

Conclusion

Variable fonts have a big impact on how typography is handled on the web. Variable fonts give more designers more design freedom than ever before. Simultaneously variable font files reduce the font load time down to a half, a third, or a quarter.
Although the technical development goes rapid and a large community of designers is setting new boundaries every day, the surface of what’s possible with variable fonts hasn’t been scraped yet.

Variable Fonts & You

If variable fonts or color fonts piques your interest, our variable font course guides you through every step of creating your own variable font and implementing it in your next project. So start today!

Sources:
This article is based upon Typearture’s How do they work guide and articles by Figma’s Any way you font it and Dinamo’s Using variable fonts on the web.