Deep Dive on Variable Fonts

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

• Reduced number of HTTP requests because we're requesting less files
• Although they are larger than individual font files they end up being smaller when compared to the invidual fonts for the styles we want
• We have access to larger typographical palettes
• They include multiple pre-defined combinations of axes that give a given named font styles so you don't have to reinvent the wheel every time
• It gives you access to Open Type features that further enhance the look of your text
• It teaches you about the font, how it works and what enhancements it has that you may or may not be aware of

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:

• font-variation-settings is not the best way to do this, it is the way that's working now
• In the future we'll be able to use the Font Variation Properties defined in the CSS Fonts Module Level 4 but, unfortunately, it's not widely supported yet
• Every time that you update an individual setting, you must updated all the settings, even if they haven't changed

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:

• Ligatures
• Small Caps
• Different swashes and alternate displays

How do we use them?