variable_fonts_marquee

Variable Fonts Are the Future of Web Type

By Mandy Michael

A variable font is a single file that acts like multiple fonts. Variable fonts can improve page-load times, but their appeal goes way beyond that: Site visitors get an improved reading experience, and designers get greater creative freedom. While it's still early days, some software applications—including the latest Illustrator and Photoshop—and many web browsers do support the technology, and more will follow. It's a good time to understand how variable fonts work and how to use them in your web designs.

A CLOSER LOOK

Let’s look at the Acumin font family as an example. Because the traditional version consists of nine different weights (see below), you need access to nine different font files if your design uses all those weights. On the web, this means loading and referencing each of the nine files separately, adding to the overall size and load time of your site. You might think the resulting design is worth the wait, but will your audience?

In comparison, the variable version of Acumin (included in Photoshop and Illustrator) contains all nine weight variations in one file. These variations are defined along an axis, starting from extra-light (200) and ending at ultra-black (900).

The weight axis in a variable font works by constructing new points between the master variations. This means you can access font weights at arbitrary points along the axis, and that means more possible design combinations. Acumin Variable Concept also houses style variations, such as italics and condensed.

Here you see two variations of Acumin Variable Concept, defined using Weight and Width axes. You can combine the different versions of the font, morphing between the different styles; for example, you may change the weight but not the width. The result: You gain precise control over your web type, which can be skinnier, fatter, wider or thinner than ever before.

A PATH FOR NEW POSSIBILITIES

Inventive type designers aren't restricting themselves to expected variations, such as weight, width, or italic. They're creating variations that address effect, readability, and style.

A wonderful example is Foreday by DSType Foundry, which lets you control the size of its serifs. If you need better readability on smaller screens, for instance, you can reduce the serifs for a more sans-serif look (below).

My favorite example of custom variations is Decovar by David Berlow. You can use Decovar’s options and variations in isolation or combine them to push past the traditional practicality of weight and width.

Notice the variation in detail on the serifs (or lack thereof), changing the personality of the font entirely. With this level of technical control, you can extract more creative value from a single font.

Rhody Variable Extenders (below) lets you adjust the height of its ascenders and descenders, allowing you to create a more extreme or subtle design.

One thing to consider when designing for the web with variable fonts: You’ll need fallbacks for browsers that can’t render the new styles.

CREATIVE APPLICATIONS

Print designers have always used type to convey meaning, focus, or emotion. This art has been diluted for web designers, who have been restricted to images and simplified manifestations of the text. I've experimented with adding editable, selectable, and searchable effects to text, but even with the power of modern CSS, I still hit the ceiling. Now variable fonts let us web designers edit the source text itself, rather than just apply effects to it. In the examples below, I used variations of the Decovar variable font to create three very different effects.

For the first time on the web, we can animate the text itself without needing SVG or web technologies such as JavaScript or Canvas. The animation below is my favorite example of pushing the boundaries of what’s possible. Decovar isn't capable of this effect out of the box, but I was able to make the grass grow by combining two of Decovar's axis variations.

VARIABLE FONTS AND CSS

Using the font variation settings on the web with CSS requires developers to target specific elements to apply the appropriate style. Changing the weight of every letter in a heading, while possible, is not as straightforward as changing the weight of the whole heading. Traditionally, if you were to create the heading below in HTML and CSS, you'd need some way to target the word “variable” and “fonts” separately. This doesn't change with variable fonts, so while the HTML would be the same, the CSS would be a little different.

To access the variations in CSS, you use a new property called font-variation-settings. You can apply the different variations to text by targeting the name or code assigned to each axis. For each of the variations, you also set a number value corresponding to the version you want to use along the axis. Standard variations, such as weight and width, will have predefined names—for example, wght and wdth—and custom variations will have their own names determined by the typeface designer.

Let’s code the example above. Once you’ve imported the variable font file (the font is Gingham), set the font-variation-settings of width and weight on both the heading (h1 element) and the strong element.

In the code example below, I’ve added a weight (wght) of 0 and a width (wdth) of 0 to the heading element, resulting in the condensed, lighter weight. I’ve also set a weight (wght) of 700 and a width (wdth) of 150 on the strong element, resulting in the wider, bolder variation. This results in the final effect you see below.

TRY IT YOURSELF

Adobe Photoshop CC and Adobe Illustrator CC not only support variable fonts, they include several of them: Acumin Variable Concept, Minion Variable Concept, Myriad Variable Concept, Source Code Variable Concept, Source Sans Variable Concept, and Source Serif Variable Concept. You can use these variable fonts for web type and to generate interesting graphics and even animated GIFs.

As you can see, Photoshop lists all the Acumin versions. Selecting one of these will set the variations for you, which you can use as you normally would a traditional font. Open the Type Properties pane to explore the variations. It's a great way to familiarize yourself with the options and visualize the values in isolation or together.

The websites Axis Praxis and V-Fonts are excellent resources for exploring variable fonts. If you’d like to experiment with variable fonts on the web using CSS, you can play with the simple examples I set up on Codepen, or visit my Variable Fonts Experiments Collection, which combines variable fonts with other CSS Text Effect techniques for creating beautiful, inspiring, and meaningful text on the web.

Typography plays an important role in our process, and for a long time its uses on the web have been constrained. Variable fonts, combined with a host of new techniques in CSS, are giving us opportunities to do amazing things. I hope you push the boundaries and experiment with new designs.