Google, Apple, Adobe, And Microsoft Are Quietly Developing A New Type Of Font
What are variable fonts, and why are some of the biggest tech companies on the planet throwing their weight behind them? [fastcodesign.com article]
As competitors, Google, Apple, Microsoft, and Adobe are normally hard-pressed to agree with each other, and it’s especially rare when design is involved. But two weeks ago, these four frenemies signed off on a major new standard—one that could revolutionize digital typography. It’s called a variable font.
The new standard is part of an update to OpenType, the most advanced cross-platform standard for scalable computer fonts, which was created by Adobe and Microsoft back in 1996 and which is still used for the vast majority of modern digital fonts. And these so-called variable fonts are designed to be flexible and adaptive within OpenType, aiming to do for digital type design what responsive design did across the web. But what exactly is a variable font? And why are Apple, Google, Adobe, and Microsoft so eager to see them in the wild?
THE PROBLEM WITH FONTS
For most people, the words font and typeface are interchangeable, and that’s mostly okay. But to understand variable fonts, we need to get into the weeds a little bit. We tend to think of a “font,” let’s say Helvetica, as being a single design that comes in different weights (bold, italic, thin, compressed, etc.). In actuality, though, Helvetica is a typeface family, which contains numerous different fonts: a totally separate design for Helvetica Bold, another for Helvetica Compressed, and so on.
On computers, each of these different fonts is essentially a totally different file, which means that if a designer wants to use multiple weights of a single typeface in their app or website, they need to have their users download each one. That increases app file sizes and web load times—so right now, most designers don’t include multiple fonts from a single typeface in their designs. Instead, they rely upon rendering engines to fake it, shrinking, slanting, or blowing up a font according to what’s needed.
For instance, properly bolding letters in a typeface requires a separate bold font to do correctly, but almost all rendering engines are happy to fudge it by smearing a font to be wider, in a process called faux bold. Italics can be faked the same way through slanting. The problem with this approach is twofold. First, they often look hideous. A properly designed bold and italic font is more than just a smeared or slanted copy of a baseline font, with letterforms that are specifically tweaked to be more readable in that format. But besides that, faking different font weights and styles isn’t handled consistently across rendering engines, producing results that look different in, say, Chrome than they do in Firefox.
To sum it all up? Right now, using multiple weights and sizes of a single typeface properly requires a bevy of different, individually loaded fonts, bloating the file sizes of apps and the load times of websites. Computers can fake it, but the results are often gross, and they’re not consistent across platforms and browsers.
[Photo: courtesy Erik van Blokland]
HOW VARIABLE FONTS CAN HELP
So how will variable fonts help fix this problem? Basically, by giving type designers their own version of responsive design: a single font file that can dynamically morph between different weights and sizes as its designer intended while remaining consistent across platforms.
“A variable font is a single font that works like multiple fonts,” explains Tim Brown, head of typography for Adobe Type, who helped solidify the variable font standard. “They’ll lead to faster, better websites; smaller app sizes; more flexible typography; and richer typographical palettes.”
Existing OpenType fonts are what are called outline fonts. Inside the file, each letterform is defined as a mathematical series of lines and curves, which your computer draws on screen in real time. Compare this to bitmap fonts, which are essentially graphic files limited in resolution; outline fonts have the advantage that they can be infinitely scaled without resulting in pixelation. They’re a collection of instructions, not a collection of letters.
[Photo: courtesy Erik van Blokland]
Variable fonts add weights and other design tweaks to OpenType by adding a new set of instructions to the format, allowing a font’s baseline design to be tweaked across 64,000 different axes. In other words, a variable font can properly bold, say, the letter “B” not by smearing it, or by downloading a separate font file, but by sending the computer precise mathematical instructions on how to turn a “B” into a B. (“Widen the main stroke by 10%, increase the apertures by 5%, and thicken the shoulders by 7%.”)
Nor is a variable font useful only for bolding. For example, the OpenType format previously allowed fonts to be scaled to any size. But a font that is readable at 12 points on a desktop might be much harder to read on your Apple Watch, or as small print on the bottom of a magazine page. This is why many typeface designers, like Tobias Frere-Jones, create variations of their fonts specifically designed for smaller screens and print sizes. A variable font could contain such instructions, without being a separate file.
Heck, variable fonts are so powerful, there’s technically no reason they can’t contain multiple typefaces. A single variable font could potentially morph between Zapfino, Futura, and Wingdings, without requiring three different font downloads. Brown tells me, though, that variable fonts are really designed to interpolate between different variations of a single design, and not be typeface transformers. “Having multiple typefaces in a single variable font is theoretically possible, but off the top of my head its benefits are unclear and the likelihood of its success is minimal,” he says. “Given how variable font axes are designed, and how a few implementation ideas are already taking hold, it would be extremely uncommon.”
WHAT HAPPENS NEXT
Given the potential of variable fonts, it’s no wonder that Google, Apple, Adobe, and Microsoft are pushing hard to make them a reality. Variable fonts will save significant space in apps and operating systems, cutting down on download speeds, load times, and server costs. They’ll make the web typographically richer, and give designers new tools to create beautiful designs. Variable fonts will also help create single fonts that work as well on large screens, like desktops, as they do on modern devices with small screens, like wearables.
“We all want this format to succeed,” Brown says. “All of our technologies benefit from fonts that are smaller, faster, more flexible, and look good everywhere, always giving readers what they expect to see.”
For variable fonts to take off, though, it will require more than just Google, Apple, Adobe, and Microsoft’s pledge to agree on the standard, though. Those companies will need to implement variable font support into all of their products. Meanwhile, there are no real variable fonts yet, so type designers will need to create them, with tools that have yet to be developed. All of this will take time.
Brown says that while he can’t say when variable fonts will be commonplace, he thinks it’ll be sooner rather than later. “Type designers are already used to thinking about how the different fonts in a typeface relate to each other, and font design tools already have a variable font-like interface,” he says. “It’s not a big jump from there.”
