Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Web Typography

How to Use Variable Fonts on the Web

by
Length:MediumLanguages:

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!

Note: with the exception of the last example, these fonts are available in the recommended .woff2 format (read on to learn more about formats). To make the conversion to .woff2 yourself you can use a tool such as convertio.co or Google’s woff2.

Knicknack

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

Knicknack
Knicknack

Manufaktur

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

Manufaktur
Manufaktur

Figuera Variable Fonts

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

Figuera Variable Fonts
Figuera Variable Fonts

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:

Contents of Roboto web font folder
Contents of Roboto web font folder

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!

From OTF and TTF, to WOFF Font Format

So what file format do variable fonts use? In their earliest days, they were created as part of the OpenType font format:

“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.” – Microsoft Docs

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

However, nowadays most variable fonts are packaged as WOFF2 fonts (WOFF2 being the recommended upgrade from WOFF). These are still OTF or TTF fonts but use a specific web-safe compression technique. WOFF was the result of collaborative work by the Mozilla Foundation, Microsoft, and Opera Software.

“WOFF files are OpenType or TrueType fonts, with format-specific compression applied and additional XML metadata added.” – Wikipedia

As we mentioned with the downloadable examples above, not all font packages include the .woff or .woff2 format.

“You might download a variable font in TTF format rather than as a pre-compressed file. You’ll definitely want to convert it into .woff2. Google offer a command line tool predictably named woff2 to make it easy.” – Ollie Williams

Design Axes

With these new specifications come 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:

Design axes of a variable font
John Hudson

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 FF Meta variable font with the following CSS rule:

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

The FF Meta example above is developed further by Jason Pamental on Codepen.

FF Meta Variable Font Demo
FF Meta Variable Font Demo

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: 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:

Decovar font variations

In the CSS 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).

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. 

We can use any value (even float numbers) for the axes between the min and max values.

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.

The CSS above generates the following font variant:

Decovar custom font variant
Decovar custom font variant

Finding the Available Ranges

Where to find the ranges though? 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.

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

Variable fonts are still relatively new, but browser support is getting there already. And 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:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.