Digital typography is about to be revolutionized thanks to a brilliant, unlikely collaboration between Apple, Google, Microsoft, and Adobe, who we all know are typically competitors in the tech-world. The new update to OpenType, the standard platform for digital and scalable computer fonts, will include something called Variable Fonts. You may not realize it, but this is a pretty big deal for everyone, even if you’re not a typography geek.
For the Non Type-Geeks
Here’s a little knowledge to help you understand the significance of this new technology. In order to see different fonts on websites the way they are intended, we need to have those exact fonts installed on our computers. If the font is unavailable when loading the page, the website will automatically pick “the next best” font to display, in which most cases is in no one’s best interest. One more thing you should understand is the difference between a font and a typeface. No, they’re not the same thing!
Most people are under the assumption that the terms font and typeface are interchangeable. Think of a typeface as an entire family and a font as a family member. For example, Helvetica is a typeface – a family consisting of multiple fonts which include Helvetica bold, italic, black, condensed, and so on. In order to see these font variations, we must have each individual font installed on our computers. Unfortunately, using multiple fonts in web design slows down website load time. This makes it difficult for designers to create the looks they intend for your visual pleasure and the best legibility. Not only does using multiple fonts slow down load time and frustrate us all, but the actual bold and italic versions of the typeface aren’t even being used! Instead, we rely on the browser to “fake” the look of the fonts by blowing up, slanting, or squishing them. This results in inconsistent fonts across different browsers. The heading font on your website may appear as intended in Safari, much thinner in Chrome, and extra chunky in Firefox. The same goes for different platforms and devices, allowing for an endless amount of unsightly and unexpected font possibilities.
How Variable Fonts Will Change the World Wide Web
Variable Fonts eliminate the need for “faking” font variations. A variable font is essentially a responsive font. Similar to a responsive website, which is when a website is designed to change its layout depending on the device is it being displayed on – desktop, tablet, or mobile, variable fonts will have the capability of morphing between bold, italic, condensed, and more. Not only will the fonts display as intended and include many more options for designers, but it will also allow for shorter page load time.
[Photo: courtesy Erik van Blokland]
How does this work? Variable fonts can bold a typeface by sending your computer a numeric code based on percentages that tells the browser exactly how bold the typeface should be in each curve and corner of the letters, creating the perfect font. The possibilities with variable fonts don’t end at different weights, either. They can also morph between different sizes making the font size appropriate for the device they’re being read on.
As exciting as this is, there’s a bit of a process to go through to make this happen. First, all four companies need to implement the necessary browser and device support, someone, assumingly Adobe, will need to develop the tools and programs required to create the fonts, and then type designers can start cranking out the beautiful, variable fonts we’ve all been waiting for. Although, since most websites developed today are designed in a responsive format, it isn’t a far-fetched concept so we shouldn’t be too far off from seeing variable fonts in our browsers.
[Image: From John Hudson, Introducing OpenType Variable Fonts]
Tell us what you think!