For eight years web fonts have provided more expression and variety in web design . Now the next revolution is starting with variable fonts. What possibilities does the new font format offer?

In the early days of web fonts, web designers were content to finally have alternatives for Arial, Georgia and Co. at hand. But quite quickly the demand grew to be able to apply varied typography on the print level on the Web as well: More and more font styles were integrated to create typographic diversity. But with each font, another file had to be loaded, which caused the loading times to skyrocket. This is exactly where variable fonts start today. They have been developed with the goal of data compression, but also offer other benefits.

What are variable fonts?

A typeface is usually available with different typefaces or font styles or weights – such as “Light”, “Regular”, “Bold” – or font widths such as “Condensed” or “Extended”. Each of these font styles is specified by the font designer and stored in a separate file. Of course, depending on the size of the font, many individual files can be created, which is not advantageous on the Web due to longer loading times. Adobe, Apple, Google and Microsoft recognized this problem and in 2016, together with other experts, extended the Opentype format to “Opentype Font Variations”, known as “variable fonts”.

With these variable fonts, it is now possible to combine different font styles of a font into a single file. Individual fonts are not outsourced to separate files, but defined on different axes. A base font, called Central Master, is associated with extreme values ​​of a font property, such as “thin” and “black”. The result is an axis along which the stroke width can be infinitely interpolated. There are five standard axes defined in the Opentype specification: line width, font width, pitch, optical size and italics. However, it is not always possible to integrate the italics in the same file, because often with a correct italics many characters are completely redrawn. They can not be interpolated from the upright cut.

The standard axes do not necessarily have to be all occupied. In addition, other axes for serif shape and length, contrast, contours and other characteristics can be created. There are no limits for your creativity. If you are using a recent version of Adobe’s Creative Cloud, you can test different fonts in Illustrator or Photoshop, such as Acumin, Minion or Myriad, as a variable font. These are marked with the addition “Variable Concept” and can be called up via the font menu. The different axes can then be controlled via sliders. In CSS, it is possible to control the different axes and influence the font representation via the property font-variation-settings. How to do that is shown in the next section.

Apply variable fonts

Variable fonts are currently an experimental feature that does not yet work reliably across browsers. Nevertheless, browser support is currently around 65 percent in Germany. The website of the web typography conference Ampersand (2018.ampersandconf.com), which makes use of variable fonts, shows that nothing stands in the way of productive use.

Variable fonts, like all other fonts, can be integrated into the CSS via @ font-face:

[cc lang=”css”] @ font-face {
font-family: “SourceSans”;
src: url (“source-sans-variable.woff2”)
format ( “woff2”);
} [/cc]

It should be ensured that the font used is also available in compressed Woff2 format. At the moment, most variable fonts are just Truetype fonts (ttf), which are nice to experiment with, but whose file size makes them unsuitable for productive use. Google offers a command-line tool (github.com/google/woff2) to convert to Woff2.

The above code includes the variable font that can be used by supported browsers. These are – as of July 2018 – the current versions of Edge, Chrome and Safari (from MacOS 10.13). Firefox will follow suit with version 63.

Now the font can be assigned as usual via the font-family property to the desired HTML element. With the property font-variation-settings the different axes can be addressed and given values. As already outlined, five standard axes are stored, each labeled with four-character, lowercase tags in the CSS:

These tags can be paired with values ​​to display the desired font style. In the following example, the value 700 used corresponds to the style “Bold”:

[cc lang=”css”] html {
font-family: ‘Amstelvar’;
font-variation-settings: “wght” 700;
} [/cc]

Further axes can be added comma separated. If individual axes are present, they are supplemented with capital letters. For example, the font Amstelvar has an axis called “Grade”, which makes the line thickness thinner or thicker – without changing the horizontal extent of the font:

[cc lang=”css”] html {
font-family: ‘Amstelvar’;
font-variation-settings: “wght” 700, “GRAD” 60;
} [/cc]

Who does not know exactly which axes are contained in a variable font , which helps the website Wakamai Fondue (wakamaifondue.com), which analyzes variable fonts and displays the information you want.

Variable fonts can continue to be bolded with font-weight: bold. For this, however, the scope of line weights must be specified when integrating the font, in the following example, the maximum handling of 1 to 999:

[cc lang=”css”] @ font-face {
font-family: “SourceSansVariable”;
src: url (“source-sans-variable.woff2”)
format ( “woff2”);
font-weight: 1 999;
} [/cc]

Likewise, the other standard axes can be addressed via CSS properties: For the font width can be specified by font-stretch a percentage between 50 and 200 percent, where 100 percent of the normal width corresponds to 50 percent “Ultra-Condensed” and 200 percent turn “Ultra-Expanded”. In addition to the well-known italic for true italics, font-style can also obtain degrees for the inclination, which then range from oblique -90deg to oblique 90deg. The optical size can be activated with font-optical-sizing: auto or deactivated with the value none.

Fallback fonts

Since variable fonts are not a new technology, but merely an extension of the existing Opentype specification, even older browsers can display variable fonts. The problem is that they can not interpret the font variation settings and thus lack any control over how the fonts are displayed. Therefore, web designers should prevent such browsers from loading variable fonts and instead ensuring that they receive classical single files.

For this purpose, first the variable font, as shown in the code example above, is integrated by @ font-face. Subsequently, as in the past, the individual font styles are linked with their respective font files in further @ font-face rules:

[cc lang=”css”] @ font-face {
font-family: ‘SourceSans’;
src: url (‘/ assets / fonts / source-sans-pro-regular.woff2’) format (‘woff2’),
url (‘/ assets / fonts / source-sans-pro-regular.woff’) format (‘woff’);
font-weight: normal;
} [/cc]

It is important that the font name of the fallback fonts differs from that of the variable font. Where the script should be used, it will be integrated in the CSS:

[cc lang=”css”] html {
font-family: ‘SourceSans’;
}
The variable font is only used for those browsers that can support the font-variations-settings. This is checked with a corresponding query:
@supports (font-variation-settings: normal) {
html {
font-family: ‘SourceSansVariable’;
}
} [/cc]

Since a font file is not loaded until it is addressed in the CSS via font-family, every browser now only loads the font that it can handle.

Advantages of variable fonts

Variable fonts bring in the everyday life of web design some advantages. As mentioned above, websites that used to use a lot of individual typefaces can save data in the future via variable fonts. Take, for example, the FF Meta, whose four single cuts “Regular”, “Bold”, “Italic” and “Bolditalic” bring 133 kilobytes on the scales. By contrast, the variable metafile of the FF Meta only needs 84 kilobytes, a saving of about 37 percent. The savings are all the greater, the more individual sections are replaced by a variable font file.

Granular settings

Thanks to the variable adjustment of variable fonts, it is possible to make finer typographic settings. If the bold style is a bit too bold, but the next thinner font is not bold enough, you can use a variable font to specify any line width between them that better meets the requirements. This can also be used in responsive web design , in that the font representation can be optimized to match the screen resolution.

For smaller devices, for example, the font width could be varied. Especially for headlines, web designers have been forced to greatly reduce the font size, so that a headline does not run over too many lines. As a result, the size contrast between the headline and the text is often lost. With variable fonts, the font width can be reduced separately from the font size. Even longer button or menu texts can be prevented in this way from taking several lines. A setting in the browser or in the operating system could also allow users to increase the line width independently – if it is too filigree and limits the readability. A plus for better accessibility.

Optical size

Another interesting aspect is the variation of the optical size. It serves to optimize the presentation of the font, based on the currently set font size. For easy legibility in small font sizes open letter shapes, a large x-height and a low contrast of line width are helpful. Exactly these measures can be in a larger font size, for example in a headline, but make sure that the font looks gross and clumsy. Therefore, it makes sense for large font sizes to work out the font contrast and detail, so as to visually enhance the typeface.

While these adjustments in lead type were still common, most digital fonts have only one optical size, which applies to all font sizes. Variable fonts avoid this compromise, improve readability for small font sizes, and at the same time enrich the typeface in headings. Best of all, if a variable font has an optical size axis, it will automatically be applied by the browser.

Animations

Since the axes of the variable fonts are controlled via CSS, they can also be animated with CSS. Likewise, variable fonts can be elegantly faded in page layout. If this happens over the existing axes, it looks much more interesting than simply screwing up the opacity. The typeface Duos Write on very-able-fonts.com even offers its own axis for the animation, with which a writing effect can be created. And David Jonathan Ross makes a wave dance across the screen with his Lab DJR. In this case sure gimmick, but still exciting to see what is possible with variable fonts. Finally, there is the website www.axis-praxis.org, where you can play with the possibilities of variable fonts.

Conclusion

In addition to savings in file size, variable fonts offer many other benefits, such as fine-tuning of the web typography or adaptation to different conditions such as display size and resolution. By the end of 2018, all major browsers will support variable fonts. And if font designers and providers then provide them with meaningful pricing and licensing models, there’s nothing standing in the way of creativity. However, web designers should use the new freedoms wisely. Too much bauble with variable fonts will distract website visitors rather than use them.