As the web continues its ever-changing nature, technologies are rapidly evolving—whether it’s the rise of SVG’s to help reduce image file sizes or a plethora of other such tools to make everything more lightweight and bearable for the mobile web.

The latest installment is in the realm of web typography and is being called “variable fonts.” Via FastCoDesign:

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?

You may be wondering, “ok, so what’s the big deal with the new “variable font?” How is it an improvement? The article continues:

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.

3064032-inline-i-1-how-apple-google-microsoft-and-adobe-are-looking-to-change-fonts-forever
Image credit: Erik van Blokland

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.

The bottom line? This updated font format could enable designers and developers to employ vastly more complex typography on the web and in a variety of digital mediums at a fraction of the file size—which is good news for just about everyone.

Check out the rest of the article, here.

Related:

Never Miss a Resource!

Sign-up to receive the latest Rightly Designed tools, tips, and resources via Email.

Your information is never rented or shared. Unsubscribe anytime.

By

Thomas is a Graphic Designer, Web Developer, and founder of Rightly Designed. For over a decade, he’s had the privilege of working with a wide variety of individuals and organizations, spanning from traditional publishing houses to numerous independent professionals.

Share Your Thoughts

Your email address will not be published. Required fields are marked *