Deep Dive on Variable Fonts

There are several things that attracted me to Variable Fonts. Some of these things are:

I want to explore some of the features of OpenType and Variable Fonts as we discuss some of their benefits and their potential drawbacks

The font that I will use in this essay is Roboto Variable font, a project from Type Network, with Google's blessing to create a variable font for their default. Roboto is the font used for Material Design and many other Google properties and projects.

I will also use the CSS generated when you run your font through Wakamai Fondue, a service that will let you see what your font can do in terms of OpenType features and what azes the Variable Font makes available to you.

For me it's the font to go to until they make the Noto super family a variable font as well.

Note that this is an explanation and an exploration of variable fonts. Some of the choices may not look good but they illustrate some aspects of variable fonts.

So what's a variable font?

An OpenType variable font is one in which the equivalent of multiple individual fonts can be compactly packaged within a single font file. This is done by defining variations within the font, which constitute a single- or multi-axis design space within which many font instances can be interpolated. A variable font is a single font file that behaves like multiple fonts.

John Hudson

For the non-technical designer, a variable font allows you to use a single font file to represent different styles that go between the extremes of a font like thino to wide, regular to bold or regular to italics. The font has a single set of outlines and the variations are represented as deltas to the single outline stored in the font file.

For example, using the same font and CSS font-variation-settings to generate different styles for our font.

.regular {
  font-variation-settings: 'wght' 400, 'slnt' 0, 'wdth' 100;

.italic {
  font-variation-settings: 'wght' 400, 'slnt' -12, 'wdth' 100;

It is important to note two things:

What are OpenType features

Most OpenType fonts have features that make the font easier to work with beyond what we can do with CSS alone. Some of these features include:

How do we use them?