Do you need variable fonts?

The history of fonts begins long before digital technology (centuries ago). At that time, people use several frames of metal letters to print long pages of text.

With digital fonts, you have a large choice of free and paid resources to style your pages. The challenge is to choose the right fonts for the right design, though.

In any case, without this wide variety of typefaces and fonts, the web would be the most boring place in the world.

Disclaimer

Most people use terms such as "fonts" and "typefaces" interchangeably, and I'll do the same in this post, even if it's not the same thing.

It makes sense, though, especially with variable typefaces.

Digital fonts in short

Anyone can use digital fonts. There are multiple ways to customize fonts, for example:

• pre-installed fonts (via the operating system)
• self-hosted fonts via the @font-face
• Google font embeds

N.B.: note that Google allows you now to download its fonts if you want to self-host them, and if you care about performances, you should consider this option.

The @font-face CSS at rule

The modern way to declare self-hosted fonts is the following:

@font-face {  font-family: "MyFancyFont";  src: url('path/to/fancyfont.woff2') format('woff2'),     url('path/to/fancyfont.woff') format('woff');}

If you need support for ancient browsers, you can extend it with TrueType (ttf) and Embedded OpenType (eot) formats. The browser takes the first rule it understands. That's why we write the WOFF2 version first. WOFF is a format with a specific compression algorithm.

Once you've done that, you can use MyFancyFont in your CSS, for example, with the font-family and the font-weight properties to style HTML elements:

h1, h2, h3, h4, h5, h6 {  font-family: "MyFancyFont", serif;  font-weight: 900;}

Note that your source files MUST be compatible with all variations (fonts) you use in your CSS. Otherwise, you might get entire "unstyled" areas in your web pages.

What are variable fonts

OpenType Variable fonts are now supported in most browsers.

While a classic font provides a specific variation only, a variable font can give all possible styles and weights in a single file.

This approach is pretty convenient for styling as there's only one file to load, and everything works (styles, weights, sizes).

N.B.: after some researches for this post, I learned there could be two files actually, but it's not more than that

I sometimes read it's excellent for performances. It does have an impact as loading one single file, even if it's larger than a classic font file, is still smaller than loading nine or ten classic font files.

However, if you use HTTP2, you care less about the number of HTTP requests as all static files get loaded in parallel, and the expected performance gain might not happen.

Anyway, it's beneficial if you use many variations (many fonts), but convenience and flexibility are stronger arguments in favor of variable fonts, IMHO.

Variable fonts contain all possible permutations, so you get everything you need to style all HTML elements.

Here is a CSS example:

@supports (font-variation-settings: normal) {  @font-face {    font-family: "MyVariableFont";    src: url('path/to/myvariablefont.woff2') format('woff2'),       url('path/to/myvariablefont.woff') format('woff');    font-weight: 100 900;  }  body {    font-family: "MyVariableFont", sans-serif;  }  h1,h2,h3,h4,h5,h6 {    font-weight: 900;  }  i, em, .italic {    font-weight: 350;    font-variation-settings: 'ital' 1;  }}

font-variation-settings is not the only property you can use. You can visit MDN - variable fonts to get details.

The concept of "axes"

Axes are ranges for specific aspects of the typeface. For example, weight, width, and optical size are called registered axes.

With the weight axis, you control the lightness or the heaviness. The width defines whether letters are condensed or extended. The optical size allows for varying the overall stroke thickness of letterforms based on physical size.

There are slant and italic axes too. They allow for tuning the angle of the letterforms.

The font developer can also define custom axes with a four-letter identifier. This way, you can call this custom variation in your CSS:

.myelement {  /*BIRD had no particular meaning here, it's just four letters*/  font-variation-settings: 'wght' 350, 'BIRD' 777;}

The idea is to customize the typeface accurately to get the best result in terms of readability, legibility, and aesthetics, without the hassle of loading one file per each variation.

Source: MDN - variable fonts

When to use

Let's answer the central question: "Do you need it?"

In short, if you don't have a complex design to code that needs many variations of the same typefaces, it makes less sense to use variable fonts. Besides, the performance gain in terms of loading is not guaranteed.

It doesn't do evil, and it's quite an exciting feature, but be aware it only makes a difference when there are many variations involved.

However, it could have a significant impact on accessibility. It's not something I read everywhere, but I think that's a critical point.

Variable fonts allow for improving readability and legibility. In addition, it's easier to adjust the font size, weight, and many properties according to the screen size and the user's preferences.

This way, it's easier to adjust information density too.

Conclusion

As it's not uncommon to have complex designs nowadays and use more than ten different weight and width combinations in a typographic system, variable fonts can save considerable time. Moreover, it provides way more flexibility than classic fonts.

It's beneficial for branding, and it can also improve accessibility for the web.

Photo by Charisse Kenion on Unsplash