HAVE A serious image problem. A font that looks great on your Mac might look bloated on mom’s Chromebook or blocky on a friend’s Nexus 6. Send them a funny listicle and they might never find out why No. 11 will amaze them, because the type is such a nightmare they don’t bother reading.
Variable fonts solve this by adapting fluidly, in real-time, to look great on any device or platform. They also save space, by providing the flexibility of multiple fonts in a single file. The ideas behind variable fonts have been around awhile, but the technology has only now caught up with them. Even if you’re not a developer or a typography nerd, this is a big deal.
An Unlikely Partnership
How big? Well, Apple, Google, Microsoft, and Adobe are working on it—together. These unlikely collaborators, who are the four largest platforms for digital typography, unveiled variable fonts last week. “For hundreds of years we made things that were static,” says Tim Brown, head of typography for Adobe Typekit and Adobe Type. “Now we have to design things that have a typographer’s brain built in so they can respond to different conditions and still look good.”
Variable fonts work like—wait, let’s back up. Fonts as they’re used today rely on individual files for each style. The words you’re reading now use a font called Exchange text. It is a single font file. Italics require a different font file. Bold, another file. Bold italic, still another. And so on. Font files comprise a font family. You’ll need all of them if you want each style to render on a webpage, app, whatever. The more files you add, the more bandwidth you consume. That slows everything down, which is why it takes text-heavy sites with many fonts a long time to render.
A variable font is essentially a font family packaged in a single file. It works by defining how the font style can vary using one or more axes in a so-called “design space.” Oops. Jargon. Sorry. Imagine a designer is using Gotham (the defining typeface of Barack Obama’s presidential campaigns), and wants to vary its weight. She can define Gotham Thin as one end of the axis and Gotham Ultra at the other, then access a version at any point along that continuum, creating a virtually infinite catalog within one file.
She can do the same thing with other design parameters to create the ideal style for a given device, application, or use. These intermediate shapes are defined not by individual files, but by how much they differ from their extremes—a trick that makes a variable font file up to 70 percent smaller than a conventional font family. During his presentation in Warsaw, Peter Constable of Microsoft said a conventional five-weight font family that includes light, semilight, regular, semibold, and bold requires the 656kb file. The same family as a variable font requires just 199kb. Smaller files mean fewer round-trips to the server and faster renders—something that makes web developers send slow-clap gifs on Slack.
“The Uses Are Just Countless”
In developing countries where Wi-Fi and 2G are luxuries, faster page loads save everyone time and money. But even if you enjoy unlimited data, the improvements are significant. Imagine an Internet free of schizophrenic type design, fonts that adapt seamlessly to changing backgrounds, or text that resizes based to suit the orientation of your phone.
The technology builds on models Apple established with TrueType GX in the mid-90s and Adobe developed with Multiple Master fonts. They didn’t catch on, but people expect variable fonts to succeed because consumers want consistency. “Anyone working with type now can’t afford to have it not work on all platforms,”says Thomas Phinney, president of Fontlab. “This technology is so cool because the uses are just countless.”
Developers and font geeks are already diving into the possibilities outlined in the specs released last week. But there’s more work to do. Designers must figure out which fonts work best with the technology. Consumers will need rendering engines capable of making all those split-second calculations, and browsers that will work with those engines.
Engineers at Apple, Google, Microsoft, and Adobe have spent years developing that infrastructure, and the companies expect quick adoption. Google’s open source font production pipeline supports variable fonts, and Google hopes to bring it to Chrome and other products ASAP. Adobe expects to release an updated tool for building variable fonts by the end of the month. And Microsoft says it will support variable fonts on all of its products by next year. And designers like Phinney are assembling variable fonts right now, eager for the day when everything, everywhere, is responsive.