How to Use Variable Fonts on the Web

Variable fonts were developed as the joint effort of the four biggest tech companies involved in type design—Apple, Google, Microsoft, and Adobe. As the name suggests, variable fonts allow designers to derive an unlimited number of font variants from the same font file. This way it becomes possible to adjust the typeface to different devices, viewports, orientations, and other design constraints.

Examples You Can Download

Subscribe to Envato Elements from just $16.50 per month and you’ll have access to these variable fonts, as well as thousands of other graphic and web assets:

Knicknack

How’s this for a characterful, squishy typeface? Check out the demo on v-fonts.com and grab it with your Elements subscription.

Manufaktur

Industrious, gritty, powerful. Manufactur stands up for itself.

Figuera Variable Fonts

Figuera is a detailed decorative typeface, with many variants which you can control to your liking.

Why Use Variable Fonts?

Variable fonts significantly reduce the limitations of current font formats. Today’s web fonts are inflexible and don’t scale very well; they only provide us with some fixed styles with names like “Light”, “Bold”, or “Extra Bold”. There are even typefaces that only have one weight or slant variant. With a variable approach however, we have access to an infinite flexibility of weight, slant, x-height, slabs, rounding, and other typographical attributes.

Better still, they improve performance. Web fonts as we know them need each font variant to be stored in a separate file. For instance, this is how the folder of the Roboto web font looks:

Variable fonts use a single font file that the browser only has to load once. Upon being loaded it can serve all the variants from just that one binary. 

So, here is a brief comparison:

• Roboto: twelve font files, twelve variants.
• Variable fonts: one font file, unlimited variants.

As you can already imagine, our typographical options grow incredibly with this newer approach. From practical options, through subtle, all the way to the more.. experimental!

I hope you don’t mind me tootin’ my own horn, but there’s also the glorious pioneering work of a variable color font called… Mr. Poo: https://t.co/aE2qWE69Cm pic.twitter.com/X3ylXzqtnT

— Roel Nieskens (@PixelAmbacht) May 8, 2018

The OpenType Font Format

So what file format do variable fonts use? According to the official docs:

“OpenType fonts may have the extension .OTF or .TTF, depending on the kind of outlines in the font and the creator’s desire for compatibility on systems without native OpenType support.”

To be completely accurate, they were introduced in version 1.8 of the OpenType font file specification. OpenType is an extension of the TrueType font format, therefore variable fonts are available as either .otf or .ttf files.

Design Axes

The new OpenType font file specification comes with a new technology called OpenType Font Variations that allows us to interpolate the font along numerous design axes—up to 64,000 according to the Adobe Typekit Blog.

The OpenType 1.8 specification defines five registered axis tags:

1. weight <wght>
2. width <wdth>
3. optical size <opsz>
4. slant <slnt>
5. italic <ital>

Moreover, type designers can also define custom axes along with their own four-character tags in the “name” table of the font file.

Below, you can see a great illustration of how design axes work (from John Hudson’s article on Medium.com, referred to by Typekit as the non-official announcement of variable fonts). It demonstrates a three-axis variable font with weight, width, and optical size axes:

The red glyph in the middle represents the set of outlines stored in the font, the green glyphs represent the extremes of the three axes, and the orange glyphs represent the corner positions. 

The whole cube represents the design space we have access to if we use this three-axis variable font. It’s a cube only because the font has three dimensions (weight, width, optical size). With fewer axes, we would move downwards towards a rectangle (2-axis) or a line (1-axis) and with more axes, we would move upwards into a multi-dimensional hyperspace. 

And of course, a real-life 3-axis variable font wouldn’t necessarily be a cube but more likely a rectangular cuboid, as the different axes in most cases don’t have the same length.

Named Instances

Variable fonts still allow type designers to define named instances—specific font variants among the unlimited number of options. For instance, Adobe’s Variable Font Prototype contains two axes (weight and contrast) and eight named instances (Extra Light, Light, Regular, Semibold, Bold, Black, Black Medium Contrast, Black High Contrast).

Named instances are more important if we want to use a variable font with design programs such as Adobe Illustrator. On the web, we can easily generate any instance (named or unnamed) with CSS (e.g. in the Adobe Variable Font, the Extra Light named instance takes the minimum value of both the weight and contrast axis). 

Adding Variable Fonts to a Web Page

We can add these fonts to a website using the @font-face rule at the top of the CSS file.

For instance, we can add the Avenir Next variable font with the following CSS rule:

@font-face {
    font-family: "Avenir Next Variable";
    src: url("AvenirNext_Variable.ttf") format("truetype");
}

You can find more examples on the Axis Praxis website (it also has a playground), on the GitHub pages of different type design companies (e.g. MonoType, Type Network), and Typekit has also started to publish the variable font versions of their most popular Adobe Originals families.

Note: not every OpenType font you’ll find on the web is a variable font (they were introduced only with version 1.8).

Setting Font Variations With CSS

To define font variations, we can use the font-variation-settings CSS property introduced with the CSS Font Module Level 4. This is a low-level property that allows us to control the output by specifying a value for each axis.

Example 1: Avenir Next

The Avenir Next variable font contains two design axes: weight and width—both are registered axes. Avenir Next also has eight named instances (Regular, Medium, Bold, Heavy, Condensed, Medium Condensed, Bold Condensed, Heavy Condensed).

The full CSS (belonging to a random unnamed font variation) looks like this:

body {
    font-family: "Avenir Next Variable";
    color: rgb(0, 0, 0);
    font-size: 148px;
    font-variation-settings: 'wght' 631.164, 'wdth' 88.6799;
}

We can use any value (even float numbers) for the axes between the min and max values. In case of Avenir Next, we can use the [400, 900] range for weight and the [75, 100] range for the width axis.

Where to find the ranges? The font files contain the font variation (fvar) tables that hold the necessary data. However, to access that information, we need to view the contents of the font file with a tool such as FontView. Sometimes the documentation of the font contains the ranges, but unfortunately this is not always the case. The good news is that the Axis Praxis website contains the min-max values for all the variable fonts it features.

Example 2: Decovar

Decovar is one of the most versatile examples that currently exists. You can find it on Axis Praxis, on GitHub, and it also has a demo page on TypeNetwork’s website. Decovar contains one registered (weight) and fourteen custom axes, and also has seventeen named instances.

From Decovar’s GitHub docs, here are some variants we can achieve with this 15-axis variable font:

The CSS we need to use is similar to the previous example. Here, we have to define all the fifteen axes (inline, sheared, rounded slab, stripes, worm terminal, inline skeleton, open inline terminal, inline terminal, worm, weight, flared, rounded, worm skeleton, slab, bifurcated).

div {
    font-family: Decovar;
    color: white;
    background-color: rgb(0, 162, 215);
    font-size: 157.12px;
    text-align: left;
    padding-top: 20px;
    font-variation-settings: 'INLN' 285.094, 'TSHR' 346.594, 
        'TRSB' 786.377, 'SSTR' 84.268, 'TWRM' 200, 'SINL' 84.268, 
        'TOIL' 0, 'TINL' 91.983, 'WORM' 0, 'wght' 400, 'TFLR' 0, 
        'TRND' 0, 'SWRM' 0, 'TSLB' 277.155, 'TBIF' 0;
}

Note: we have to specify a value for all the axes in the font-variation-settings property—even those we don’t want to use. 

In case of Decovar, we can use 0 as value for the axes we are not interested in; these will be rendered with the default value. This isn’t always the case though, as it depends on the ranges the font uses for the different axes. Decovar is easy, as it uses a 0-1000 range for all axes, and 0 is the default value for all.

You can generate similar font-variation-settings declarations with Axis Praxis, you don’t have to calculate the values on your own. The CSS above generates the following font variant:

High-Level CSS Properties

The font-variation-settings property is a low-level property and according to the W3C recommendations it should only be used if other methods are not available. What does this exactly mean?

According to the CSS 4 specifications, we will be able to control registered axes with higher-level CSS properties in the future, namely:

1. font-weight (will control the wght axis)
2. font-stretch (will control the wdth axis)
3. font-style (will control the slnt and ital axes)
4. font-optical-sizing (will control the opsz axis)

The first three properties exist since CSS2, however the CSS4 specifications expand their usage. We will be able to use them not only with predefined keywords (e.g. normal or bold for font-weight) or round numbers (e.g. 400, 600, 800, etc.), but also with all numbers on a predefined scale (for instance, font-weight will range between 1 and 1000 & font-stretch will range between 50% and 200%).

These features are still in the experimental phase, though. So for now, the reasonable thing is to keep using font-variation-settings, as currently this is the most stable property for accessing the axes of variable fonts.

Support

As variable fonts are still very new, browser support is not yet perfect. The latest versions of Chrome and Safari already support them, but Edge and Firefox still lag behind (however they are already available in Firefox Nightly and Firefox Developer Edition). Since the Oct 2017 release, Photoshop and Illustrator also support them.

Learn More About Variable Fonts

We can expect this new approach to bring incredible changes into the world of web typography. As it’s getting more and more support, it’s time to take a plunge into learning and experimenting. Check out the following resources:

• 
  Web Typography
  The Future of Web Typography: CSS Fonts Level 4
  Dennis Gaebel

• 
  Fonts
  Variable Fonts on the Web, Explained
  Kezz Bracey

• Announcement video at the ATypI conference in Warsaw in 2016, with five notable speakers.
• Typekit Blog’s announcement post by Tim Brown, Head of Typography at Adobe, detailing the problems they can solve and future plans.
• Lea Verou has a great online playground on Codepen; it uses the Amstelvar variable font.
• Nick Sherman’s curated news on Twitter @variablefonts.
• v-fonts.com