What You Need to Know About Variable Fonts
An Interview with Tim Brown and Bram Stein of Adobe Typekit
This week, I talk with Tim Brown and Bram Stein of Adobe Typekit. They shared the opportunities inherit in variable fonts for web designers, developers and type designers — and dispel some common misconceptions.
TypeThursday is a monthly hangout to share work related to type and make new friends. Join us at:
Barcelona
Chicago
London
Los Angeles
New York City
Philadelphia
San Francisco
Seattle
Ulrik Hogrebe: Hey Bram and Tim. Great to have you both in for this.
I am thinking today is primarily a deep dive on variable fonts, and then we’ll see where things take us.
But maybe we’ll do a quick round of intros. Tim, you are the newer of our guests — why don’t you start?
Tim Brown: Sure thing, Ulrik. I’m a designer, writer, speaker, and toolmaker. My special interest is typography. I’ve been making websites since 2002? And practicing typography for about that long as well. Right now I’m called “Head of Typography” here on the Adobe Typekit & Adobe Type teams. I help people hone their typographic skills, and I advise Adobe software designers — and Typekit partners who are external to Adobe — on typographic UI/UX. Especially exciting when you consider variable fonts!
UH: Cool. It’s super cool to have you here. And Bram we had you on in May talking about your project the Typography Inspector. What have you been up to since we spoke last time?
Bram Stein: Good to be back, thanks for having me on again. I’ve been quite busy actually: I’ve been working on a book called the Webfont Handbook, which came out earlier this month. It covers a lot of the things you need to know when using webfonts; licensing, hosting, text-rendering, subsetting, performance optimization, and of course, also variable fonts.
UH: Amazing — keeping busy then! So is the book a personal passion project? Or what prompted it?
BS: I’ve always wanted to write a book about webfonts. I registered a domain name for the book back in 2014 because I wanted it to be an online book. Unfortunately I never really had the time, and it lingered as an idea for several years. Until I talked to Tim, who encouraged me to send a proposal to A Book Apart. To my surprise they were very interested in the book, and now it’s a real thing. Thanks Tim!
UH: Ha! Fantastic— I’ll move on to the variable font stuff in a second, but just so I can queue it up in my own shopping cart, who is it intended for?
BS: It’s intended for both developers and designers. Basically anyone who works on the web and uses webfonts (which most sites use). If you’re interested, you can buy it on the A Book Apart website.
UH: Great. I’ll have a look. In the meantime, let’s get back to the matter at hand. So I can’t really think of a better combination of people to have in to talk about Variable Fonts than you two. Personally, I don’t know nearly enough and I think I have a lot of misconceptions that I want to clear up.
Maybe we start with just a basic definition of what variable fonts are? Tim?
TB: A variable font is, as John Hudson put it, “a single font file that behaves like multiple fonts”. Imagine a type family as you’ve always known one to be — it has a Regular, an Italic, a Bold, maybe a Semibold. Many typefaces today have different widths — so, a Condensed, or an Extended, in different weights.
[Typeface: Kepler, an Adobe Original designed by Robert Slimbach.] Image borrowed from “Introducing OpenType Variable Fonts”
What variable fonts do is turn those many individual font styles into “design spaces”, which affords efficiency and flexibility. Any point or range in a variable font’s design space is accessible to designers. Need something more bold than Semibold, but not as bold as Bold? You can find it. Need something condensed but not as condensed as Condensed? You can find that too.
There’s a lot more to this, but I hope that gives you a general idea. Also, thanks so much for having me and Bram here. But there are lots of people besides us thinking about variable fonts, and experimenting. In fact, some of the folks behind these ideas have been writing and designing for this moment for decades. Adobe pioneered Multiple Master technology back in the ’90s. And folks like David Berlow and Erik van Blokland have been experimenting with digital type for years, pushing the boundaries and helping us all understand the potential of a variable space.
…you could serve a single file that contains the entire design space for only a slight increase in file size. This will have an enormous impact on performance…
UH: Right. Of course. It takes a village, right? So unpicking what you just said, there are a number of things at play. So you have the font itself — as in the lines and points of it. Then you have the file technology and then I guess you also have the means of controlling the font — which I am supposing is the CSS support or standards that need to be baked into “the web” to allow us to use these fonts in the first place. Is that accurate?
TB: Right, there are many parts to this. There are the fonts themselves, which adhere to a specification (this is what the big announcement was last year — the new OpenType specification that included variable fonts). Then there are rendering engines that make the fonts visible, and browsers & design software that need to support those engines. And finally people need ways of designing with variable fonts, via instructions like CSS and software UI.
UH: Got it. And can you tell me a bit about its origins? Or it’s purpose, really?
TB: I think Bram can speak to the immediate advantages best, and in terms of the origins (in conceptual stuff decades ago, and in collaborative spec work more recently), the best thing to do is read the announcement from 2016 which I mentioned before.
BS: I love talking about this. I look at variable fonts from a completely different angle. Of course, I’m also very excited about the possibilities variable fonts open for design, but my primary focus has been the performance benefits.
Instead of serving a font family as separate font files (like Tim said earlier: regular, bold, etc.) you could serve a single file that contains the entire design space for only a slight increase in file size. This will have an enormous impact on performance; serving one file is going to be much faster.
I think what’s really interesting about variable fonts is that it has a little for everyone: type designers, developers, and designers. That’s probably also the reason why we’re seeing such fast adoption. Everyone is excited about it.
UH: Cool, so I get the efficiency part of it. So now I am going to just barrage you with all my misconceptions, if that’s cool? So for web designers, I now also essentially get a responsive font, right? So kind of like an inflating and deflating balloon, my font choice will react to my viewport?
BS: That’s certainly possible, but that is just one possibility in a range of options. You can do a lot of other useful things that aren’t dynamic. What if you find the default bold slightly too dark? Without variable fonts you would need to use a typeface that has a semibold. With variable fonts you can just make it slightly less bold by tweaking the weight axis. Depending on the font you could tweak a lot of these small details.
TB: The dynamic, flexible stuff is really interesting, though. It’s going to take a while, but what I like about variable fonts is that they’re forcing us to think about the web differently. Forcing us to rethink things we thought we had already figured out. I remember hearing an analogy from my friend Chris Armstrong, about how the web is like states of matter. He said fixed, static design on the web is like ice, and flexible, fluid design is like water. When Ethan Marcotte got us all thinking about responsive design, you can think of that like putting containers around the water.
I took this analogy and ran with it in an article about CSS Locks. And while this article is about line spacing, the conceptual model underneath is very applicable to variable fonts. Suppose you wanted a variable font to flex as part of how your design responds to conditions it meets. How exactly will it flex? You must decide. You must determine how much of the design space will be part of that flexibility, and the rate at which the flexibility happens. You must decide what other aspects of the design — outside of the font itself, or the element it applies to — influence and are affected by that flexibility. It’s mind-bending. Extremely interesting to me.
It’s maybe worth pointing out that the type designer can choose which aspects of their font are variable. They can choose what to expose to the user’s control and what not to expose.
BS: Oh, that’s a good point. That’s where variable fonts can really shine. I was mostly reacting to the balloon metaphor and some of the display type examples we’ve seen where text gets squished and stretched. Cool, yes —but the most useful applications of variable fonts are probably more subtle.
UH: Yes, I’ve heard others say that this will finally give web designers the same kind of control that print designers have and take care of the “between breakpoints problem” which many developers and designers deal with; at the breakpoint it looks great, but in between it’s kind of willy nilly how things appear.
As a type designer, I was initially slightly uncomfortable with the idea that anybody can decide what Bold is in my typeface. But actually we are saying that holistically, design will benefit because of the added control?
BS: It’s maybe worth pointing out that the type designer can choose which aspects of their font are variable. They can choose what to expose to the user’s control and what not to expose. There’s also a possibility for the type designer to give presets: this is what I consider bold, this is thin, etc. The format offers a lot of flexibility and control for type designers.
TB: That’s right. And in general variable fonts should help with the “in between” issues web designers face, though I wouldn’t consider it the same kind of control that print designers have. It’s nice to be able to better guide how a flexible design flexes … but it’s also very complicated. It’s more like the control a print designer has over an entire identity system, or a campaign that appears in many formats. Except on the web, of course, the formats are infinite.
I don’t think we could ask for a better situation, though. We have major companies behind the effort, and plenty of time to figure out what variable fonts should be like in design work.
UH: Ok, so in summary, we are saying everyone stands to gain. Consumers because they get better faster load times and on the flip-side of that, developers because they can optimize for performance better. Web designers gain more control and potentially also more means of expression and finally type designers gain an extra dimension to be creative in.
So, I guess the question is, what is uptake looking like? When is this coming to a website near me, so to speak?
TB: We don’t know, exactly. But because Apple, Google, Microsoft, and Adobe collaborated on this, I expect pretty solid support across the board in the not-too-distant future. One thing to keep in mind is that although browsers may ship with support for variable fonts, whether they work is also dependent upon the OS having the right rendering engine available.
I don’t think we could ask for a better situation, though. We have major companies behind the effort, and plenty of time to figure out what variable fonts should be like in design work. These early days are ripe for experimentation.
BS: Chrome made an interesting choice: instead of waiting for OS to support variable fonts, they’ve decided to bundle the FreeType rendering engine with Chrome. If the operating system supports variable fonts, Chrome will use that, and if variable fonts are not supported they will be rendered using FreeType. So it’s likely that we’ll soon see widespread support for variable fonts on Chrome, including mobile and slightly older operating systems.
UH: Ok so finally, what if I am a type designer. Is there a way for me to get involved? Where do I start?
BS: You can start by creating variable fonts from your existing typefaces! Most of the major font editors already support variable fonts, or are in the process of adding support (Robofont, Glyphs and Fontlab). There aren’t many introductions for type designers yet, but Microsoft has published a good technical overview of how variable fonts work. Type Network has also published a proposal for several typographic axes, with visual examples. And for technical details, the I Can Variable Fonts notes are a good place to start.
UH: Fantastic! Those are great resources. OK, I think we are reaching the end in terms of time. I just want to thank you both for taking the time to clear things up for me. I feel you really helped me grok the possibilities inherit in variable fonts. Thanks again — I am sure we will speak again sometime.
TB: Great — and like I mentioned there are a bunch of others who are working on and thinking about this stuff, who’d I’d also urge people to look up and dive in to; Dan Rhatigan, Bianca Berning, Roel Nieskens, Nick Sherman, Andrew Johnson, Laurence Penney, Jason Pamental and of course everybody mentioned above.
You can find follow more of Tim and Bram’s work: on Tim’s website here and Bram’s here.
Love these interviews? Sign up to the TypeThursday mailing list to be the first to know about our next interview.
Was this article interesting to you? Give us a clap! It helps share the conversation you loved.
