#btconf Berlin, Germany 13 - 16 Nov 2019

Jason Pamental

Jason spends much of his time working with clients to establish their typographic systems and digital strategy, helping design and development teams works smarter and faster, and running workshops about all of the above. He is a seasoned design and user experience strategy leader with over 20 years’ experience on the web in both creative and technical roles, and an Invited Expert to the W3C Web Fonts Working Group. Clients range from type industry giants, Ivy League and High Tech, to the NFL and America’s Cup. He also researches and writes on typography for the web: he’s author of Responsive Typography from O’Reilly, articles for .Net Magazine, PRINT Magazine, HOW, Monotype.com, and frequent podcast guest. Author of online courses for Aquent’s Gymnasium platform and Frontend Masters. He’s an experienced speaker and workshop leader, having presented at over 50 national and international conferences. The real story: mainly he just follows Tristan and Tillie around Turner Reservoir, posting photos on Instagram.

Want to watch this video on YouTube directly? This way, please.

Dynamic Typography with Variable Fonts

Modern developments in CSS make it easier than ever to create robust, scalable, elegant typographic systems on the web. Add variable fonts and the design, technical, and performance benefits are really exciting. We’ll look at how to combine them with other CSS capabilities like custom properties, calculations, and grid to create a whole new way to think about design and development. We’ll see how they work together by using some variable fonts in layouts that work across screen dimensions, accessibility needs, design requirements, and even network speeds—better than you thought possible.

I’ll also be showing the road ahead for web font performance with a sneak peak at what the W3C Web Font Working Group is researching, including a live demo of Google’s proof-of-concept showcasing the font serving speed increase potential.

Transcription

[Music]

[Audience applause]

Jason Pamental: I was one of those people who put their hands up for being the first time that I’ve ever been to a Beyond Tellerrand. Now I know why people have been telling me about this event and raving about it for ten years. Marc, thank you very much.

[Audience cheers and applause]

Thanks to all of you for the amazing conversations that I’ve been having so far, a lot of friends that I’ve seen again, people that I’ve met for the first time and have been talking to online before and now I get to talk in person, and for all the speakers so far that have been so incredibly inspiring.

I thought yesterday was just over the moon incredibly good. Then, this morning, I’m still trying to pick my jaw up off the floor after listening to Sharon and Natalya. I don’t know how I’m going to follow that, but I’ll do my best.

This talk is going to be about a few things. Variable fonts are kind of a big part of what I’ve been working on, and I’m going to explain a little bit more about what those are. I also wanted to kind of relate this a little bit to some of the things that both Jeremey and Aaron were talking about yesterday.

Typography is a big part of what we experience on the Web but it is only a part and it is something that needs to be thought about in those same kinds of layers in the way that we implement it. That’s why the variable fonts are a big part of this but it’s also in the context of the evolution of CSS. I won’t necessarily go full-on into tricking you into another design system talk but that might be a part of it. Then there are a lot of other little things that kind of touch on this.

I want to be the horse, not the unicorn. I can do two things, at least, and I’m happy about that and I wouldn’t really have it any other way. While I do maintain that I think designers do need to code, it shouldn’t have to be all that much.

We’re trying to bring all those things together in what we’re going to talk about. What that really means is, what I do is help people with that intersection - mental models, if you will. Or you really just follow me for the dogs.

I work with a lot of teams and a lot of organizations in type companies and stuff in helping them figure out how to work with type better on the Web to embrace the different technologies. I do a lot of thinking about how to do that stuff while walking around with Tristan and Tillie. Tristan, we’ve had since he was a puppy and he’s now 11. That’s his cousin on the right. We’ve had her for a couple of years. She’s nine. They’re going to kind of help me illustrate some of these things.

Let’s start to look at what we mean when we talk about responsive typography on the Web and variable fonts will fit into that as well. The first thing I want to talk about is why. Type makes up a huge amount of what we see and experience on the Web. It is that interface between the content and what you have to say and how somebody takes that in, unless it’s being read to them. I like to think of it as the voice of our words.

Beatrice Ward actually put it much more eloquently back in the 1930s when she said something more like, type is the clothes our words wear. I thought it was a really beautiful way to think about it.

This is also something really important about how we work with type because it has this duality. Nina really put this well and got me thinking about this earlier this year. In the job of design, being able to communicate ideas and influence behavior, it has to do that in ways that make it easy to consume, but also ways where it should be more difficult. I think that that’s something really important when we think about the history of graphic design and how we communicate on the Web. Sometimes, we need to make it easy and sometimes we need to challenge you.

We need to slow you down. We need to stop you in your tracks and grab your attention. Type is a way to do that. It’s an element of design.

We were talking a bunch about this last night with a few people at the party, thinking about David Carson and his impact on graphic design or when you think about all the punk rock stuff that Burton was showing yesterday. These are all ways of communicating and a lot of it is in how people are using type. This friction is the transfer of that excitement and that interest.

I spent a lot of the time in the past few years--I wrote a book called Responsive Typography--thinking about how to make type easier to read. We’re talking about that reduction of friction but that’s changed with the introduction of mobile phones. As our reading size, our page size kept changing, we had to start thinking about how our typography changed as well.

This is kind of the backstory that kind of got me to thinking about this stuff that I’m going to show you in a few minutes. Thinking about how the typography needs to scale from a large screen to a small one or the other way around, we have to tweak the proportions. We can be more subtle on a small screen because we’re competing for less of your attention or there are fewer things competing for your attention. As you’re consuming content on a smaller screen, there’s less stuff there.

We can be a little bit more fine-grained. We start by, on the small screen, our heading might be this size and our body copy here. We need a greater disparity between those things so that the head stands out more when it’s on the bigger screen, so a smaller screen.

We also then want to start thinking about these layers. The text comes in first, then the CSS, then the Web fonts are loaded. We have this flash of unstyled text and we want to mitigate that. It’s only a problem if it’s actually unstyled.

We can fix that when we have our fallback fonts. This is when the page first loads. We add a little bit of JavaScript in here that will help us even out this experience by adding a class where we can style the fallback text. That’s how we start to get around some of these things, even out that experience, and make that experience even better for the 400 million or so people using Oprah Mini on a small Android device that won’t get Web fonts at all. This helps us maintain the integrity of our design so that when the Web fonts finally load, things don’t reflow or they reflow very little and you don’t really notice it quite so much. That’s a bit of the history of trying to be better about getting our typography on screen, getting it there quickly, getting people into that experience, and sort of evening out that flow so we get to the point where we have the typography that we want with the fonts that we want on screen.

Now we want to start to improve. We want to start to embrace some of the new layers that have come in from JavaScript into CSS that allow us to do things like use some variables. Instead of having to rewrite a bunch of CSS, this is where we sneak some design system stuff in. If we want to change something because it’s a different interaction or it’s a different color theme--all kinds of different reasons--we can just change that one variable and not rewrite any of the rest of the code.

These custom properties are really pretty useful, but they start to get more interesting when we start to combine it with things like calculations to change a unit or based on placement in the layout, and then we can also do things like start to impact the font itself if it’s a variable one. We can start to assign these variables for other properties and then use them in combination to start to make some magical things happen.

Now, that’s a different technology. That’s the third piece of this in the variable fonts that I’m going to explain to you in a minute, but I wanted to kind of continue down this path of, how is this really going to help us in our workflow today? It’s not something that has to be done completely from scratch but it’s something where, when we keep these things in mind as we start working, we can take these little cards and we have these sizes and things set as a variable.

We want to move it over into a different part of the layout. All we have to do is reassign a couple of variables. Again, everything flows. It all scales together and we don’t have to rewrite any of the underlying CSS. It does fit in that model, the mental model, of that design system, pattern library, style guide, what have you.

Now, let’s look at the fun stuff here with the variable fonts. John Hudson described it as a single font that acts as many. If any of you have installed fonts before, you know you have a whole bunch of files--one for every different width and weight or italic or compressed, extended, whatever you have--in order to have that represented. On the Web, what that has come to mean is, “Don’t use fonts,” which is really unfortunate because, really, we just need to make way for more JavaScript to load.

[Audience laughs]

That was an easy one. I’m sorry.

By embracing this new evolution in the open type specification, we can actually bring all of this into a single file. This is where it gets really interesting. What you see on screen is an example of that one letter form and all the different permutations it could take and then everywhere in between. That’s one letter that’s being given different CSS parameters for font-stretch and font-weight. It just moves it along that axis. It allows us to animate all these things.

Here are Tristan and Tillie to help us out again. I’ll get out of the way so you can kind of see what’s going on because they’re really cute. We want to see how this stuff really works. Really, don’t tell Tristan, but the weight does get up there, but it has other things too.

The typeface is only going to do what the type designer allows. This is not a distortion. These are typefaces that have a width and weight axis. It so happens, you can play around with the X-height. Then, of course, there’s also italics and slant.

[Audience laughs]

There are a number of different, what they call, registered axes. We’ve seen several of these already. There’s width, weight, italic, and slant. We’ll look at how those differ. Then optical size.

I wanted to make sure I could explain this part to you because this is something that actually goes back hundreds of years. In another talk, I have an example of a broadsheet from William Caslin, printed in the early 1700s, showing a version of basically a Garamond-like serif where they physically cut the letters differently at a small size versus a large one.

You’ll notice the stroke contrast in that top line, it’s not particularly fine detail. It looks a little bit chunky. The idea is that, at a smaller size, you want sturdier characters that are physically larger size. You want to be able to accentuate that difference and look at it a little bit more like this. That optical size axis now brings back a technique that we’ve been using for hundreds of years but we lost in the ‘60s and ‘70s when we went from metal type into phototype and then digital. We’ve kind of brought back this idea.

If you look at some of the typefaces that are available now, I know Retina from Tobias Frere-Jones has this capability. The new Helvetica Now has three different sizes that you can purchase based on how you want to use it. That is optical size in the current technology in separate files. Now you’re multiplying the number of files even more, or we can have it in one.

That’s pretty interesting that we can start to work with all this stuff. It ties into our existing mental model of CSS very well. There are some other things about it. The performance is really pretty remarkable. I’m going to show you some things a little bit more specifically about that but I wanted to kind of talk a little bit more about this idea of friction in improving that reading experience.

Here, we’re looking at two different typefaces. 00:12:54 Up top is OKay Sans from Okay Type, Jackson Cavanaugh. Then this one down here is a new one from Google that was commissioned from Stephen Nixon called Recursive, and recursive.design if you want to actually download and play with it. We’ll look at it a little bit more in a minute.

I will just pause for a moment and remind you this is in a browser. This is all HTML, CSS, and real Web fonts. Everything that you’re seeing here is actual stuff. It’s not screen grabs. It’s not made in some other graphics application. This is stuff that you can use today.

We’ve got these typefaces here and, at the end, there’s an example of all of them and all of these slides and resources are already up on noticed. There’ll be a link to that at the end, so don’t worry if you miss anything that I’m standing in front of down here in the corner.

We’re moving and scaling things and changing the way it appears as the screen size changes. We’ve got our responsive typography going on. We’re starting to reduce that friction and improve the reading experience across these devices. That’s how we’re doing it, so it’s even worse. It’s not even just a design system talk. It’s one with math.

[Audience laughs]

It’s okay. It’s this. Rather than -- again, this was a shift in mental model for me. I trained as a graphic designer. Specific point size relationships are burned into my DNA from working in print design. As I started to work more with more and more screen sizes and I started to embrace these new ideas in CSS, I stopped thinking about that specific relationship and started to think about proportion. This piece of information is more important than that one, so it should always be a little bigger.

If we use calculation and CSS custom properties, we can now start to have our typography just scale. This was something that Tim Brown wrote about a few years ago. He called this technique CSS Locks. “On a small screen, I want it to be this size. As soon as you hit this breakpoint, start to scale. Stop when you get here.” That’s the whole premise.

We can apply that same technique to both font size and line-height so that, as we have something like this here, this was something I designed for Monotype last year for FF Meta, the release of their first variable font. Everything that you’re seeing here, this is just another embedded webpage, which is also up on CodePen, where everything that you see is generated from a single file.

There’s your comparison for performance. Instead of loading almost 300K of font data, I could load 84. In the production version of this, they have a width axis too. This one just had weight and italics. The file size is a little bit bigger, but it’s still much smaller than loading things individually.

The other thing that I really had to think about as a design is, what do I think about those proportions as the screen size changed? Does it need to be the same? The answer is no, it really doesn’t.

As a designer, I can embrace that serendipity of this kind of overlap and just, at the smaller screen size, lighten the color behind it. It’s still readable and it’s still kind of interesting. The animations still work, so if I want to kind of show people what’s going on with this, they can still have a little play with it and see how it all works. If we kind of let go of the things that we can’t control and embrace the things that we can, as designers, as typographers, as developers, we can start to really stretch with some of these new things and get into the stuff that then comes beyond.

This was another quite from Tim’s book. By the way, it’s a book called Flexible Typesetting from A Book Apart. I highly recommend it. He’s really brilliant and he really walks you through a lot of very pragmatic approaches to typesetting well on the Web. We really kind of share a lot of common ideas with this.

This thread here, this is the what’s next. We’ve embraced a lot of these ideas about how to typeset well on the Web, how we can work with the different conditions and screen sizes, but now we need to work with the user. We need to make this better for them and give them the control.

One of the ways that that is going on these days is with light mode. How many people here are using dark mode on their phone? Right, that’s a lot of people.

How many types have you gone to a website with dark mode on your phone and had the website actually react? I see one person raise their hand. Two. You might have actually been looking at my website.

[Audience laughs]

That was a spoiler. I’m sorry.

We have our variables for color. We add in a media query and it responds. That’s it. That’s as hard as it needs to be. It took me about a half an hour to set this up on my own site.

Prefers color scheme. If it’s set to dark, then react. It’s just like a media query for size and it’s supported in the major shipping browsers right now. If it doesn’t work, your site still is going to be just what it is.

This is a little bit of extra code that we can put in there to help the website respond to the preference expressed by the user. Because we’re being intentional about it, we’re going to make sure it looks good. It’s not going to be an automatic, high contrast mode in Windows, not that there’s anything wrong with that, but a lot of people do use things like that and we need to keep this in mind, but we can be more intentional if we anticipate it and build it into our workflow.

Another thing is just people with low vision who need a little bit more contrast. There’s another axis that has been incorporated in a few different typefaces called grade. That is a way to modify the weight of the text without the metrics of the space it occupies.

However, we may also want to space the letters out as we make them heavier, so we combine a couple of things like letter spacing and the font variation settings to change the grade. We can make that just a little bit stronger contrast, so older eyes like mine will have a little bit easier time. If you look at some of the demos from Mandy Michael where she ties it into an ambient light sensor, as the room gets darker, contrast gets stronger; you have an easier time reading.

There are really some interesting things that we can do to react to where you are and who you are and give you the choice. What I like to do is think about things like text size. That used to be an option on a lot of websites and it kind of went by the wayside when people could use page zoom. However, not everybody wants to zoom the whole page. They just need the text to be a little bit bigger.

My next public service announcement; don’t use pixels for font size - ever. The reason for that is, when you do, you explicitly will break the user’s ability to set the font size in their own preferences. Use it for your own convenience. Do some math. Have the final result be ems or rems. Then it will respect the user’s preference. A minor little thing, but it has a huge implication on accessibility for people and we need to give them that control.

This is another one that I really had here as an intellectual exercise more than anything. This hit home to me a couple of weeks ago at a conference in Toronto. The reason I put this here is some research. It was a presentation from Kevin Larson from the Advanced Reading group at Microsoft where they looked at research around people with dyslexia and a certain subset of them that had a condition known as crowding.

For people with that condition, they found that if they could space out the words and lines a little bit more, they could increase reading comprehension by 50%. Think about that for a second, a 50% improvement in their ability to take in the content that you want them to read by adding two lines of CSS. Who are we to not think about this? We need to check our own mindset at the door and think about what’s important to the people looking at these sites and see what difference we can make for them.

As I said, this was sort of an intellectual exercise until I met this young woman who came up to me after the talk and said, “This really struck me because I have dyslexia. As soon as you did that, I could read it.” She didn’t know that she had crowding. She’d never heard of crowding. It was the act of watching this talk and showing this demo that actually gave her some understanding about herself. That is incredibly powerful.

That is what we have in our control as designers and developers is to take all of these things and think about putting that into a website. Build this into what we put out there so the user can decide for themselves what will make this an easier, better, more comfortable experience for them while still maintaining the integrity of our design.

This was kind of done sort of on a whim, but really reacting to people I’ve spoken with all year long. This thing has really started to hit home to me as something that we need to think much more deeply about.

I’ve got another demo on CodePen that takes some of this stuff for the light mode and mixes it with a user preference so it can react to the light mode based on the media query or what they’d prefer and save that setting in local storage. We combine all of these little ideas and roll them up into this panel that lets people make a choice. Save that preference and it survives their entire journey through our website. That’s a tremendously empowering thing that we can do.

The other thing that I wanted to mention about this, sort of kind of round out this section, is that we can make this into a more flexible framework. It doesn’t have to be bespoke and done expressly for every single project. We can make it more portable by again leaning into what we can do with CSS custom properties. We can make this a system that all we have to do is modify a couple of things and take it from one project to the next.

This exact same code could look like this and just change out a few variables. Change out the font stack. Change out a couple of font sizes that you might want to alter. Without any other code, we could take this from one project to the next and just customize it for the font stack that matches that design system.

I don’t want to say that you should do all of this extra work on every single project. I want you to do all of this work once and be really efficient about how you reuse it. Then, every time you start something, every project is that much better right out of the gate. I know that this works because I’ve done it on a number of projects over the last two years and has gone into production for millions and millions of users with hardly a line of that underlying code really being changed other than how it’s kind of worked in.

Now that we’ve talked a bit about how to reduce the friction of the reading experience and consuming that content, I wanted to talk about making it harder. The reason I wanted to do that is, when we look at -- this is a bit potshot at the New York Times. I’m sorry, Natalya, but bear with me. I promise it’s meant in good spirit.

it’s not just the New York Times. It’s Medium. It’s every other platform where you’ve got big photos. That’s a little self-indulgent, I guess. It’s reasonably well typeset, but it’s really not that interesting. I mean it’s nice that we have white space and it’s certainly better than a lot of what we’ve experienced in the past on the Web, you know, that tiny little corner of content there with all the ads wrapping around it. But we’ve got a century of graphic design and publication design that we could look at for inspiration and, instead of always having this same answer, we could build a little bit more flexibility into our tools. With a few extra lines of CSS, maybe we could be a little bit different about it.

Based on screen size, this will stay the same, so we’re embracing some of the ideas of grid and the calculations about subtracting the content area from the remainder and then have this stuff scale first and then content will scale. We can move these things around by just building a couple of switches into our CMS or maybe we change it around again and embrace reading modes.

You know what? People will figure it out. If we slow them down for an extra two or three seconds to read a title, you know what? They’re not going anywhere. They’re actually going to look at that and say, “Oh, that’s different. What does that say? Oh, okay.”

Then using media queries, it’ll go back to being a nice, normal title when you go onto a small screen and that’s fine too. But we don’t have to stop there. Again, I’ve been doing this with the same HTML. I added one more div and it got a little bit more interesting.

We look at things like using a CSS shape and then wrapping the text around it. Then picking up a color from the photo and using it as an accent. That’s something that we could do pretty easily in a CMS and actually have that change with every article if we want to use CSS columns. As the screen gets wider, the first introductory chunk of content can actually start to flow across.

We’ve got our initial caps. We can use those. That’s stuff that we can do relatively easily. We can pick up some of these techniques that have been around for decades or even centuries in how we design publications and not forget that we learned how to communicate long before the Web ever existed but we’ve forgotten or never learned some of these techniques in the first place, which is why I started writing about this.

I published a more or less weekly newsletter about Web typography, just looking at each one of these techniques and trying to kind of build a library for people so that they can reference and go back and say, how do we make it a little bit more polished, a little more interesting, a little more sophisticated or, in some cases, even a little more challenging? By letting it break, by letting it reflow, we can capture some of that magic and some of that excitement from the graphic design that we’ve seen in publications and still have something that’s sustainable.

I know that we can’t custom code things all the time, but we don’t really need to. We can actually just create a couple of templates and then we might build in a couple of sliders and a couple of little bits of customization so that we can say, with this headline, we want to do a little bit more. And so, we don’t have to do it on every post but maybe one a day. Maybe once every week, you actually do something a little bit different.

I’m going to show you a couple of places where we’re actually putting that into production on a project I’m working on right now. I just wanted to show you that you can still create interesting design and these interesting moments across screen sizes. You don’t have to stop there.

This is Ad Hoc. I’m actually going to flip over here and show you the live website so that we can take a look. This is using two variable fonts, Proxima Nova, which is still in beta, but that’s coming, and Portada from TypeTogether.

When we look at the basic blog post without doing anything else, they have a pretty decent hierarchy. They can do a little lead paragraph there and it automatically kind of puts all this stuff in. Everything scales pretty well. We’ve got our little design system patterns going down here in the bottom.

We can also, by adding one class and another line or two of CSS, have something a little different. They can art direct this a little bit by playing around with the maximum scale on the type, having it float, and then adding a shape around it and then customize that shape.

I’ll show you one of the ways that we foster this collaboration is actually by using the dev tools that Jen Simmons helped sort of spur on into being at Firefox. If we look down here at the bottom, there’s a font palette.

If I inspect this element here and click on the fonts tab, it tells us everything about this font. This is incredibly useful. This is how designers and developers can collaborate live in a browser because that’s where you’re really going to see what the type does.

We can actually go in here, and we can play around with that width and weight, as long as I actually grab -- there we go. We can kind of play around with these things and decide exactly what’s going to work and then, after we’re done, we click over on changes and gather up the CSS and pass that back to the development team.

We actually are able to do an awful lot right here in the browser. Even more than that, if I come back over here and look at the rules, we have inspected that H1 element. That’s the one that has the shape around it. I click on this.

Wait a minute. Let’s reload. I’m actually tethered to my phone right now to get an Internet connection, so just bear with me for a second. There we go.

That’s another thing that they’ve added is the shape editor. Combining these things, I can teach a designer who knows nothing about writing CSS how to go in here and say, what exactly did I want to have happen with this design? Okay. That’s sort of it, but not really. Maybe I need to pull this back out. Again, all I have to do is go over here, capture those changes, and pass that back to the developer.

We’ve facilitated communication between team members and enabled some really interesting typography. By embracing things like end units that scale with the type, this stuff actually travels really well. They can do this in about five or ten minutes to art direct that one post rather than having to do a whole lot of custom coding.

This stuff is real. This is live. This is up on the Internet. They can actually do all of that stuff. I think that that’s where we found this middle ground. We’re not going to custom code everything but maybe we’ll write a couple of lines of CSS and be able to create a more interesting and vibrant experience for their readers on the particular post that they want to emphasize.

That’s not how we wanted to show it. There we go. Skip past that.

Okay, so that’s a little bit of art direction, a little bit more interesting typography, embracing some of these new things with the custom properties, the calculations, the variable fonts. What about the actual form of the reading itself?

I’ve been thinking a lot about this because I wrote a book about Web typography and I did not have the ability to specify the typography in the book. As a designer, you just have to stop and think about that and cry a little bit inside and then just kind of step away.

It’s even worse in the e-pub format where this particular publisher that I was working with does not even try to embed any fonts in it. It’s just whatever is the default in the reader where you’re viewing the book and it’s really terrible.

if I do another book, and I’ve thought about it a lot, I don’t think I want to do it that way. I think I want to publish it on the Web because, frankly, I think I can do better typography here than I can in an e-pub reader.

If we start with something like this and, again, this is sort of tried and true. It’s a fairly standard kind of layout. We’re floating some images off to the side. We’ve got some reasonable typesetting. By the way, this is also all set in a single variable font. This is Univair, one of the ones that Monotype has released recently.

That’s fine if I want to consume it in a normal scrolling format but what if I’m on an iPad and I just want to read it like a book? Well, we’ve got some new CSS for that too. Again, we’re pacing our layers here. We can have a regular webpage or we can add a little bit of CSS and embrace some things like multicolumn and CSS scroll snapping.

Now, I can just kind of go over here and just flip it from one page to the next. It’s doing a really nice job of moving the figures from one place to the next. Rachel Andrew has been writing a lot about multicolumn. Look her up on Smashing Magazine. She’s got a great article about fragmentation, which is what we’re dealing with, moving things from one column to the next.

This is all entirely responsive. It doesn’t matter what screen I’m on. It’s going to create pages 100 viewport width units wide at a time out until it stops. Use a little bit of JavaScript to add a div that’s the width of the screen and we snap to the edge of that. The progressive enhancement bit of this is that, if that’s not supported, it’s just a webpage and you just scroll down.

When I did this initially, it only worked in Safari. I opened it up a couple of months later when I went to give the talk again and, all of a sudden, it worked in all three that I was testing in. Proof that when you follow the spec and the browsers implement it, it just starts to work.

All of these things kind of taken together gave me this whole different experience of how to take in this information and, because it’s in a webpage, if I want to embed a CodePen, I can do that. If I want to create other interactive elements for people, I can really craft a reading experience in an entirely new way that works on any device. I can even make this work offline if I read more of Jeremy’s book. I haven’t gotten far enough, Jeremy. I’m sorry.

All of these things kind of taken together start to allow us to add up to rethinking how people interact with content and it’s all through how we treat the typography. I just think that that is really incredibly powerful.

I’ll just show you one or two more things. I know I’m kind of getting down to the end of time. This is the pattern lab style guide that we put together for the State of Georgia. Well, it is an image of the style guide. Here is the actual one with all of the different sorts of scaling typographies using Source Serif for the typeface.

Then if we kind of play around with moving this and scaling it a little bit, you can kind of see how the typography moves and changes. This has now been deployed on, I think, over 40 websites in the state of Georgia, so there are millions of people interacting with this every day. We don’t have to touch that typography from one site to the next. It just reacts perfectly as it goes. That’s been really exciting to see that work.

By the way, using @supports in your CSS is the way to put this in production now. It will work in Firefox, Safari, Chrome, and Edge. It actually has been working in Edge, but even when that switches over to Blink--that’s releasing soon--that’s going to work even better. Using @supports means we can deliver it to all those browsers and then still deliver static Web fonts to the users of IE11 and anything else that doesn’t support the variable fonts and have that in production safely.

They’re not the only people that are playing around with this. The Nielsen Norman Group has used them on their site. We’ve used them in Georgia. We’ve used them with Ad Hoc. IBM sponsored the development of Plex Sans as a variable font. This is a pretty remarkable difference from 960K can be represented in 233. That’s with a far bigger character set than most people need to deploy on their site. When you subset that down to whatever the character set is that’s relevant for your audience, then it’s even smaller. That’s for the roman and the italic.

Monotype has released these. You can get these on Fonts.com. They’re really great sort of core brand typefaces that a lot of big companies use. Having a full width and weight axis on all of these is absolutely stunning. They really are beautiful and fun to work with. These are just some of the big stories.

There’s also a ton of stuff coming from Google. This is Recursive. Again, this is kind of like live in a browser. We’re looking at this and it’s something that can go from a monospace to a proportional. It has this sort of expressive axis that you can kind of play around with. This one also, in addition to weight, has a separation of italic and slant.

David Jonathan Ross has also done that with Roslindale, which is the typeface that I’ve been using in this presentation quite a bit. This allows you to control the angle. If I force this to off, notice that we have an angle change. It’s a slant like you would see with a typical San Serif. But it also allows you to then separately trigger the italic forms.

You have a lot of choice in what you do with this, and so using this as a coding typeface, you can keep it monospaced. You can play around with the expressiveness if you want to, have your comments show up with the fancy axis triggered, or you could actually leave it proportional and use it in body copy. You can actually do an awful lot with just that one asset. This is kind of an interesting little snapshot of where Google is headed in supporting this stuff, but that’s not it.

What you’re seeing here is yet another page from Odyssey’s travel blog this time set in fonts from the Google fonts API. This works right now. They have this in beta. They have about a dozen fonts that you can use. They’re working on a whole bunch more. I actually just found out yesterday that I’ll be working with them on some of those things.

That’s super exciting that you’re going to have, I think soon, a bunch more variable fonts that they’re going to allow and then there’s just a simple little bit of code to pull it from the API and decide what axis you want and what range and then be able to incorporate it right into your page. It so happens that they’ve actually been doing this already and they just didn’t tell you.

How many people here have used Oswald on a website? At least a few. Not a ton, but you are definitely not alone. It is one of the top five Web fonts that they serve and they are now serving it as a variable font about that many times a day.

They didn’t tell anyone. They just started doing it. That’s the power of this technology. They looked at the sites that were using this and if there were enough weights in use, they simply started serving the variable font instead and nobody had to rewrite any of their CSS because font-weight is font-weight. It just worked. I think this was a really powerful testimonial to just simply the performance aspect of this, being able to just kind of rip and replace.

I had another customer--well, potential customer--come and talk to me about their sports website that gets millions and millions of users every month looking at tons of high profile sports streaming stuff. They asked me what would this look like. Could we use variable fonts on this website? I went and looked at what they were using and it turns out there were two of the fonts of the three that they were using that are available as variable fonts.

There are four instances of one, three of the other, and I looked at the comparison between the two. It could go from 370K of font data down to 100 and go from 7 requests to 2. That’s a 270K difference. Granted, when you have two megs of JavaScript then maybe you don’t care but you should. This is an easy way to increase the performance and the render time of that page, the time to content that people can interact with. You multiply that 270K out by a few million users a week or a month and you’re starting to talk about some pretty real money in bandwidth fees. That’s terabytes of data that you could remove from that bill.

There’s a whole bunch of different reasons why it’s a good idea to look at this stuff but that’s a means to an end. We fix the performance and then we can get to designing better because bold is not bold at every size. It actually should be modulated. The bold weight that you use in body copy should probably be a little lighter than the bold you use in your headings because you need the letterforms to stay a little bit more open. Instead of 700 weight, maybe it should be 600 or 575. It’s enough for relative emphasis to the text it’s sitting next to while still maintaining legibility.

This is what we’re allowed to do with that. This is another bit of a non sequitur, but a really interesting application. Laurence Penney is the guy that created Axis Praxis, so if any of you have played around with that site at all, that’s the guy behind it. His wife/partner is a type designer and they work together to try and fix the problem in Greek websites.

A lot of sites put up that have Greek content actually don’t have a very complete character set and so, if you look especially at that row of letters right there, you’ll see the difference in those pairs of letters because the font that is in use does not have the proper Greek characters in it. What ends up happening is you have this dropping out and this mixed effect of text that constantly has the wrong typeface showing.

What they figured out was, by using effectively the internals of the idea of variable fonts, they would let you upload the font that you’re using and they would generate this customized little fallback font that would supply the characters that are missing and, instead, it could look like that. This is subtle. But if you’re Greek, it’s a really big deal. Instead of it being kind of a messy mishmash, it could look just like this.

What they’re doing is actually kind of working inside with a bunch of parametric axes to create a fallback that they then serve for you that might be 5K and it just goes right into your font stack as the next one behind the font that you have that isn’t complete. Then this is what gets served to fill the gaps. A really creative, imaginative way to kind of polyfill for something that’s not quite complete.

They happen to be doing this for Greek, but you could do this for any language. You could easily imagine this as an operating system level kind of thing. I think it’s really brilliant. It’s just another way that we can apply some of these technologies and ideas to improve the overall experience.

Now, this last thing that I want to kind of rush through before I totally run out of time is what’s coming next. One of the things that I do is I’m on the Web fonts working group as an invited expert at the W3C. One of the biggest problems that we have with using Web fonts is the performance of serving them in the first place.

The idea behind what I’m about to show you is something called progressive font enrichment. Monotype, Adobe, and Google have all been doing something similar with their own proprietary solutions for a while but the idea here is that if you’re looking at a page that only uses 87 glyphs, why are you getting served 700? Wouldn’t it be better if we could serve you those 87 and then, when you go to another page, if there are only 14 new ones there, just serve you that? This is going to become a reality or at least a really great demo.

I actually can show you this live. This is also something that you can link to and play around with yourself. This is something the Google team has exposed to everybody to play around with, this incremental transfer demo where, if I go over to my trusty travel blog here and I copy the first couple paragraphs of text, and this is meant to simulate. I’m going to clear this out and paste this text in. We’ll add that text.

Here what this is doing is it’s going off. Here’s our demo content and there’s the result. If we had requested the whole font, we would get 33K of data. If we add the incremental transfer, we only need 11.2. To render that text, those first 2 paragraphs, we needed 11K of font data instead of 33. It’s already a pretty significant reduction. You can imagine if this is a larger production typeface; there’s going to be an even bigger savings.

Now let’s do this. This is a pretty long -- this is like the first book of the Odyssey. This is a journey. This is not a small chunk of text. We scroll all the way down to the bottom, grab the whole rest of that and copy it. I’m going to go back to this and, here, paste it all in, and add that to our transfer.

Let’s see what happens. A little Jeopardy music and see if my phone connection actually still -- there we go.

All right, 4.7K. All of that extra text, all we needed was another 5 K of font data to render it. Imagine every single page view across your site is going to get faster and faster and faster. That’s pretty significant when you’re dealing with Western language websites.

How many people here deal with stuff in Arabic? For reference, a typical Arabic typeface is not going to be 100K. It’s going to be 2.5 megs. You can’t serve that every time. You can’t push that over a slow bandwidth mobile connection. You end up not doing it. The typography suffers. The reader suffers.

How about Chinese, Japanese, or Korean? Anyone? We have a couple. Those fonts could be 16 to 20 megabytes. Stop and think about that for a moment. Think about that over GPRS. It’s not going to happen.

These are bits of technology that add up to our being able to communicate effectively or not because always having to rely upon what’s built into that individual browser is not going to be the most readable. It’s not going to be the most on-brand. It’s not going to be on tone. Now we can be.

You couple variable fonts, all these new ideas, and this ability to transfer it that way and this is probably a year or two away, but it’s coming. Everybody is working on it. All the engineers from all these companies and really brilliant minds are making this a reality in order to improve the way we communicate and elevate our ability to work together, collaborate, and share this kind of understanding. That’s a little bit of what’s coming.

I’ll just kind of skip past that a little bit.

Here are some of the fonts that were in use. Every single one of these is a real typeface. A lot of them are open source. A lot of them have demos. There are many, many more. Nick Sherman’s v-fonts.com website is sort of a catalog of all of these things. There are a bunch of websites that you can play with these things on. I’ve got a whole slew of demos up on CodePen that you can play around with. All of these resources are available.

I’ll get out of the way so you can finish taking your pictures. Good?

[Audience laughs]

Anybody else? Speed it up a little bit?

[Audience laughs]

All right. Thank you.

[Audience applause]

Speakers