Adobe Creative Cloud

Variable Fonts are Coming — Here’s Why You’ll Love Them

Getting type both to look good and load quickly is a common challenge for designers and developers. Good typographic design often requires many different font variants — each with their own file — but using multiple fonts in a website or app will slow down load times. These forces of performance and expression could be seen like opposites that don’t mix, like oil and water. But about a year ago smart people put their heads together to solve the problem.

“Apple, Google and Microsoft initially came at this with a lot of interest in the file compaction aspect of fonts on devices,” recalls Sairus Patel, font technology principal and strategist at Adobe. “Adobe had invented Compact Font Format (CFF) technology in the mid-nineties. That was our first major contribution to OpenType. So we understood the need for compactness. This time, we came up with a variable version of CFF for this effort. We were excited about the typographic possibilities.”

OpenType Variable Fonts — a solution that delivers both form and function — is a major leap forward for digital typography. The format will make a true responsive design experience  possible — allowing fonts to adjust for better readability on small screens without losing integrity — and we know designers and developers will love it. Here’s why.

Integrity at Infinite Variations. With OpenType Variable Fonts, type designers will be able to design and sell a font that flexes for designers and readers in the same ways that the type designers intended. With variations possible across 64,000 axes, the options are endless.

Credits: CJType featuring the Variable font Dunbar

“You’ll have infinite variability,” says Brian Barrus, president and creative director of Studio Element. “Right now you may have heavy, medium, light, and bold options for weight. With variable fonts you’ll have infinite options in between the standard weights and across the spectrum. Additionally, you will be able to condense or extend the type as needed, without distorting the letter forms.”

Because OpenType Variable Fonts have so many features, type users are less likely to commit type cripes like stretching, faux bolding, slanting, etc. Variable fonts also give type designers a whole new way to offer styles for different uses — such as very small type size or small caps.

“When type designers draw a typeface for use at very small sizes, they make different decisions about the shapes and spacing than they would if it were to be used at very large sizes,” explains Tim Brown, head of typography for Adobe.

Right now, different fonts in a type family — whether large, small, lightweight, condensed, expanded, bold, or other — are all housed in separate files. Now, with Variable Fonts an entire family of fonts with infinite variability can be included in a single file.

A Single File Instead of Many. With all font variability in a single file, web font implementation is simplified. One file can do the work of what you previously needed many files to do. With fewer calls to a variety of font files and smaller file sizes, page loads are faster and the customer experience is improved.

“There are significant short-term gains,” says Tim. “You’ll see faster, better-looking websites because a variable font is smaller, but includes the same number of variations. There are also fewer HTTP requests, which means the whole web experience feels snappier.” But that’s just the tip of the iceberg. “Then there’s the futuristic stuff — like flexible layouts that also include the kind of adaptability that’s built into variable fonts. And how do we articulate these decisions in CSS?”

Because the variable font format was created in collaboration with Google, Microsoft, Apple, and others, Adobe expects widespread industry support and adoption. Having a flexible font format that works consistently across platforms is a huge benefit to designers, developers, and customers.

OpenType Variable Fonts Exist Today

While variable fonts already exist today, Apple’s Skia and San Francisco are early examples, there is still more to do. These first fonts will allow designers and developers to experiment with and learn about the new format. But once they are fully in the mix, variable fonts have the power to deliver meaningful long-term gains industry-wide.

For mainstream adoption of variable fonts, several things still need to happen. For starters, companies will need to integrate variable font support in their products — and that means new tools to support type designers and creatives.

Next, we need rendering engines that can show the complicated fonts – For things like browsers and design software. Finally, to design with variable fonts, we need to be able to articulate design directions with CSS – every decision about how something looks on a web site is in CSS, so CSS must explain to a browser how that font should flex in different formats, similar to the way responsive web sites communicate instructions.

The bottom line is that variable fonts will allow your type designs to flex in ways that static fonts can’t. Now designs for digital media, regardless of the device type or size, will be able to look they way you intend them, and perform in a way the customer appreciates.
To keep up on the latest developments with variable fonts, check out the Adobe Typekit Blog.

Creative Cloud, Inspiration, Typekit

Join the discussion

  • By Gordon Wagner - 4:45 PM on February 21, 2017  

    Remember reading about this in the Co-Evolution quarterly about 1981?