Guide

Variable Fonts Are Here to Stay

As variable fonts make their way into Google Fonts, learn what they are and their benefits for digital design–better compression for developers, greater expression for designers, and finer text typography for readers.

For its first 20 years, the web had a problem with typography. Font choices were limited to those pre-installed on your computer, with styling options restricted to bold and italic. Different computers had different fonts pre-installed so the same page would render inconsistently, and it was difficult to create web layouts that worked as well as print designs. Compromises and hacks ruled.

These days, developers use modern CSS to create websites that work consistently well on all browsers. Responsive layouts adapt fluidly and intelligently to tiny mobile screens as well as giant desktop displays, and ever since web fonts arrived in 2010, font choice for browsers is about the same as it is for desktop apps. All good, right?

Well, not quite. Web developers measure every asset, including fonts, for their impact on latency. If the information hierarchy in a layout calls for multiple font weights and styles, developers might make decisions—like using smaller fonts, and fewer fonts—that compromise typography for the sake of page-loading time. Subsetting and the WOFF2 format can help by removing unused glyphs and applying font-specific compression, but limiting the number of web font styles is still a common issue for designers.

Furthermore, if CSS layouts can adjust themselves so fluidly and precisely, why not the fonts too? A tiny bit bolder here, a touch wider there? Many type families today offer 30 or more font styles to help structure information, so it seems reasonable to use them—or even have browsers select the ideal fonts in response to device characteristics or user preferences.

Hello, variable fonts

In late 2016, Microsoft, Apple, Adobe, and Google presented a remarkable solution: OpenType variable fonts.

One variable font file can contain every font in a traditional static font family. This is an immediate win in terms of raw file size, as it compactly packages the entire font family. The more static fonts that are replaced, the more dramatic the savings become—even up to 70% compression for very large font families.

Even better, designers and developers can also access fonts located “in between” those static styles. For example, a variable font that stores regular, bold, and condensed styles can also offer countless options between them. Want to take regular 70% towards bold and 30% towards condensed? No problem!

A full spectrum of stylistic variation

A variable font with two axes, weight and width. All axes can be combined, so you can take regular 70% towards bold and 30% towards condensed.

Each kind of variation within a variable font is defined on an axis—essentially, a sliding scale with minimum, maximum, and default values.

When values are set on a variable font’s axes, they produce what is called an instance—a unique font which works just like an old-fashioned static font. Since there are millions of possible instances in any given variable font, font designers make things more manageable by providing preset “named instances,” that show up in the font menu for easy selection (even in apps like Word and TextEdit which don’t otherwise support variable fonts).

There are currently five registered axes in the Microsoft OpenType specification itself—weight, width, italic, slant, and optical size. Registration means axis settings are well-defined and commonly used in many different fonts, and their settings can be retained instead of discarded when switching between fonts. Microsoft has defined the following axes so far:

  • Weight, where a value of 100 is thin, 400 is regular, 800 is extra bold
  • Width, where 100 is normal width, 200 is double-width, 50 is half-width
  • Italic, where 0 means roman letters and 1 means italic forms
  • Slant, where the value sets the slant angle in degrees
  • Optical Size, where the value sets a point size that the design can respond to

A font can have its own axes beyond those 5 to customize any other elements, like x-height, serif style, stroke contrast, and vertical alignment. Designers and developers have to discover how they work, so type designers may provide explanations about how more intricate axes are intended to be useful within typeface specimens. Here are two examples of recent typeface projects commissioned by Google Fonts to showcase what variable fonts can do:

“Recursive uses its Casual axis to offer a range of personality, allowing you to get just the right tone for any context. Along this axis, letterforms adjust in stroke curvature, contrast, and terminals to go from a sturdy, rational Linear to a friendly, energetic Casual.” – recursive.design

“The Wonk axis controls the substitution of “wonky” characters. These substitutions automatically switch at smaller sizes (18 pt and below), but can be toggled manually at larger optical sizes. The “lean” of the h, n, and m glyphs is a characteristic borrowed from Windsor.” – fraunces.undercase.xyz

How to use variable fonts in CSS

Setting four axes using the CSS font-variation-settings property: weight, width, and two custom axes.

In CSS, font-weight and font-stretch control the Weight and Width axes directly using numeric values. For other axes, the new font-variation-settings property sets any axis value reliably, although to have cascading values, it helps to use CSS custom properties. Axes are specified by their tag names, four-character codes such as “wght” for weight, “wdth” for width, and so on. If you want to hand over control of axes, try using for sliders and a little JavaScript (as in this CodePen example).

A new CSS property is font-optical-sizing, which is on by default. This tells browsers to control the optical size axis automatically—styles for headings, paragraphs, and captions all perfectly tuned, all from the same font. The Amstelvar and Roboto Flex families from Type Network offer a full set of optical sizes, from extremely light and narrow, to extremely bold and wide, from 8 pt up to 144 pt.

These fonts are also pioneering an additional set of parametric axes, that enable both visual designers and automated systems to fine-tune typography, such specifying stem widths, counterform heights, and other details with a new level of precision. This new level of typographic control can be used to closely pair other typefaces and graphical elements in layouts, as shown in the examples in TypeNetwork’s variable fonts brochure.

In Firefox, the Page Inspector is enhanced for variable fonts; its powerful new fonts panel has easy-to-use sliders for editing axis settings, plus a drop-down list for the font’s predefined named instances.

The Page Inspector panel in Firefox v63+ allows you to adjust axes and select named instances on any element that uses a variable font (watch a full demo by Mozilla Hacks).

But how do they work?

Math makes it all possible. As with static fonts, inside a variable font the glyph outlines are defined by Bézier curves (each have three or four points per curve, like those of Scalable Vector Graphics). The default set of glyph outlines are complemented by one or two additional outlines, for the ends of each axis. Additional outlines can be interspersed as well.

The math to obtain the countless intermediate forms is known as linear interpolation. Tech companies like Adobe and Apple have used it for font variations since the 1990s, and the tools have since become a standard part of the workflow of type designers. For many years, most typeface families were designed as a small number of master font styles that are interpolated to produce all the instances shipped out as individual font styles.

Exploring the design space

To visualize large font families, type designers often speak of the design space of a typeface. Each axis of a variable font can be regarded as a dimension in a coordinate system; for example, the design space of a 1-axis font is a line, that of a 2-axis font a square, a 3-axis font a cube, and so on. Any set of values (or location) within the design space represents a different instance of the font.

If it sounds complex, that’s because it is; most human brains can’t conceptualize beyond two dimensions, much less ten or more. A great way to explore these mind-bending spaces is by walking through them with movement. By updating multiple variation settings many times per second, we can create animation.

It’s easy to animate variable fonts on the web with straightforward JS, and even plain CSS. The ripple effect (shown above) uses a weight axis. For more detail, view the Codepen web code that made this illustration.

On the web, JavaScript is one way to make rapid adjustments to CSS variation settings to create motion, but it’s often better to use CSS transition and CSS animation; these properties work effectively with font-weight, font-stretch, and font-variation-settings.

Sensitive animation in UI is increasingly part of a designer’s toolkit, as shown in the examples in Material Design: Understanding Motion. Used well, motion helps UX designers to establish hierarchy, provide feedback, avoid discontinuity, add character, and communicate possible actions. One very simple yet delightful effect can be achieved using CSS transition and the :hover pseudo-class, to change a Weight axis value gradually when the cursor enters an element.

Also remember that fonts nowadays are more than just alphanumeric characters. Emoji sets are in everyday use and open for redesign, reinterpretation as variable fonts, and animation—so a running horse emoji in a font is also possible!

Muybridge animation implemented as a variable font. The font contains one glyph in 16 masters, placed along a time axis. Interpolation is happening with the CSS animation property. For more detail, view the code that made this illustration.

Giving control to designers and developers

The first major design programs to support variable fonts were Adobe Photoshop, Illustrator, and InDesign. Today several variable fonts are bundled with these programs, so now millions of people using Creative Cloud can experience this new typographic potential. Digital design tool Sketch has added full support, and so has CorelDRAW.

For the web, all major browsers now support variable fonts on both desktop and mobile. The underlying APIs of Windows, macOS, iOS, and Android in their latest versions also offer app developers access. If you are looking for a lovingly maintained list of where they can be used, the designer Nick Sherman maintains a database at v-fonts.com/support.

Google Fonts now offers a filter to show only variable fonts, and a table for developers listing all the axes and their minimum, default and maximum values.

At last, the power of interpolation that font designers have been using for years is available in standard applications, and is in the hands of everyone. This new breed of fonts can be finely adjusted by eye or by automation, just once for a simple document or many times per second for live interaction and animation. Use variable fonts to explore and push design flexibility and new boundaries even further—and save web bandwidth at the same time.

Resources

Variable fonts and documentation from Google

Playgrounds with interactive controls

Guides to using variable fonts