Variable fonts’ past, present and future, according to Dalton Maag

It's Nice That: When did variable fonts come to be, and why have they taken off recently?

Variable font technology is actually not that new. Adobe and Apple independently developed multiple master fonts and GX variations in the early 1990s, both were axis-based technologies similar to variable fonts. Adobe abandoned multiple master fonts by 2000, and GX Variations only ever had minimal support. This all changed when Apple, Adobe, Microsoft, Google, and a few independent foundries and typeface design studios, including Dalton Maag, came together to announce that OpenType Font Variations (better known as variable fonts) would be added to the OpenType specification mid-2016.

Since then, type designers have created hundreds of variable fonts, some experimental, testing the boundaries of the technology, and others highly functional, aimed at improving web performance.

Support for variable fonts has improved over the last couple of years, now covering all major web browsers, operating systems and key applications like Adobe InDesign, Illustrator, Photoshop, and Sketch. Figma and Quark Xpress also have support on their roadmaps. These updates have made variable fonts much more accessible to designers.

From Dalton Maag’s perspective, we’ve been experimenting with variable fonts since their early days. We released our first variable library font, Venn, in 2018. Since then, we’ve released three more variable font families, Objektiv, Mokoko, and Aktiv Grotesk, with another one coming out next month. Variable fonts broaden what our clients – users and designers – can do with type, whether it’s very expressive and bold, or simple and functional. That’s led to an increased interest in our variable library fonts, but also more conversations around custom variable fonts.

INT: What design decisions do you have to make when creating a variable font?

As with static fonts, no two variable font projects are the same, so we start by defining the requirements. We consider the purpose, expression, accessibility, functionality, languages, and more. From there, we can confidently define a creative brief. With a variable font, this includes the style and characteristics, but also the design space and axes parameters (weight, width, optical size, italic, or slant).

If a brief is fairly simple, for example a display typeface that flexes to fit packaging sizes, we would consider the width axis. This would allow the typeface to stretch from its narrowest to its widest width, and any width in between. With other briefs, another axis might be more appropriate. For example, if designing a single variable font to support both display and text sizes on the web, the optical size axis (which adjusts proportions, contrast, stroke weight, etc.) would be used.

When designing a variable font family from the outset, the process is much simpler as you start with a single origin outline. It also provides a lot more opportunity, as you can design the font to make the most of the technology that’s available.

We made Aktiv Grotesk variable because it’s pragmatic and rational with just a hint of warmth, a combination that’s hard to find in grotesque typefaces. We wanted to enhance its practicality with a variable font, allowing designers to make the most of the font family’s huge range of weights, styles, and scripts in an economical way. On the web, for example, more weights and styles can be used in combination without impacting page load-times. This is because the variable font format intelligently compresses the information needed to define a whole family into a single file, much smaller than the sum of the individual fonts.

As our largest font family in terms of script support, Aktiv Grotesk (which you can try for free here) will be our first variable font supporting several world scripts. Initially, Aktiv Grotesk VF will support the Latin script, but we will soon be releasing a design update of the Arabic as a variable font with Thai, Cyrillic, Greek, and Hebrew scripts following throughout 2020.

INT: How do you think this is changing the role of a type designer?

Variable fonts do hand over more of the decisions to the users of the fonts.

As type designers, we have more control over more situations. Previously, typefaces have been stretched and squeezed if they didn’t fit, or even outlined if the weight wasn’t quite right. With variable fonts, we allow for these things, but on our terms, with a lot more finesse than you’d get if you mechanically alter fonts in creative software.

But I don’t think the role of a type designer is really changing. We’re still providing an essential building block for visual communication, and will continue to do so, just in a different format.

INT: How do you think it will change how people apply and use type in design projects?

I think it will give people more ways to put type at the centre of a brief, using variable font technology to create visual variation, rather than relying on other visual elements. It should also give people more freedom to experiment with fonts in digital environments, without worrying about increased load times. This will hopefully lead to more typographically rich layouts and better reading experiences.

Beyond that, variable fonts have the potential to be much more interactive when connected with real-life data. Fonts could be designed to adjust to the lighting in a room, noise, temperature, weather, statistics, or more, changing its style to communicate more effectively.

INT: Who else is doing exciting work in the variable fonts sphere?

Described as a "high-contrast blobber", OHNO Type’s Cheee typeface is a great example of what can be done with variable fonts outside of the five official axes currently defined in the OpenType specification.

David Jonathan Ross also freely experiments with variable fonts as part of his Font of the Month Club. The January 2020 typeface, Gimlet X-ray, is an experimental typeface that showcases the internal mechanics of a variable font.

Cassie Evans from Clearleft is an interesting person to follow as she combines web animation with variable font technology, essentially exploring the technology’s practicality and expression. She recently played around with the variable font Marvin by Mathieu Triay.

INT: What projects have you seen exploring the potential of variable fonts?

We’ve seen a number over the past year, some more focused on expression and others more functional. Studio Dumbar’s Cities in Motion campaign is a great example of variable fonts taking centre stage, introducing something unexpected, to break the rhythm of advertisements and intrigue passers-by.

It’s Nice That’s new website also showcases variable fonts; each article title is set in LabilVariable, which allows for varying degrees of wonkiness to match the tone of the content.

In our own client base, we’ve also seen some more functional applications. REDspace, a Canadian software development company that builds large-scale, flexible, and custom platforms for global media networks like WarnerMedia and ViacomCBS, recently implemented the variable version of our Objektiv font on a client’s website. The goal was to reduce download time, the number of HTTP requests, and lines of CSS – without losing support for older browsers.

INT: What is the future of this discipline, in your opinion?

As more and more people get familiar with the technology and its benefits, I think we’ll see a lot more practical usage; using a single font file online to create a clean hierarchy, while dramatically reducing load times, or having a font that changes size depending on the reader’s age or how far they are from the screen.

As their popularity increases, we should see more official axis options added to the OpenType specification, meaning they’re fully supported by most major platforms. This in turn should improve confidence, and lead to more experimentation.

We’re only just scratching the surface of what variable fonts can do within more interactive and immersive spaces. I think we’ll see a lot more progress and experimentation with that as time goes on.