An Exploration of Variable Fonts
Variable Fonts are the latest addition to the OpenType font format and change the way we make and use fonts on desktop and web. In short, they offer the possibility to pack many different styles into a single font file. That means you can have bold, medium, light and italics all in one file. It also gives you the ability to transition smoothly from a style to another by animating values along one or more axes.
This new feature was introduced in 2016 by major players in the type world. Since then, it has seen rapid adoption in software and web browsers: right now, it’s supported in Photoshop, Illustrator, Safari, Chrome, Edge and soon enough Firefox (and hopefully InDesign).
At BBC R&D we thought this wide support was a signal that the technology is maturing, with a few fonts already available in that format. So, it’s also the perfect time to start thinking about how we can make use of this technology to improve the experience we provide for our users.
In order to better understand how variable fonts are made and what they can do, we invited the type designer David Jonathan Ross to lead an exploratory workshop on the subject. Together with 15 designers and developers from around the BBC, we covered everything from practical use in the near future to more experimental and experiential use cases enabled by this new technology.
Staying Creative
David made us do creative exercises throughout the day to warm up creatively. These really helped the group’s understanding of type, and particularly how it’s designed.
The first exercise was the apparently simple task to come up with an 11th digit. Everyone had a go at drawing a new glyph that would come after 0123456789. Their design had to fit with the rest of the digits, they needed to draw it by hand, and do a serif and sans serif version of it. That proved quite challenging but shed some light on the intricacies of type design and language as a whole.
The second exercise was called “the best thing to do after lunch” and consisted of coming up with as many different lowercase E’s as possible in 10 minutes. For that, everyone was given scissors, sheets of black card, and sheets of white paper. Cutting shapes out of these, they made three shapes: one black and two white. The white ones representing the counters (the white space inside the letters), they had to layer these three pieces to make an e. This was tremendously useful in understanding letterforms as shapes and not outlines, and also posed the question: if you had a variable font that could morph between all those E’s, what would you use it for?
Diving In
Besides the exercises, David also gave us a morning lecture that emphasised the two main benefits of variable fonts: efficiency and responsiveness.
Efficiency because once your single font file is loaded all your styles are loaded, so you save a number of network requests in the same way that using an image sprite reduces network load. That’s faster but also can help you avoid awkward situations like an important word missing from your headline. Although anecdotal, we’ve certainly all had a moment where the web page was completely blank because the font took too long to load. Well variable fonts come to the rescue with some file size savings on top.
The reason for the savings is that fonts are stored as a set of mathematical curves. Variable fonts give you the ability to interpolate between two or more set of curves called masters and as a result generate a number of intermediate weights without storing additional data.
Because you don’t store the middle states but only the extreme ones, you save a lot of space. Variable fonts have a fixed weight cost, so if you’re using more than two weights from the same typeface, a variable font version with two masters might be able to save you quite a few kilobytes. You’re essentially getting all the intermediate weights with the same constant file size.
The other benefit, and the one we focused on for the workshop, is the responsive aspect of variable fonts. As soon as you have an axis that can change the aspect of the typeface, you can make it respond to the user’s environment.
Brainstorming
With this in mind, the group looked at the different places they usually encounter typography and tried to identify the ways type gets in their way. Knowing that variable fonts can offer an amount of flexibility, could they be used to solve these annoyances? Later in the day, we explored the immersive opportunities of Variable Fonts through the design of new font axes.
During that process, we identified four areas where variable fonts can prove useful: responsive typography, accessible typography, expressive typography and immersive typography.
The group was divided into 4 teams of designers and developers. They were asked to focus on the effects a change in the type might produce rather than how the letterforms would change to achieve that effect. Wherever possible, we’ve tried to highlight how we think this could work in practice.
Responsive Typography
The first annoyance that came up very quickly among the group was legibility. Small white type on a grey background makes things a lot harder to read. What if we had a browser mode or extension that adjusted the colour of the background and type to increase the contrast automatically? This works even without any sort of variable fonts, but we can easily imagine the type getting thicker or thinner to achieve optimal legibility. Also, the browser could switch a display weight (that works for big sizes) to a text weight (for smaller sizes) if available — in case it had been used improperly (effectively overriding the site’s design). As opposed to a lot of the other ideas, this one didn’t rely on the designer using variable fonts correctly, but actually offered a way to fix problems caused by designers who favour form over function.
Different lighting conditions can create situations where the type isn’t as clear as it was intended. When you’re outside, your phone does a pretty good job of adjusting the luminosity of the screen to keep things legible. With a variable font you might be able to subtly change the contrast to make this experience even more pleasant. Given the appropriate sensors, the type could also adapt to your viewing angle and the distance between your eyes and the screen. Here the type adapts to your environment, not just your device. As it turns out, a lot of this has been already explored by type designers and you can read about how luminosity and distance affect readability in this article by Bianca Berning.
Taking that concept to the extreme, the type could adapt to your eye fatigue throughout the day, increasing its readability as the day goes and ambient light changes. The more time you spend on screen, the more comfortable the type becomes. However, this poses an interesting question: if we are able to increase reading comfort, shouldn’t we do that by default? The group briefly brainstormed about the purpose of making things less legible. The outcome of this was mostly to do with style and expression (otherwise, why isn’t everything in the same highly readable font all the time?), but also using it as a feature to obfuscate and hide things.
In this world where fonts respond to the environment, it’s important to ensure that fonts are aware of each other to harmonise. A team suggested that a typeface pair could have a shared axis that depends on one another. This way, one font could change based on the values used by the other. Variable fonts being flexible and configurable, they can result in variations that the type designer didn’t imagine, which is something that hasn’t really happened before. Until now, type designers had full control over what they handed their users, crafting (almost) every letterform independently. The creation of this inter-typeface relationship allows the type designer to regain a little control of the use of their typefaces, allowing them to manage what we called “typographic neighbourhoods”.
Accessible Typography
Accessibility is probably where variable fonts can excel. We’ve already looked at how making them more responsive can have some accessibility benefits. They can provide better experiences, increasing the legibility by adapting to the reader and their environment. Bram Stein of Adobe has explored how using variable fonts can lead to better justified text, leading to fewer gaps and more harmonious pages.
So it’s no surprise that a team came up with a typeface with a dyslexia axis, where characters that are commonly troublesome could either be transformed or substituted with alternates. Although the usefulness of specially designed characters for dyslexia is often contested, things like larger space between letters and white space inside letters are known to make things easier to read. Pushing that idea along, another suggestion was to have phonetic glyphs built into the font to allow displaying phonetic versions of words you don’t know how to pronounce on the fly.
In a similar vein, one team imagined a word-to-icon axis. A word like fish could be smoothly transformed into a fish icon, and even, at the extreme end of the scale, a 3D looking fish. They thought this would be particularly suitable for children and books, providing visual support for words you don’t know or can’t read. Another team designed a swearing axis, which aimed to protect children from reading bad words by changing them to flowers or otherwise child-safe icons. The axis had different age grades where some words would become visible as you the reader grew older.
Lastly, visual impairment, which we often associate with accessibility and voice interfaces, can be temporary. For instance after eye surgery your field of vision and its clarity are often affected resulting in difficulty reading on a screen because of the glow or blurriness. A variable font might be able to compensate for this and to be adjusted the same way you adjust binoculars or a camera for focus. It’s worth noting, that this could also be used to help inebriated people to read or use their phones as they’re trying to get home. CityMapper already makes the “Get me home” button more prominent later in the night based on this, so maybe they could also use variable fonts that change based on your level of drunkenness?
Expressive Typography
Sometimes it can be hard to gauge the importance of a piece of information or news. With variable fonts we could imagine a disaster axis, which would help you judge the seriousness of a situation, notification, or headline, at a glance. A “good” news story could use the more rounded, friendly, side of the axis, and “bad” news could use the other end, becoming narrower, taller and sharper. For the same reasons you might want to make things less legible sometimes, fully exploiting the expressive powers of typography to communicate the importance of something is often impossible due to strict brand guidelines. You couldn’t (and maybe shouldn’t?) change fonts for a headline or two but with variable fonts, this becomes more subtle and unlocks new expressive powers.
When we talked about subtitles, we imagined we could match the typography closer to the tone of the voice of the speaker, using different axis to show sarcasm, whispering, shouting and so on. Not just in subtitles but also for written text, like interviews or transcript or maybe even books, you would be able to scan the emotional changes in the story without disrupting the flow of the text. Lastly, this could also be built into a writing tool to automatically add emphasis based on how hard the keys were pressed or how much swearing the typist was using when the text was written.
The group also found that too much expressiveness might lead to worse legibility. So if we had an expressiveness axis, we could scale things back to make logos, handwriting and signs more neutral and unbranded. Those who might prefer a brandless world or a fully unified experience might enjoy this along with the repeated use of Helvetica and Futura in brand work everywhere.
Immersive Typography
Type is vernacular. A certain style is associated with a certain era, part of the world, or community. Variable fonts are the perfect opportunity for a large brand to have a unified front that can still adapt to where the type is used. We could imagine a font that subtly changes as you cross into Wales, Ireland or Scotland, the same way radio stations or TV adverts might use different announcers with different accents. The message is the same but it might seem more personal or closer. That immersiveness, the same way you can tell you’re in another country or city because of the different fonts on the street signs, becomes available at a more micro level.
These same signs give you subtle cues as to the environment. A battered sign near the sea looks very different to a similar one near a new statue in a city centre. Metal type and handwritten signs can be weathered and break down with time, which gives them a particular feel or affection. What if we had a variable font axis which represented the wear and tear of the type? We could go even further and build in a feature that would degrade the font depending on how much and how often you use it (or the reader sees it?).
Handwriting can be harder to read but might also provide a certain warmth and personality. If a font had a handwriting to neutral axis, you could dial up and down how much personality the type might deliver. A different team suggested “childlikeness” axis where the font could go through different styles of handwriting, from age 4 to 84, showing how our penmanship evolves over time.
Another team suggested a “feminism” slider, which could be used on protest banners, providing different variations aligned with the strength of the message (as prompted by the Ocasio-Cortez campaign poster design).
Typography in VR/AR came up as a use case in terms of immersiveness. Andrew Johnson’s experiments have really opened new avenues for how type can behave in immersive settings. The main complaint about type in VR was the resolution, fuzziness and general quality of it. One team thought you could adapt a well known game programming technique which consists of swapping far away assets for lower resolution ones. In this variable axis, a font would go from a few polygons when seen from far away to full resolution when seen up close.
Conclusion
The exploratory workshop really helped the group understand the new technology, shedding some light on the importance of typography as a whole. We’re confident variable fonts are here to stay and beyond providing a faster, more efficient format for the web, their creative and accessibility-related possibilities are still to be charted. What we’ve described here is only the tip of the iceberg and the result of a day’s work. We are really looking forward to seeing new variable fonts in use, pushing the accessible, responsive, immersive and expressive agenda.
Further Reading
- Test variable fonts in your browser
- Variable Fonts playground
- List of available variable fonts
- An open source variable font
- Typographic and Responsive Potential of Variable Fonts
- A primer on variable fonts
- Responsive VR interfaces
- Visualising the font design space in 3D
- Variable color font
- Using variable fonts to make gifs
- An animated horse using variable fonts
