Something Marvelous Is Coming: Variable Fonts

Thin. Bold. Condensed. Extended. The variety of fonts available today are seemingly limitless - UNLESS you want to do something like have a fast-loading website. Then you’re better off using fewer choices. Why? Because multiple fonts and their variations take up huge amounts of file space. Which requires more information to load into that nifty site you’re so proud of. Which makes it slowwww. And on some browsers (like Firefox and Chrome) it may display a default font until the page is fully loaded. It might even look different on a Mac vs. a PC. Definitely not what you intended your readers to see. Variable Fonts to the Rescue! Like an Avengers team of typography heroes, Adobe, Apple, Microsoft and Google have joined forces to support a new standard called OpenType 1.8. So what’s the big deal? Now you can basically stick everything into a single, highly optimized file. Instead of downloading a separate file for each font style or width, your site only needs to make ONE network request to access ONE file for ALL weights and styles of a typeface. In other words, it’s a single font that behaves like multiple fonts. [caption id="attachment_62794" align="aligncenter" width="520"] For Example: Look how many variations are possible in this animation above. Normally this takes take many separate font files. But it’d take just a single variable font. a significant reduction in the number of font files and file size required.[/caption] More Superpowers: Responsive Typography Variable fonts will also help with your responsive Web design, allowing you to adapt for the many screen sizes and devices that people will be viewing. Type will have the power to shrink, grow, gain weight or get thinner seamlessly. Kinda like Antman meets the Hulk. Which means you’ll be able to generate the exact variation you need, and respond to factors that influence readability like viewport size, viewing distance, contrast, ambient light and user preferences. It works like this: Fonts are built on a number of axes, each one controlling a different aspect. Variable fonts give you greater control by assigning a point value to EACH axis that will affect the font’s final look — as shown below. And it’s good news for type geeks (like me) who still get excited over printed design. Now we can condense or extend glyphs (specific shapes of letters), customizing them for a specific look. We can sharpen or round a typeface, shorten the descenders, or raise a font’s x-height in our never-ending pursuit of truth, justice and the perfect layout. Because, after all, bad typography is villainous. It’s not a perfect world. Yet. Right now, there aren’t enough variable fonts to go around. Type designers need to make more and be sure they work on each system. And we’ll need applications called “rendering engines” that work behind the scenes to actually show the font variations. Which means browsers and design software will have to support those applications. It’ll take time to for font developers to convert and develop their current fonts to the new format. Browsers, design software and third-party software will have to adapt their apps to the new format. Like past font formats (EPS, TrueType and OpenType) this new format could take as long as a decade to be fully implemented. As a designer, I’m excited to see this new format come to life. The infinite, perfectly drawn font variations are very exciting and can’t come fast enough. Yet we’re on our way. The biggest companies behind operating systems, design and the Web have all collaborated on the new format. Notable independent contributors are already refining their type standards. It’s a brave new world ahead. Up, up and away.

Design

Something Marvelous Is Coming: Variable Fonts

Patrick Fultz

About

Subscriptions

Events

Publications

WORK SMARTER - LEARN, GROW AND BE INSPIRED.

Subscribe today!

Patrick Fultz