Variable fonts: what they are and how to use them

Variable fonts offer unique opportunities for the world of web design thanks to special features that are not found in normal fonts.

What are variable fonts?

The variable font is a special technology that allows you to store all the graphic variants of a font in a single file. These variants can also include borders, shadow effects and glare. It is an extension of the OpenType specification and was introduced in version 1.8 at the end of 2016 1.

Working with traditional fonts

When we start working on a new web project we are used to adding a set of fonts to our page. This set, in most cases, includes regular, Italic and bold; sometimes also light and semi-bold. We add them by inserting a link to a font archive in the header, or we import them into our style sheet using the @font-face rule provided by CSS.

Let's start with this example:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&display=swap" rel="stylesheet">

Thanks to this link we are adding to our website the Open Sans font in its light, regular, regular italic, semi-bold, and bold variants.

We had a first problem: the character set is not complete; in fact the light italic, the semi-bold italic, and the bold italic are missing, which could be useful, albeit in a very limited way.

Google fonts reports a second not negligible problem: the loading times are moderate; this means that the rendering of the page may not be very fast.

Analysing the Open Sans font package, we notice that adding the five characters, in WOFF format, means to attach 300 Kb of data to our website. They are not few; and they are many considering that the set is not complete.

The advantages of the new format

Variable fonts solve exactly the two problems highlighted in the previous paragraph: they allow us to add a complete set and drastically reduce loading times.

To better understand the qualities of the new format, I chose to take as an example the Source Sans Pro font from Adobe, released under Open Font (OFL) licence. The font can be downloaded from GitHub at https://github.com/adobe-fonts/source-sans-pro. The complete package includes the entire font family, divided into separate files one for each style, or in the modern variable format.

If we wanted to use this font with the old method and in the WOFF format (which is widely supported and provides better compression), we would have to overload the page with several files. The user's browser will then find itself having to download several files, with an obvious problem of page speed. The entire font family includes 12 variants and weighs a good 1.6 Mb. On the SEO side the site would receive a bad score.

What if we use Source Sans Pro in the new format? Using the variable font, we should embed, with the example font, only two files (one for the Roman style and the other for the Italic style). The total weight will only be 292 Kb, with an incredible gain of 82%.

So far I've dwelt a lot on the total weight of a font: as a front-end web developer I pay a lot of attention to the technical SEO of a page.

But variable fonts also have other very important design advantages.
The character weight, defined in CSS by the font-weight, is not limited to round figures such as 400, 600 or 700. We can also use all intermediate values, such as 101, 423, 608, 751, 888.
In addition to the weight, the character width and inclination can also be adjusted.
In some cases you can go much further, because you can also adjust the profile, the shadow, the glow and the bevel of the corners, but these features are only available with the variable fonts provided. In other words, there are hardly any limits anymore.

In CSS, the extra values on which you can intervene are defined by the font-variation-settings property.

Here is an example with the fs-kitty font (available under licence at https://www.variable-fonts.com/fonts/fs-kitty):

.text {
    font-size: 82px;
    font-variation-settings: "SHDW" 370, "OUTL" 931;
}

The instructions given above are about the size, through the font-size we already know very well, and about the specific font variations defined during its creation and modifiable in CSS through the font-variation-settings.

The disadvantages

The disadvantages relate to low availability and high costs.
Free variable fonts are very few, have few options and are visually unattractive. Among the paid fonts, availability and quality are higher. The costs of purchasing a licence, however, suggest the idea of using variable fonts only on projects with an attractive budget.

How do you implement them?

When creating a web project, the font family is used both during the graphic design and the development process. How to implement variable fonts in these two cases? In very few words: the same way as traditional fonts, but with a small difference when customizing text during the design process.

Guide for designer

First, after choosing the variable font to use, we download it (in the resources section I've added a list of links where you can download or buy them) and install it in our system.

Installation on macOS

To install variable fonts on macOS, just open the .ttf file and install it in the Font Book. The addition is immediate, and we can then close the application.

Installation on Windows 10

To install variable fonts on Windows 10, simply double-click on the font to install. The font viewer will automatically open and then Install.

Use on Sketch

Sketch has introduced the use of variable fonts since version 59. The use is very simple. We add our text to the graphic layout and choose the font to use, in our first example the Source Sans Variable.

Sketch for the font installed as an example gives us the possibility to customize the weight, with values ranging from 200 to 900, even in decimals. For other fonts, other options may also be available.

Use on Figma

Currently, Figma, a rapidly growing design tool available in browser and app versions, does not allow the use of variable fonts.

Use on Adobe PhotoShop and Creative Cloud

On PhotoShop, as in Sketch, using a variable font is simple. Add a text layer and choose the font you want. In PhotoShop, variable fonts are marked with the VAR symbol.

In the Properties panel we can change their weight (thickness). For other fonts, you may also be able to change the other options.

The new font format can also be used on the latest versions of Illustrator and InDesign.

Use on Affinity Designer

The Affinity team has not yet added support for variable fonts. They can be used but without the qualities that distinguish them. I will update this tutorial as soon as there are positive news about them.

Guide for front-end developer

Inclusion in the project

The implementation of this type of font is the same as a traditional font, with a few more instructions to add and you only work with style sheets.

In CSS you import the font through the @font-face:

@font-face {
    font-family: 'Source Sans Variable';
    font-weight: 200 900;
    font-style: normal;
    font-stretch: normal;
    src: url('../fonts/SourceSansVariable/WOFF2/SourceSansVariable-Roman.ttf.woff2') format('woff2'),
           url('../fonts/SourceSansVariable/WOFF/SourceSansVariable-Roman.ttf.woff') format('woff'),
           url('../fonts/SourceSansVariable/VAR/SourceSansVariable-Roman.ttf') format('truetype');
}

 body { font-family: 'Source Sans Variable'; }

And you simply apply the desired values:

h1 { font-size: 3em; font-weight: 876; }
p { font-size: 1em; font-weight: 410; }

In HTML, you don't have to do anything.

Google V-Fonts

If we choose to use the Google Fonts service instead, we have two choices.

First, open the page https://fonts.google.com/ and add a check mark to the “Show only variable fonts” box.

We choose the desired font and select the styles we want to use in our project. We can add one or more styles with custom weight.

Finally, we copy the HTML and CSS codes to be embedded in our files. In the head tag of the HTML files we will have something similar to:

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@250;385;516&display=swap" rel=“stylesheet">

While in the style sheet:

body {
    font-family: 'Oswald', sans-serif;
}

The one just described is one of two choices. Personally I suggest instead to download the font and include it directly in the project so that we can use all the weights and choose the ones that interest us directly in the CSS file.

Use for printing

The same written instructions for the web can also be used for printing, except for some possible slight variations.

Browser compatibility

The advantages of using variable fonts do not end there. Although this extraordinary technology has been introduced recently, its adoption by major browsers has been fast. To date, it can be used by 88% of the global population 2.

How to deal with old browsers?

With older browsers that do not support variable fonts, we can use a CSS instruction. In the style sheet we implement a default font, preferably similar to the variable font we want to use.

body { font-family: 'Source Sans’, sans-serif; }

While for browsers that support this new technology, we can take advantage of the detection instruction:

@supports (font-variation-settings: normal) {
    body { font-family: 'Source Sans Variable'; }
}

Doesn't the browser download all the fonts installed? Browsers are also ready for this possibility; in fact, they only download the fonts used.

Where to find variable fonts

The free Source Sans Pro used as an example for testing this guide is available on Github, https://github.com/adobe-fonts/source-sans-pro.

To find some licenced variable fonts, I report:

• https://fonts.google.com/?vfonly
• https://v-fonts.com/
• https://www.variable-fonts.com/
• https://www.fontspring.com/tag/variable

My expectations

This new format for fonts already has all the qualities to be a widely usable technology: it is adopted by modern and popular browsers, it weighs little and therefore allows faster loading times, and on old browsers we can use similar fonts or the same font but in the previous separate formats.

To date there are few variable fonts and expensive licences. Making them, however, does not require a considerable effort. Already existing fonts, starting from the most used ones, can be transformed into the new format. The main software for the realization of fonts, such as FontLab, are already ready to face this new evolution.

So I hope a quick step in this direction by the main distributors, starting with Google Fonts which has already published the first dozen character families.

Summary