Websites / December 18, 2017
Subscribe to receive our weekly e-flyer or other announcements.
Shopify just named Variable Fonts as the number one web design trend to watch for in 2018.
A part of responsive typography, a variable font is “a single font file that behaves like multiple fonts” and allows for one typeface to change responsively to create numerous variations of a font. This means instead of needing several files for a font such as Arial (Arial, Arial italics, Arial black, Arial bold, Arial narrow, Arial rounded, etc.), you would be able to use one font that would contain all the variations of a font’s height, width, weight, and slant to make it look like its numerous font files that normally make up the Arial family. This is revolutionizing the digital world.
Jason Pamental, the Senior Director of Design & Technical Strategy at Isovera, and a thought leader and pioneer in the use of variable fonts and responsive typography, sees variable fonts as having a more significant impact on web design than anything since responsive design itself. Why? Because of the monumental effects that they will have on site performance, design vocabulary, user experience, bottom line costs, and branding.
47% of customers expect webpages to load in two seconds or less, and 40% of people abandon a website that takes more than three seconds to load–this number only increases to 53% when it comes to mobile sites. This being said, we know that user experience and engagement can be attributed to load time.
Since load time is directly related to web performance (a slow loading site has poor performance), to create positive user experience, it is crucial to optimize site performance. Variable fonts play a role in this, as they use fewer files than traditional fonts. A reduced number of files means a significant speed up of download time, resulting in a faster load time and increased performance.
Branding and Voice:
While a cover of Vogue can have three typefaces and roughly nine weights to its text, Vogue’s website uses significantly less due to those concerns about performance. In muting the number of typefaces and weights, Vogue is also muting its brand voice. Think of print pieces such as GQ, The New York Times, or Fashion Magazine.
Some of the paper’s voice is lost as the paper transitions from print (left) to electronic (right)
Images from https://www.nytimes.com/
Does the text of their websites speak to you as powerfully as their print counterparts? Probably not – there simply aren’t as many variations to type being used. Variable fonts are important because they are specifically designed to allow for many variations of type, enabling brands to fully express identity, and more accurately voice who they are to stand out from the crowd.
Hosting websites costs money. And the more bandwidth your site uses, the more it costs to run. If you can reduce the overall amount of data served by replacing six or eight font files with one or two, sites could see a massive drop in their bandwidth costs over the course of a year. Consider that Google serves over 26 billion instances of Open Sans every week! If they could reduce the total number of font files loaded per site, across 20 million sites that use Open Sans Google’s font server – you can imagine that their savings could be in the millions.
Aside from hosting costs variable fonts also increase overall site performance and strengthen a site’s image, voice, and brand. Though elements like these do not have a direct monetary cost, they certainly affect the bottom line and play a large role in agency or personal brand reputation, therefore making variable fonts valuable.
Now that we know what variable fonts are and why they’re important, the next step is to watch for their rapid spread. They’re currently being supported in Chrome (on Mac and Windows), and Safari in High Sierra. Operating system-level support has shipped in MacOS High Sierra and Windows 10, and they are supported in both Adobe Illustrator and Photoshop. Support is also in development in Microsoft Edge and Firefox. In addition, Adobe, Microsoft, and Google are currently converting their existing type libraries into variable fonts, even as you read this. With all of the hustle and bustle of variable fonts picking up, who knows – variable fonts just might be more than the “number one digital design trend for 2018” – they could end up being the “number one digital design standard in 2019!”
To learn more about variable fonts, check out John Hudson’s post on OpenType Variable Fonts and Typekit’s post Variable fonts and flexible design, as well as Jason Pamental’s talk on Variable Fonts and the Future of Web Design and his insights from “One year in: an update on Variable Fonts”.