Web Fonts Performance

[00:00:00]
>> Jason Pamental: I'm going to dig a little bit more into some examples and details about responsive typography. And then we'll be able to start and flip over and look at some of the sample pages as we go. And then we're gonna take a look at variable fonts, and that's going to sort of take us up to lunch.

[00:00:17]
So I went through these earlier. Now we're gonna go into a little bit more detail. So this is sort of the core tenets of what I think about when I say responsive typography. So performance being the first one, part of performance is simply making good choices. Making sure that when you're choosing to use a given typeface or font, that you are only loading what you really need.

[00:00:50]
And that's been the hardest part about dealing with typographic systems, is that in print, on a magazine cover, you might end up using eight or ten or more different weights and variants of a given typeface, or several typefaces. Where on the web, if you want to load more than three or four, it's going to start to become a real burden and it's going to really start to slow down the user experience.

[00:01:15]
So the first step is to not add everything. You wanna make sure that you load what you need. And so I've been using these terms, typeface and font. Recently there's been a little bit of a question on whether or not we need to draw the distinction. But I do think it's important fo you to know what people mean.

[00:01:35]
So Trade Gothic is a typeface. It's a family. It's got a range of widths, a range of weights, there's italics. When I say bold, specifically, that is one instance of that typeface, that's the font. And more specifically, that is actually a piece of software that you're installing on your computer.

[00:01:58]
Where if we were talking about metal, then it would be the case full of metal formed letters at that physical size. So in digital type, that font can be a range of sizes. But it is just the bold, or just the regular, or just the condensed.
>> Jason Pamental: Every time you add another one of these, you're adding more to the page load.

[00:02:24]
And you're adding more at the point in time that will most directly impact that person's user experience. So adding in, well, it's a whole other discussion about how much JavaScript you're loading. I won't wade into that right now. But at least a lot of those things can be managed a little bit more effectively and loaded asynchronously later.

[00:02:46]
And the page can actually render. But in order to get the page up on screen, have the content render and be in a usable state, fonts are gonna be an issue. And you need to make sure that you're loading them properly. So when I go into Typekit, and I made this screenshot a while ago, but their interface hasn't changed all that much.

[00:03:07]
When you go into Typekit, and you create a kit, or if you're using Google Web Fonts and you say I wanna use this font, and you start to check off all the different weights that you want to use. If I check off all of them, and this is for quarto slab, if I check off all the different weights and variants, that's 450 K.

[00:03:27]
That's a lot of stuff to be loading, and there's some real question about whether or not I would actually make use of all of those. I might like to, but I probably could make do. And so as a designer, my responsibility is the whole experience, not just what I think visually looks good.

[00:03:47]
So instead I pare back. I use two different, a sort of a demi-bold and a demi-bold italic, and then same thing for a book and book-italic, so like a regular weight. That brings it down to 121k, so that's a little bit more manageable. And one of the things to keep in mind is that font assets are cacheable.

[00:04:07]
So if you're handling it properly, that's not going to result in a penalty or a double download from one page view to the next. And there are ways that you can mitigate some of, I think particularly Chrome still has a weird behavior. Do you have a question?
>> Student: Yeah, does the size impact how long it'll take the font to load?

[00:04:26]
Or will it actually slow down the whole site depending on how big the font size is when it's coming from a CDN like that?
>> Jason Pamental: Well, the size of the asset, it's just another asset that has to be downloaded in order to render things correctly. So if you're loading fonts asynchronously, which you should do, then it's not gonna slow down the page being rendered.

[00:04:51]
But it is going to impact repaint, once the web font has loaded. Now, doesn't matter whether it's coming self-hosted from a CDN, from a service. One way or another the asset has to get there. The bonus is, at least, if you're using this stuff consistently across the website it gets downloaded once.

[00:05:13]
Whereas if you think about that is the same size of a JPEG that you've stuck in the header behind a bunch of text covering up the whole screen, that's a different image every page. This at least is a reused thing, so it only happens once.