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.

Going from OpenDyslexic to BBC Reith Sans and back

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.

Bad news to good news scale with subtle typographic changes in the headline. Oswald and BBC Reith Sans.

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.