What are variable fonts and how do they benefit UX?
The World Wide Web is overwhelmingly made up of text. Websites, social media, messaging apps – all of these rely on text to get their point across.
In 2006, the founder of design agency Information Architects, Oliver Reichenstein, wrote in an essay that, “95% of the information on the web is written language.” While the balance has undoubtedly shifted towards images and video in the years since the essay was written, the point that Reichenstein was making still stands: in a web dominated by text, typography – the art of lettering is incredibly important.
If you want to fine-tune the user experience of a website, you need to pay attention to how the text is presented, and that means understanding typography.
In her comprehensive UX guide to typography, Becca Kennedy explored how typography and the choice of typeface (a typeface is a font ‘family’, like Arial – as opposed to an individual font, like Arial Black) can affect legibility, readability and accessibility.
So, fonts matter to UX. Which is why a new development that gives type designers and webmasters much more control over how fonts are presented visually is a huge deal for UX. I’m talking, of course, about variable fonts.
In this article, I’ll be examining what variable fonts are, how they work, and why they can be of enormous benefit to the user experience of a website.
An animated example of responsive lettering, created by Erik van Blokland
What are variable fonts?
Remember what I said just earlier about the difference between a typeface and a font? Normally if you want to use several different types of font on your website, you need to load up each font file separately. So Arial Black, Arial Narrow and Arial Rounded MT Bold – each one of these fonts belongs to the same typeface (Arial), but each one has to be used individually.
If you want a different look for your Arial typeface (slightly bolder, or slightly narrower for example), you need to find a font that matches what you’re looking for. But the level of fine-tuning you can achieve is limited to the fonts you have available, and each font that you call on requires a separate file to be loaded, which weighs down your webpage.
This screencap of the Roboto web font folder, made by Anna Monus, shows the individual font files that can make up a single typeface.
Variable fonts change all of that. A variable font, in the words of John Hudson (whose blog post, Introducing OpenType Variable Fonts, first introduced variable fonts to the world), is “a single font file that behaves like multiple fonts.”
This one file contains hundreds, if not thousands of different possible font variants, allowing for an immense amount of fine-tuning and control over how fonts appear on the page, while massively cutting down on the time taken to load them. Tim Brown, Head of Typography for Adobe Typekit and Adobe Type, describes it like this:
“Imagine condensing or extending glyph [character] widths ever so slightly, to accommodate narrow and wide viewports. Imagine raising your favorite font’s x-height just a touch at small sizes. Imagine sharpening or rounding your brand typeface in ways its type designer intended, for the purposes of art direction. Imagine shortening descenders imperceptibly so that headings can be set nice and tight without letters crashing into one another. Imagine this all happening live on the web, as a natural part of responsive design.”
An example of the different variants possible with the Gingham variable font as the font is adjusted along two axes: width (left to right) and weight (top to bottom).
Variable fonts were first announced in October 2016, the result of a collaboration between tech giants Google, Microsoft, Apple, and Adobe. The idea behind them, however, is not a new one.
In the 1990s, two technologies were developed which aimed to achieve the same thing that variable fonts are now capable of: Adobe’s Multiple Master Fonts and Apple’s GX Variations.
Neither saw much support or adoption, for reasons that you can read about more fully in this blog post by Thomas Phinney, but the bottom line was that the technology was ahead of its time. Tech companies already had visions of what was possible, but the infrastructure wasn’t there to enable widespread uptake.
Things are different this time, most notably because the tech industry has had a good 20-25 years to learn from its mistakes. Variable fonts have been developed and launched by a coalition of big tech companies, rather than individual factions competing against one another. This greatly aids support and adoption – especially since three of those companies own three of the major web browsers of the era. (Four, if you count Internet Explorer, but I really don’t).
Another important factor is that the web as a whole has shifted away from static design towards fluid, adaptive and responsive design – design that adapts itself to the many different screen sizes we now use to access the web. Variable fonts bring typography in line with that trend.
The shift towards fluid and responsive design
We mostly think of responsive design in terms of layout: the way that webpage structure shifts and changes to accommodate different screen sizes, with elements shrinking and growing to help the user easily navigate the page across a range of devices.
A simple example of how responsive design can cause webpage layout to adapt to different screen sizes | Image via Wikimedia Commons
It isn’t just layout that needs to adapt, however – as we’ve established, websites are largely made up of text, and until variable fonts came along, text on the web was strictly static.
Variables like margins, line spacing and font size were all responsive, but other important variables like contrast, weight and optical size (which determines how legible a font is at different sizes) were not. As Nick Sherman wrote for A List Apart in 2015, using static fonts while everything else about web design is responsive is like “an ice cube floating in a sea of otherwise fluid design”.
The introduction of variable fonts means that the typography of a webpage can finally be responsive, too, which as you can imagine, significantly improves the UX of a website across different types of device.
The UX benefits of variable fonts
Variable fonts are still relatively new and aren’t yet universally supported by all web browsers and applications, but they are becoming more and more widespread.
According to Richard Rutter’s January 2018 article ‘How to use variable fonts in the real world’, more than 60% of browsers on desktop and mobile devices support variable fonts, with the latest versions of Chrome, Safari, Firefox (on Mac only) and Edge all offering support.
There are also relatively few commercial variable fonts available for use, but a growing number of free and experimental fonts (such as Gingham, which appeared earlier on in this article) can be downloaded and used by web designers and webmasters.
With that said, why should you use variable fonts on your site? Specifically (since this is a UX blog after all), how can using variable fonts benefit your UX?
Lighter, faster-loading webpages
As mentioned earlier on, variable fonts offer the flexibility of multiple fonts with the speed and convenience of a single font file. Not needing to load an individual font file for every font on a webpage can dramatically reduce that page’s weight and increase its loading speed. This is a huge boon to user experience, particularly on mobile.
Better font legibility, readability and accessibility
For the best possible user experience on your website, your typography should be legible, readable and accessible.
The legibility of a text refers to how easy the characters are to distinguish from one another, while readability refers to how easy it is to parse and understand. Finally, accessible typography involves things like ensuring that a font has sufficient contrast against the background, which benefits users with visual impairments.
Variable fonts give webmasters more control over each of these elements, allowing them to fine-tune characteristics like optical size, weight and width to maximise the legibility, readability and accessibility of website text.
A more consistent user experience across devices
It goes without saying in today’s mobile-first world that websites need to ensure they have the best possible user experience on mobile, but more than that, the user experience needs to be consistent across devices.
Device-switching and cross-device multitasking are increasingly common user behaviours: a 2014 study by GfK found that more than 60% of adults in the US and UK used at least two devices every day, with more than 40% starting an activity on one device and finishing it on another.
With variable fonts finally making text responsive to different devices and screen sizes, not only does this improve overall mobile UX, but it also ensures that the user experience of the same site across different devices is as smooth and consistent as possible.
Rebecca Sentance is the editor of digital marketing websites ClickZ and Search Engine Watch. Having spent most of her life on the internet, she has somehow managed to wrangle her way into writing about it for a living. When not publishing articles on digital marketing/SEO/UX, she can be found blogging about journalism on isitjournalism.wordpress.com or tweeting about nerdy things as @rainbowbex