Episode Transcript

Ethan:

Hi, this is a Responsive Web Design Podcast, where we interview the people who make responsive designs happen. I’m your host, Ethan Marcotte… And, as it happens, your other host, Karen McGrane, is actually out today. I’m pretty sure today is probably her crime-fighting day, I’m not entirely sure what her calendar looks like. But regardless, I’m going to be flying solo this week. But even though we’re down one host, this episode is actually going to be twice as good because I couldn’t be more excited to be speaking with Tim Brown and Bram Stein, who are both coming from Typekit to talk to us not about Typekit but about variable fonts. Tim, Bram, thank you so much for joining us today.

Tim:

Thanks for having us, Ethan.

Bram:

Yeah, happy to be here.

Ethan:

But before we dive in, a few words about our sponsor. I couldn’t be happier to have Gather Content back as a sponsor on the podcast. You see, Gather Content is a content collaboration platform. It helps teams plan, organize, and produce all their web content in one place. They provide structured templates and simple workflows to make collaboration and production easy without the shuffling around of Word documents and unnecessary emails. Centralizing the editorial process will make approval of content easy, so everyone knows what they’re responsible for and when they’re responsible for it. And what’s more, Gather Content has recently published a free online guide to Content Strategy for Website Projects, which they’ve written for all the people who want to make smarter, content-led decisions on their designs. So every responsive design, I believe, benefits from a content-first approach. But as Gather Content’s guide says, that doesn’t mean waiting until all the content is written. Instead, it means considering and thinking about content at every single stage of your project. And Gather Content’s guide can help you do just that. So whether you’re working in an agency on client websites or maybe you’re working on an in-house team, Gather Content’s guide should help you more effectively contribute to your digital projects. You can read it online for free at gathercontent.com/RWD, or check out Gather Content’s products at gathercontent.com.

So, before we dive into the subject at hand, maybe both of you could introduce yourselves and tell us a little bit about what you do at Typekit. Tim, do you want to go first?

Tim:

Sure. So, my name is Tim Brown. My title here is head of typography for Adobe Typekit and Adobe Type. So, my job is mostly to help people use Type well and advise all of our partners at Adobe and people who integrate with Typekit, put Typekit into their products on good practices.

Ethan:

That sounds fantastic. And Bram, how about you?

Bram:

Yeah, so I’m Bram Stein, I’m a web developer and I also work at Typekit. I primarily work on Typekit’s web font service. I sort of call myself a web developer, but that’s just how I like to think about myself. I work on the entire stack at Typekit, so I work on the client side, Javascript, the back-end, performance optimizations, and sometimes even support. In my spare time, I work on a lot of type-related open source projects. You may have heard of Font Face Observer, for example. I know, Ethan, you’ve used it recently.

Ethan:

On more than a few sites. [laughs]

Bram:

[laughs] So yeah, that’s kind of the thing that I enjoy doing.

Ethan:

Well, that’s great. I am a big fan of Typekit, have been using the service for years. Some of our regular listeners might know that we actually just recently featured Typekit because of their wonderful responsive redesign. But as I said before, this isn’t the reason that I’ve got Tim and Bram here today, because we want to talk to them about something that actually has a significant amount of impact on responsive design in general, which is this topic called variable fonts. Some of you listeners might have caught wind of this concept; I, at least for myself, have been following this discussion a little bit, but I’m not super keyed into it, which is why I wanted to have Tim and Bram on the show.

So, maybe we could start talking about variable fonts by kind of defining it. Maybe just if Tim or Bram, either one of you, wanted to sort of just give us a quick primer on what are variable fonts?

Tim:

I’ll take a crack at that. Variable fonts are single font files that behave like multiple fonts. John Hudson said that in the joint announcement that came from the companies who define variable fonts, which are Google, Microsoft, Apple, and Adobe. So, what this basically means is that where before you had a whole family of variations, from light to heavy and everything in between, from condensed to very wide, expanded styles and every width in between, you now you have a single font file that can stretch and flex to be anything in that range of design space.

Ethan:

Okay, that’s very cool. So for some of our listeners who might have actually visited the Responsive Web Design site, we’ve got I think three or four different weights of a very lovely sans serif font that’s being used, and each one of those different weights is a separate file. So what you’re saying is that I could effectively have one variable font file that would cover all of those weights, is that correct?

Tim:

That is right.

Ethan:

Okay, very cool. That sounds really neat from a technical standpoint, but how did this get started? When did variable fonts kick off as a concept? What was the process for defining variable fonts, what did that look like? And what problems are they trying to solve?

Tim:

I don’t remember exactly how this got started; it was early last year. But the reason that these four companies are involved and interested in it is largely about file size savings. So, there are a bunch of independent type designers and engineers involved in the variable fonts effort as well, and many of us are also interested in the kind of exciting flexibility of variable fonts.

But the immediate benefits are going to be related to performance. So, variable font files like the example you gave a minute ago, Ethan: one file can do the job of many separate files. That means fewer requests. It also means smaller file size. Compared with individual variations, a variable font can save you, I think the number I saw being kicked around was like seventy percent of file size. I don’t know if that’s maximum or ballpark, but it’s not just significant, it’s a dramatic file size savings.

Ethan:

Okay, that’s very cool. So, you’re basically saying that whereas I might be using three or four font files currently on the Responsive Design site for example, a combined variable font package that would cover all those different fonts would be basically a smaller footprint than the fonts that I’m using today, in one file?

Tim:

That’s right.

Ethan:

Bram, what’s your role been in this process around variable fonts? Is performance how you got interested in the concept?

Bram:

Yeah, that’s the reason I started looking at it, performance with Typekit. And I’m also interested in the implications for responsive design. But the primary reason that I’m looking at it right now is performance. I think a lot of that is still unknown, like Tim said, because there are very few variable fonts and no one really has any experience with them. But the early numbers are very encouraging.

Ethan:

Well, I want to circle back on that examples question a little bit, but something you said I have to ask about, which is the implications for responsive design, which is kind of the reason we’re here today. Can you talk to me a little bit more about where you see an overlap between responsive design and variable fonts? What should our listeners be paying attention to?

Bram:

I’ve mostly been looking at the performance angle. Tim, I think you’ve been thinking a lot about how it affects design. I have some thoughts about it myself, like you would be able to fit text in a container or a viewport more easily that way, or you can tweak the width of a typeface based on the viewport, stuff like that. I think there’s a lot of interesting stuff to be explored there, and I think we’re only starting to scratch the surface. There’s just so much experimentation that needs to be done to figure out how we’re going to use these things on the web that we haven’t done yet.

Ethan:

Now correct me if I’m wrong, but I think there have been attempts in the past from some of these large companies, if not necessarily all of them, to come to the table and define new font formats that I think tackle some of these challenges, if not necessarily all of them. Is that correct? Have there been other attempts to do things like this in the past?

Bram:

Yeah, there has been TrueType GX by Apple, that was basically a variable font format, and also Multiple Masters from Adobe, which also did something similar. Neither of those took off when they were introduced for various reasons, and now variable fonts is kind of a continuation of TrueType GX of course adapted to work well on the web and extended to modern standards.

Ethan:

That’s interesting, and that context is helpful. What is it that makes variable fonts different? Because it does seem like in a very short period of time, as Tim said, about a year, there’s been a significant amount of excitement around it in not just typography circles but also in responsive design and performance circles, as well. Has there been something different about this process that’s made it feel more successful, at least for somebody like me who’s sitting on the outside?

Bram:

I think the primary reason for its success, or at least the anticipated success that we’re hoping to see, is the web. Back then when those formats were introduced, the web wasn’t there. Performance optimizations and whatever responsive-type things you can do on the web now are going to be a much more important factor for driving the adoption of variable fonts.

Ethan:

Very cool. Are there actually any examples in the wild if our listeners and readers wanted to check them out? Are there folks they should be following or lists they should be looking at? Any lovely examples of variable type in the wild that you can think of?

Tim:

Nick Sherman has a Twitter account called @variablefonts, and if you scroll through the tweet history there, you’ll see a lot of news and examples. There have been several test variable fonts produced so that people can explore what it means to have this kind of font in their rendering engines and in browsers, even. And there is a tool called Axis-Praxis that Laurence Penney put together, where he’s experimenting with UI for manipulating variable fonts, which is kind of interesting.

Ethan:

So, it sounds like we’re maybe in the early days of actually having tools to create these variable fonts. Is that correct?

Tim:

It’s true, we are in the early days. As Bram said, the web is a big reason why variable fonts are becoming real in a way that older formats like Multiple Masters and TrueType GX didn’t. But one thing that those old formats did do, even though they weren’t files that designers and everybody used as fonts, is that they influenced type design and type design tools. So those old formats—type designers have been thinking in a variable fonts way for decades now, and when they produce a type family, they actually design it as like a multidimensional design space, and they pick instances in that space and they save those out as variations. “This one’s bold, this one’s condensed italic,” it’s like this is how they’re already thinking. And so there are tools to take that workflow that type designers use and produce a variable font with relative ease. In fact, such a tool was part of the initial announcement. These four companies made a joint announcement in September to reveal variable fonts to the world, and they showed how you can take a type family that you’re working on and run it through this tool and you have a variable font file. So in that way, variable fonts are not so far off, they’re easy to make.

There are other challenges though, like what’s the business model? How are type designers going to sell these files? How are people going to want to buy them? We could talk a lot more about that.

And then there are other steps to everything, right? We need rendering engines that can show the fonts, we need browsers and design software to support those rendering engines, and then we need ways for people to design with these fonts. What are the concepts behind how these get used? I’m hopeful about all of that stuff. I’m hopeful about the rendering engines because people working on those engines are in the working group that defined variable fonts, and they’re working together. Rendering engines take a long time to develop and test, but people are collaborating. And browsers are updating more often than they used to. There was an old Windows rendering engine called GDI, which is why people might remember type rendering on Windows being disappointing at times when web fonts were new. TrueType Hinting was a big deal and fonts that had it looked better than fonts that didn’t, and gradually Windows operating systems moved to a newer rendering engine called DirectWrite, where TrueType Hinting isn’t as big of a part of the algorithm that produces the rendered letters, so all type looks a little bit better by default. That took a long time, but we got there. If you think about it this way: people who make the Chrome, Safari, and Edge web browsers are all invested in this font format, so all that stuff makes me really hopeful.

Ethan:

That’s all really exciting, Tim. I was silently geeking out a little bit while you were talking because some of the stuff you said about variable fonts being closer to the way that type designers actually think about their craft, it sounded a little similar to what I’ve been saying about responsive design and what other folks have been saying about responsive design for a while, that this is actually closer to the grain of the medium a little bit. The web isn’t a fixed-width by default, it is completely flexible, and letting go of that control is, in many ways, better for what we’re trying to do on a daily basis.

Anyway, that little geeky soapboxing aside, you touched on a couple different fronts that sound like they’re the next step in this process for getting variable fonts adoption out there, from rendering engines to browser adoption to figuring out some of the economics and developing a marketplace for variable fonts. Can you talk a little bit more about what Adobe’s or Typekit’s role specifically might be on any one of those projects? How are you going to define variable fonts in those areas in the future?

Tim:

Bram, I’m interested for you to share a little bit of what you expect in terms of operating system adoption and what that means for browsers and how quickly will be able to see variable fonts on websites. But I can tell you, Ethan, that one of the things Adobe is doing right now is to write a CFF 2 rasterizer. So, what that means is there are historically two competing popular font formats: TrueType and PostScript, or CFF, which stands for Compact Font Format. And the variable fonts that you see right now today, if you have the right operating system and browser combination and you’re looking at something like Axis-Praxis where the variable font is in the tool, the website, that’s a TrueType-based variable font, and the rendering engine being used there renders TrueType fonts. CFF fonts have some advantages that I won’t get into over TrueType. One of them is a smaller file size. Adobe is working on a CFF 2 rendering engine rasterizer that we hope will be everywhere that the TrueType rasterizer is. So, that’s one thing we’re doing.

Another thing that Adobe is doing right now is experimenting with and imagining what variable fonts will be like in design tools and what people will do with them once we have that kind of full unlimited flexibility in our type, on our websites. What does that mean? What kind of decisions do we have to make that we aren’t making today? So, Bram and I are both very interested in that part of it, and Bram can say a little bit more about the rendering engine and how that fits into how soon variable fonts will be real on the web.

Bram:

Yeah, so I get that question a lot. “This is amazing, but when can I use it?” It’s pretty hard to say when exactly we’ll see browser support, and that’s because it depends on two things: the support in CSS, and support for drawing variable fonts in the operating system. Both need to be in place before variable fonts can be used. So, currently the CSS specification is being worked on by the CSS working group, and it’s actually quite far along, but I think it will change in the coming months. Once that specification is finalized, browsers will hopefully start implementing it. Safari is kind of the leader here, because they’ve already started working on implementation. If you download the WebKit Nightly build, you can actually start playing with the CSS specification for variable fonts, which is really cool.

But the real limiting factor here is the operating system, like Tim mentioned. As far as operating systems, Windows already has limited support for variable fonts in the Windows 10 anniversary update, and they expect to have full support for variable fonts sometime in 2017. In OS X and iOS, they already support TrueType GX, which is kind of like a predecessor to variable fonts. So, they also expect to release that in 2017. FreeType, which is the type rendering engine used on Android and on Linux, it already has variable font support, but none of that has made it to an operating system release yet—but again, also expected in 2017.

One important thing to keep in mind is that browser release cycles are very fast, like we get a browser release every couple months, but operating system releases usually take years. So even if a new operating system release came out today, it would take a very long time before people actually operate on that operating system. So even if all the major operating systems and browsers support variable fonts in, let’s say, 2017, you probably won’t see widespread usage until later, maybe 2018, or even later than that. But, of course, you can actually start trying it out and experimenting with it right now, and I hope that there will be some way to do feature detection for variable fonts in browsers so we can also start serving variable fonts to browsers that support it.

Ethan:

You just intercepted my follow-up question, which was going to be about how we chart some sort of gradual upgrade path into variable fonts, so that’s exciting to hear that’s on your radar. But looking at all of that, it seems like we’re on the cusp of variable fonts really picking up steam in 2017. When can the average designer or developer really start working with variable fonts? Is it going to be next year? Is it going to be a little bit further out from that? If you were reading some tea leaves today and trying to predict the future, when do you think that variable fonts are really going to hit the mainstream?

Bram:

My hope and estimate is somewhere at the beginning of 2018. We’ll see operating system support next year. Hopefully we’ll also get a CSS specification that’s final and start to see implementations, and then hopefully people will start using them in production in 2018.

Ethan:

Well, that is coming right up, that’s really exciting. Following on from that, in the interim, in the next twelve months or so, what is going to be happening next? More specifically, are there things that our listeners and readers could be doing to follow along with variable fonts to watch their development? Any advocacy stuff that would be useful for them to do?

Bram:

I think the best way to contribute is to start experimenting with them, see how you could use them in your products or your website. We’ve never really had this kind of flexible type on the web before. Right now the CSS specification is based on what the browser vendors and a handful of enthusiasts would like to see, but that might not match what designers would like to do with them. So, I’d really love to see what sort of crazy things people would use variable fonts for, and I also hope that that sort of experimentation will drive the specification itself. So, please download the Safari Nightly build on OS X and head over to the Axis-Praxis website, there are several free available variable fonts there, so you can grab the fonts and the CSS and put it in a web page and start playing with and build stuff with it. If you run into any limitations, bugs, or weird corner cases, you can blog about it, which is very effective, or report it directly to the CSS working group. The CSS working group is maintaining the specification for this on GitHub, so you can actually just file issues and even a pull request, if you want to do that. That’s a very useful thing to do, a useful way to contribute.

Tim:

Another way that people can contribute is to imagine what things are going to be like when variable fonts are supported well. Imagine how it’s going to change the way that you design sites, the decisions that you need to make, remove limitations that are in place today. For instance, a lot of times I see people eliminating font variations from performance budgets. That won’t be as big a problem anymore. That kind of stuff leads to faux bolding; we won’t see as much faux bolding, because the bold will be built right into the variable font file. It will mean richer typographic palettes on websites, it will mean websites that load faster, and it will mean that we have to make decisions about how much things flex. What does that mean? You can think about it as responsive design brought down to the level of the font file itself. When you have a composition that flexes and you have various layouts or layout decisions that are happening asynchronously throughout a composition, you have breakpoints to make some of those decisions and you have minimum and maximum concepts. All that stuff is going to have to happen for every axis on along which a variable font flexes.

So, yeah, let’s say you’ve got a big heading on your site, like a hero heading, and you want it to fill the space of its container. As the viewport gets narrow, the type doesn’t get smaller, doesn’t scale down, it condenses along a variable axis. Well, how much do you want it to condense? If you look at a typeface that’s a really big family, like Acumin is a typeface from Adobe Type, that has some very narrow and very extended widths. Do you really want your heading to stretch that much? Is that going to be what you want in terms of art direction? Maybe you only want it to stretch from sort of wide to sort of condensed, and once it hits one of those limits, it scales instead of becoming more or less condensed. How do you make that decision in your code? How do you communicate decisions like that to the people you’re working with? We’re going to need our communication tools to reflect that kind of decision-making, because it’s not just that one element either, right? If that’s the way that type is flexing and the subheads are flexing in a slightly different way, and a body text is flexing in different ways…

Bram talked about experimentation—there’s some wild experiments that are going to happen with variable fonts. Think about the more expressive typefaces that you’ve seen. Imagine a variable font where you can not only control the width and weight, but the angle of its slanted-ness and the expressiveness of the glyphs. Maybe you have a grunge font. How grunge is it? If it has kind of a splattery effect, maybe that can be intense or subtle. Color fonts are a thing. That’s a topic for a whole other show I guess, but if you imagine color-related axes changing at the same time… It’s really mind-blowing how much is going to change. The more people are thinking about that, the more prepared they’ll be when it lands.

Ethan:

Well, I have to say that the last thirty minutes have been incredibly instructional. I sort of wandered into this conversation thinking we were going to be talking a little bit about a new file format, but I think you’re right, Tim, that this is going to change a number of things about the way that we think about our craft on the web.

Tim:

I think some of the decision-making we’ll need to consider around variable fonts—there’s an example that I think can help us think about the decisions we’ll need to make. I wrote a blog post for TypeKit a while back, it’s called “Flexible Typography with CSS Locks,” and I made this analogy to waterway locks, where you have sort of a low-level and a high-level, and within the lock the level of water can flex. The example that I use in that blog post is that the gates of the lock are like a paragraph’s minimum and maximum widths, and line height is the water level in between those gates. So when you have a narrow paragraph, you want the line height to be kind of tight, and when you have a wide paragraph, you want to loosen that line height up so that it’s easier for people’s eyes to scan back to the beginning of the next line. And so, that line height should really flex within that paragraph’s flexible width limits, and a CSS lock is a way of establishing that flexible relationship between line height and width in a calc equation in CSS. I feel like we’re going to have to put the same kind of relationship math into the flexibility of variable fonts. That example I gave of the heading, of flexing in its level of condensed or expanded width—what does that relate to, and how do the limits affect other things that are happening in the composition? It’s really, really interesting to think about that stuff.

Ethan:

Well, that sounds great. Bram, any final thoughts from you?

Bram:

Yeah, so I was a little concerned about the performance argument, so I just wanted to quantify that a little bit. So, the performance gains are based on how many styles of the font you’re using and how many masters the variable font includes. If you take a very simple variable font, for example, with a weight axis that has two masters—for example, a thin weight and a black weight at the extreme ends of the weight scale, if you only load a single style using that variable font, you probably won’t see any gain with a variable font. In fact, you might see a slight increase in file size, and that’s because the variable font contains both the thin and the black weight masters. So, it will actually be around the same file size as two individual regular font files. But if you start using three or more weights on your site, you’ll start seeing benefits because all those other styles in between will be interpolated from those two masters and it will essentially come for free. This gets more complicated when the variable font has more masters on the same axis, or even multiple axes with their own masters on each axis. There’s a certain trade-off there that depends on both the variable font and how you use it, so it could come out that you have a performance gain or that you actually go back depending on how you use the font and which font you use.

Ethan:

Got it. So, as with most things in web design, it sounds like performance gain just comes down to that old adage: “It depends.”

Bram:

Exactly. It depends.

Ethan:

That makes sense. Well once again, Tim, Bram, thank you so much for chatting today. This has been incredibly educational and, like I said, I’m really excited to see where it goes from here. Thank you.

Tim:

Thanks, Ethan.

Bram:

Thank you.

Ethan:

Thanks to everyone for listening to this episode of a Responsive Web Design podcast. And thanks also to our sponsor, GatherContent. Go to gathercontent.com and take control of your content production process today.

If your company wants to go responsive but you need a little help getting started, Karen and I offer a two-day onsite workshop to help you make your responsive design happen. Visit responsivewebdesign.com/workshop to drop us a line—we’d love to hear from you.

If you want even more from us, you can sign up for our newsletter, subscribe to this podcast, and read full transcripts of every episode at responsivewebdesign.com.

Thanks so much for listening, and we’ll be back next week.