🧓🏻 👉🏽 👩🏽‍🎤 On the positive impact of variable fonts on web project performance 👂🏼 🏞️ 🤥

When thinking about web fonts, and what impact they have on site performance, they often pay attention to the following three indicators:

Number of requests to download font files.
Sizes of font files.
The time until the first page rendering.

I wanted to know how the use of variable fonts affects these indicators. Therefore, I compared them with regular fonts. That's what I did.

Reduce the number of requests to download font files

There are several ways to reduce the number of font download requests. For example, this is caching, using CDN, reducing the number of variants of fonts used. I will not talk here about using CDN or caching, since this is, in general, the same thing when working with regular fonts, as when working with variable fonts. Instead, I’ll talk about reducing the number of font style options.

In the standard font world, reducing the number of font options used reduces the number of font download requests. This happens because using fewer styles means fewer font files are needed. Usually for this you need to plan the font selection and find a balance between design and performance, deciding whether the more attractive and “heavy” design is worth the impact it has on performance.

The use of variable fonts, due to the fact that they are able to store different font options in one file, means reducing the number of requests to download font files without having to talk with the designer to reduce the number of font options used in the project.

The use of variable fonts leads to a reduction in the number of requests only because of the device features of the files of such fonts. But if the file contains all the information about the different font options, it’s appropriate to ask how this affects the file size.

Reducing font file sizes

There are many ways to reduce font file sizes. Usually the first step in this process is to choose the most efficient format for storing web fonts. For example - WOFF2.

▍Finding reference point

I conducted a study of the sizes of various font files. In particular, using the font Source Sans Pro from Adobe. I chose this particular font because its code is hosted on GitHub, and because it is open source.

Comparison of the sizes of OTF files of the Source Sans Pro font - a file that stores a font of one saturation and a file that stores a variable font.

As a reference point, I took a file that describes a font of one saturation of the standard version of Source Sans Pro. Its size in OTF format is 248 Kb. The size of the variable font OTF file is 405 Kb. This means that the file size of the variable font is 73% larger than the file size containing one version of the standard Source Sans Pro.

But considering the fact that the variable font file contains all the information necessary for font variants with any saturation, the size of a set of regular font files, similar in capabilities, will be about 1170 Kb.

And this is almost 3 times the size of the variable font file.

Even if you need a font in the normal and bold saturation options, the two files needed to store these font options will turn out to be more than one variable font file.

▍Comparison of OTF and WOFF2 formats

OTF files, in comparison with the compressed formats WOFF and WOFF2, turn out to be quite large.

A file with one font option: OTF - 234 Kb, WOFF2 - 111 Kb. Variable font file: OTF - 405 KB, WOFF2 - 112 KB.

If you compare the file sizes of different formats, it turns out that you can greatly reduce the file size by simply using the WOFF2 format.

It seemed interesting to me how much savings are provided by using the WOFF2 format when storing variable font data. The fact that the file size has decreased from 405 Kb to 112 Kb leads to the fact that the variable font file is almost the same size as the file that stores only one version of the standard Source Sans Pro.

This turned out to be a surprise to me, and I am absolutely sure that such a saving will not be possible to achieve in all cases. But it’s very nice to see how effective WOFF2-compression can be when applied to a variable font.

▍ Reducing file sizes using subsets of fonts

When working with standard fonts, there is another way to reduce file sizes. It consists in using subsets of fonts. This allows you to get rid of unnecessary characters, or reduce the font character set, for example, leaving only those that are needed to display texts typed in Latin.

Creating subsets of fonts carries some risks. Using subsets may cause some parts of the text to be displayed using a fallback font. This can happen if the necessary characters were accidentally deleted from the font used.

You can create subsets of fonts using special tools - like glyphhanger. In particular, a good guide on GitHub has been prepared for this tool. It works with both standard and variable fonts.

I processed the standard and variable versions of Source Sans Pro with glyphhanger and selected lowercase and uppercase Latin characters, as well as numbers and special characters like exclamation points.

Using subsets of fonts to reduce file sizes

This operation allowed us to reduce the size of a file containing a font of one saturation from 111 Kb to 16 Kb (saving 85% is very good). In the case of a variable font, the file size decreased from 112 Kb to 27 Kb (75% is an acceptable level of savings).

Again, these results surprised me. I was expecting a variable font file to be larger. Considering the fact that in typical situations they use the same font of normal and bold saturation, it turns out that a variable font file of 27 KB is smaller than two files, each of which contains information about the same font of different saturations. As a result, I believe that this approach provides very good savings.

True, it is important to note that only my experiments with the Source Sans Pro font are described here. On other fonts, the same methods may lead to other, not so good results. Using a variable font may not produce the same level of file size reduction. As a result, I recommend that you use caution when using subsets of fonts. Namely, before applying this optimization technique in practice, it’s worth testing everything well, evaluating it, and understanding what is best for a particular project.

▍ Additional considerations regarding file sizes

Some additional considerations to consider when talking about font file sizes are that downloading one large file will take longer than downloading several smaller files.

For example, when using standard fonts, files that store information about their type of normal saturation are usually smaller than others. As a result, the body of the document can be displayed quickly, immediately after downloading the corresponding small file. And later, after loading the bold version of the font, you can apply it. The advantage of this approach is that it allows you to display text on the page faster than using a variable font. The point here is that individual standard font files are smaller than the variable font file.

When using a variable font, you need to wait for the loading of a single large file before displaying the text. This can increase the time it takes to prepare a page for work. However, the need to wait for all the font data before the text is displayed allows you to avoid the problem that gradually downloaded fonts affect the already displayed text. In addition, since when using variable fonts, all types of font are loaded at one time, we do not have to force the browser to redraw the page every time a new version of the font is loaded.

As a result, if we talk about the size of font files, the conclusion that can be drawn about the use of variable fonts depends on the specific situation. Namely - from the features of the project, from design requirements, from the fonts used.

Reduce time to first render

Now let's talk about reducing the time before the first page rendering. The shorter this time, the better for performance. This is quite obvious. In addition, it must be borne in mind that, as already mentioned, the only large variable font file can load slower than a few small font files. But even a slight delay in the output of the page, the only "flash of invisible text" (Flash of Invisible Text, FOIT) can lead to the fact that the user will feel as if the page is loading slower than it actually happens. As a result, I believe that instead of putting the page at risk of FOIT, we should try to limit this problem to what is called the “Flash of Unstyled Text” (FOUT).

▍FOIT

This is what FOIT looks like.

An example of the visual manifestation of FOIT

“Flash of invisible text” occurs when we block or delay the output of text until the desired font is loaded. As a result, before loading the font, the page will look blank.

▍FOUT

And here is an example of FOUT.

An example of the visual manifestation of FOUT

“Flash of non-stylized text” occurs if the text is first displayed using a backup font, and then when the desired font is available, it switches to it or replaces the previously used font.

I believe that it is better if the user encounters FOUT rather than the inability to read the contents of the page. Therefore, it is best if, on the one hand, we envisage a development scenario with the appearance of a FOUT before the user, and on the other hand, we try to make it as little as possible affect the usability of the project.

The easiest way to implement the FOUT mechanism in a project is by using a propertyfont-displaywith a valueswap. This will allow the text to be displayed using the fallback font described in the font set. Then, after loading the desired font, it will replace the backup font. The property font-displaycan take other values, and I recommend that you examine them, but to implement the FOUT behavior of texts, the value swapis a good starting point.

font-display: swap;

One of the problems encountered with FOUT is that when replacing a font, you can often see the text rearranged on the page to adapt the content to a font whose parameters are “measured” differently from the parameters of a previously used font.

When working with standard fonts, we can modify properties such as line-height, font-sizeand letter-spacingby doing this in order to adapt the text to replace the font and reduce the content shifts that occur during this process. You can do this with the fantastic Font Style Matcher tool . It was created by Monica Dinkulescu , who was inspired by this excellent article by Helen Holmes (seriously - a wonderful article - I recommend reading it).

I hope that over time, variable fonts will enjoy wider support for operating systems. This will allow you to ease the change in layouts by using the system variable font as a backup.

Variable backup font

Imagine what would happen if we had a system font that supports the ability to control its saturation, width, and optical size. This would allow modifying the properties of such a font to fit it to the characteristics of the special fonts we use. If you combine this with existing methods for setting properties such asline-heightorfont-size, this will give us the opportunity to create almost imperceptible transitions between the two fonts. This means that users will experience less noticeable manifestations of FOUT, and that browsers, due to smaller changes in layouts when changing the font, will have to do less work on redrawing the pages.

That would be just wonderful, and I hope that it will be so.

Summary

Using variable fonts reduces the overall size of font data downloaded by the browser. The fact that a variable font is used instead of the usual one on the page automatically means that in order to prepare the page for output, you will have to perform fewer requests.

Even if the file sizes of variable fonts may seem quite large to you - pay attention to the fact that using such fonts, you can apply other optimization techniques. Namely, we are talking about advanced font formats like WOFF2, about the formation of subsets of fonts, about using the property font-display: swap. All this suggests that, using variable fonts, we can get a reduction in font data and a significant increase in the ability to style pages.

If we can handle some of the existing performance challenges, this will allow us to pay more attention to design. That is, you no longer have to look for compromises between design and page performance.

In the field of using variable fonts, we have the opportunity to understand how this technology can help create more positive user experience from working with our projects. Due to the fact that the use of a variable font means the possibility of using many font options, we can create projects that can flexibly adapt to the features of the devices that are used to work with them. This allows you to create accessible and readable text without worrying about the fact that additional regular font files will badly affect the size of the data necessary to ensure the pages are working.

Dear readers! Do you use variable fonts in your projects?

On the positive impact of variable fonts on web project performance