Isabel Lea didn’t expect to fall down the rabbit hole of variable font technology. But since the London-based graphic designer started the Adobe Creative Residency in May 2018, she's repeatedly found herself at the intersection between technological experimentation and typographic innovation.

If you haven't spent much time on that particular corner, you may not be familiar with the variable font format. It can reduce web font file sizes and give you loads of typographic variations. (Let’s say you're unsuccessfully searching for a condensed but slightly bold version of a typeface for a web design. If you choose a variable font, you simply tweak the font's values using CSS until you get exactly what you're after.) However, the possibilities go way beyond the typographically practical, into animation and other areas people are just beginning to explore.

Lea first learned about variable fonts at a two-week intensive type design course at the University of Reading’s Department of Typography. "We had a hands-on workshop where we were looking at variable fonts," says Lea. "I thought, 'Great, you can make a font pulse. Can you make it pulse to something, like music?'" 

COMBINING PLAYFUL AND PRACTICAL

At the Adobe Creative Meetup in London on November 28, 2018, attendees were treated to an interactive installation of Lea’s variable type experiments. In one experiment consisting of a laptop and a web camera monitoring the room's light levels, participants could control the laptop screen's brightness and two font variables by changing the light levels in the room. If the webcam detected a decrease in the room's light levels, the text transitioned to a thinner weight in black while the background color lightened. As the web camera detected increased brightness levels, the background color darkened and the text returned to its thicker forms in white. In another experiment, someone could control the length and appearance of a face's serifs using MIDI controller sliders and dials.

Click above to watch a video of the light experiment. Lea is covering the webcam with her finger to simulate a dark room.

While Lea's installation was purely experimental, she's tuned into the possible real-world extensions. Interactive variable fonts could be powerful tools in user-interface design, data visualization, and accessibility efforts. "I talked to a researcher in Belgium who is working on projects for deaf children," Lea says. "If a font responds in real time and shows you volume with boldness, then it gives a much faster cue to people who are hard of hearing and trying to understand what is being spoken in front of them." Some of the most important parts of her creative process as a designer are these interactions and collaborations with people in fields in which she is not an expert. "You learn the most and you get the most experimental that way," Lea says.

Note the MIDI controller sliders and dials used to affect the presence of serifs on the letterforms in realtime.

With the end of her year as a Creative Resident approaching, Lea's thinking about how she'll transition back to client work for the studio she co-founded, ATYPICAL. "The residency has been brilliant in opening up what commercial clients are willing to pay for and the kinds of projects people are willing for me to take on. Now we’re getting offers for more experimental projects and I think that will keep my residency projects alive. People are willing to invest time, money, and resources into these real-world applications."

Like her residency projects, Lea brings a playful approach to ATYPICAL. "We always try to make enough time where we’ve got a little bit of a playground setting, where we can experiment and not have to worry too much about the consequences because that’s where all the best ideas are from," she says. "That’s been integral to our work. Once you make sure that’s a priority, good work follows."

Wherever her experiments lead her, we can expect to see more of the unexpected in Lea’s future.

If you want to know more about variable fonts, check out Mandy Michael's "Variable Fonts Are the Future of Web Type" or browse through Mozilla’s MDN Web Docs overview.