The Power of Variable Fonts: An Interview with Jason Pamental
Variable fonts are reinventing type on the web. Jason Pamental discusses benefits, adoption and a promising new concept that is set to massively improve the performance of web fonts
--
Traditionally, typography on the web has been constrained by the need to balance it with performance. Variable fonts — which enable many different variations of a typeface in a single font — not only address the technical issue by using fewer files, resulting in faster load times, but also offer new creative opportunities. Web design pioneer Jason Pamental is convinced that they are the future of type, and even design as a whole, on the web.
“Performance is the first piece of design that a user encounters,” he explains. “We’ve had it drilled into us that we need the text to show up quickly on the screen, so people can start to interact. So we use fewer fonts, and that gets passed off as good typography. But it’s not. Effective typography uses a whole range of weights, widths and implementations. It creates strong contrast, visual interest and hierarchy. Variable fonts allow us to be much more creative and intentional. They give us the ability to create a more compelling experience that’s tailored to exactly what the user needs. The promise for design on the web is simply ground-breaking.”
Since their introduction in late 2016, Jason has been extensively researching, writing about, and working with variable fonts as well as spreading awareness at events and for in-house teams all over the world. After almost 25 years in the industry, he decided he wanted to have a bigger impact and improve typography on a broader scale rather than just one site at a time, so he quit his agency job and — realising variable fonts’ potential — began to focus on them full-time. His work includes educational materials (for example, a guide for Mozilla’s MDN site), demos for Monotype and Type Network, and a ton of resources on his own site.
From experimental to commercial use
Jason firmly believes that typography is the most foundational element of design and central to tying together brand, content, and the user in a cohesive, engaging and usable experience. And so he is on a mission to help organisations, teams, and type designers use variable fonts to unlock the full power of typography and make the web more readable and visually interesting.
Browser support for variable fonts is now almost complete (with the exception of IE11 and a couple of Android browsers like Baidu and UC), and there are plenty of fonts to choose from. However, while they are perfectly safe to use in production, most applications so far have just been purely experimental.
We haven’t quite reached that tipping point yet but recently there have been some noticeable commercial applications that suggest we’re getting there. Jason last year worked with the digital services team of the State of Georgia to create a new typographic system for its web platform. It uses a variable font, while safely delivering the static web font version for all state employees, who are still on IE11. “We used CSS feature detection with @support to scope the use of the variable font,” Jason explains. “Browsers that support it will load that asset instead of a static one.” The system has now been deployed to over 40 sites and is being viewed by millions of people a month.
UX consulting firm Nielsen Norman Group, meanwhile, decided to use Source Sans Variable (an open source font released by Adobe) on nngroup.com simply because it was faster. “They didn’t change anything about their design,” Jason points out. “They just swapped in that asset because it decreased the page download size. Google has actually been doing this with Oswald, one of the top five web fonts, and they didn’t even tell anybody! Google Fonts started serving a variable version of the font on sites with enough different weights to warrant it, and they do that about 150 million times a day. It speeds up the performance without the need to change any of the CSS. The technology is really well proven in that respect.”
Even though they don’t use them in production yet, a lot of companies now order in variable fonts for their custom type. “I’ve just talked to a Fortune 25 healthcare company that’s getting custom type work done, and they’ve got variable fonts,” Jason reveals. “They don’t quite know what to do with them yet — hopefully, I can help them with that — but they had the foresight to learn enough about the format to get a variable version, too.”
Raising awareness of variable fonts
While variable fonts are fast picking up momentum on the web, it’s important to realise they work in print as well (Adidas, for example, have used them for poster designs and advertising). Previously, plugins had to be written to use them in design applications but adoption is slowly changing here, too: both InDesign and Sketch now support variable fonts. Pamental thinks these are market signifiers.
“If people see applications supporting variable fonts, they’re more likely to try them. The best way to work with them at the moment is in the browser but there are still plenty of designers who aren’t ready for that. They need to be able to incorporate them into their design process, work with them in Sketch and Illustrator, and then move into implementation on the web.”
Awareness is one of the biggest challenges that stand in the way of widespread adoption. Jason spoke at 20 events in 2019, and on average only half the attendees have ever heard of variable fonts. “Every article, podcast and conference talk helps, but we also need readily available stuff,” Jason says. “Google Fonts are now rolling out variable fonts in their API, so that you can start to use some really high quality fonts through their service. If designers and developers have stuff they can experiment with that they know is going to work, it will spread awareness and increase adoption. That’s what Google Fonts did the first time round with web fonts, and I think that’s what’s going to happen this time with variable fonts, too.”
The future of typography on the web
The design, technical and performance benefits are clearly a game changer but in his conference talks Jason now also covers how you can combine variable fonts with other CSS capabilities like custom properties, calculations and grid. “That’s where they’re getting even more exciting,” he enthuses. “It allows us to create a whole typographic system that scales. Instead of having a lot of fixed breakpoints, we can use maths. It works really well in design systems. We can quickly and easily tweak the system by reassigning a couple of variables. When we drop a component into a different part of a layout, for example, we might just need to change the low and high scaling values, and everything still moves together. Another example is light modes, the ability to invert the contrast of the OS and all applications that support it. When we set text and background colours and use custom properties and a media query, we can invert that colour palette with two or three lines of variable assignments, and that’s it!”
This technique can improve both readability and accessibility (for example, for users with low vision, light sensitivity or chronic migraines), another great benefit of variable fonts. “They allow us to fine-tune the typography or put the controls in the hands of the user to let them fine-tune it,” Jason explains. “This is one of the things that I’ve been playing around with more and more: what kind of controls can we create that would allow a user to request greater contrast. A surprisingly high number of people — around eight percent — use some form of high contrast mode in phones when it’s available. That’s a signal. As a designer I want to make the system work for everybody but I can’t know what everybody’s requirements are, so I want to design the system to have some flexibility and let the user select the light mode and the contrast level, while ensuring that the design’s integrity stays intact.”
Jason is also an invited expert on the W3C Web Fonts Working Group, which is currently tackling the performance problem of serving web fonts. “One of the issues has been the amount of data that has to be downloaded,” Jason points out. “So we’re working on an open standard called Progressive Font Enrichment, which is based on some work that Adobe, Monotype and Google have been doing. The idea is that when you view a page, the server will dynamically subset the font to download just the glyphs needed to render that page. When you then go to the next page on the website, it will serve only what wasn’t already delivered and patch the font file on your system. The more pages you access, the more of the font you end up downloading. Viewing a site will be faster to start with and get even faster with every subsequent page view as less and less font data needs to be served. It’s going to make the performance question disappear because no-one will ever have to load the whole font file. That’s a tremendous addition to our toolkit!”
The solution would reduce the overall download from around 100 to 200kb of font data for a Western language website to just 10 to 20kb, while subsequent loads might only be three or four kilobytes. It becomes even more significant for Arabic and Asian sites that typically would need font files that can weigh in at 2.5MB or even 20MB for languages like Chinese, Japanese or Korean. Previously, these sizes have meant that some sites were not able to use web fonts and better typography, but this could all change. Initial results look promising, and Jason is confident we’ll see improvements soon. Couple this new capability with variable fonts, and the combination could have a significant impact on the design of Western and non-Western language sites alike. As Jason writes in his newsletter, “after years of promise shackled to performance constraints, this will be nothing short of revolutionary.”
This article originally appeared in issue 328 of net magazine in 2020 and has been reviewed by Jason Pamental prior to republication.
