Typography on the Web

Welcome to the Secret Sauce, our short podcast that is typically around 10 minutes long and offers a quick tip on some small thing you can do to help your business run better. Account Manager Allison Manley is joined by our peer Jason Pamental, the Director of Design and Technical Strategy at Isovera in Massachusetts. Jason shares his thoughts about typography on the web, and how he got into it in the first place.

TRANSCRIPT

Allison Manley [AM]: Hi, and welcome to the Secret Sauce, brought to you by Palantir.net. This is our short podcast, up to 10 minutes, that offers a quick tip on some small thing you can do to help your business run better. I’m Allison Manley, an account manager here at Palantir, and today’s advice comes to us from Jason Pamental, the Director of Design and Technical Strategy at Isovera in Massachusetts. I caught up with Jason at DrupalCon, and he wanted to share with you his thoughts on typography on the web. 

Jason Pamental [JP]: Hi, I’m Jason Pamental, I work at Isovera, a Drupal shop right outside Boston, Massachusetts, and I’m here to talk about web typography, and kind of how I got into it. Which, interestingly enough to me . . . I think about it when I’m here . . . I actually got into it because of people I talked to at DrupalCon.

I started writing about web fonts when TypeKit came out in 2009. Studying graphic design many years ago, I always loved type, but couldn’t ever really do that much with it online. When TypeKit launched, I had already started using Drupal, and I was using TypeKit, and there were no modules. I found somebody had started one and I just got involved in that: I became the co-maintainer. And that was one of my first forays into using, actually getting into the contrib space. 

But then it opened up into talking with a bunch of core developers at DrupalCon in Chicago. It was Al Stephan and Matt Tucker, and a couple other people, in a bar of course, at two in the morning. And I figured if I could convince them that web fonts were actually worth implementing, then I should really do something with that. Since then I’ve spoken about at DrupalCons on three different continents, and written a book about it, and absolutely love the way the sort-of art and science of using fonts fits with that same way that Drupal can kind of tie into how an organization works, and how you create websites, and that same sense of . . . that blend of strategy, and design, and technology all kind of in this one big platform. It’s been perfect. I spend a lot of time thinking about how to implement it, and teaching people how to do it and use web fonts and now I get to kind of spread that around with the rest of the technical team at Isovera too, which has been a lot of fun. 

One of the things that actually struck me in how to use web fonts well was actually . . . one of the guys from Vox Media was talking about it in a session yesterday . . . he was talking about image performance, and font performance, and ads. One of the things he started talking about with font performance was something that I had actually written about a while ago: it was a way to balance that flash of unstyled text or unseen text when things are loading. 

And that actually ties into a great way that Drupal 8 allows you to control the loading of Javascript. So it really comes down to when you’re loading the web fonts, the first thing that happens is the browser sees the listing for the web font in the CSS, and it has to think about whether or not that web font has loaded. Most of the time it hasn’t yet, so the browser default behavior is to not show anything. That’s actually how all the browsers behave now. The problem is that when you have all these other things going on in the loading process of a page from Drupal, if you’re also then waiting for a web font to load, you’re creating a pretty big delay, and it could be a significant delay in actually seeing any content show up on the page. 

So the trick is to actually use something called the Web Font Loader, or something like it that will inject a class into the page. You set the font loading to be asynchronous using Javascript, and that’s something you can easily do now in Drupal 8 to control where the font, the script is executing. And in doing so, you get the unstyled text on the page right away by tapping the CSS into this web font loading class. Then you can style that fallback: you can set the line height, the font size, the letter spacing, all through CSS that is sort of scoped to the presence of that WF inactive class in the loading pattern. 

And this is something that the guy from Vox was talking about using on The Verge, on the Vox Media site itself . . . it’s a loading technique that is the easiest thing in the world to set up. I actually have it built into a couple of frameworks and a theme that I maintain on Drupal.org called Beep Edition that will give you some pretty simple hooks to try this stuff out for yourself. 

So that loading process  . . . getting the text on the screen right away . . . is another one of those ways to achieve better perceived performance and minimize the difference for people when they are loading stuff. 

So if you’re interested in checking that stuff out, if you look at the theme that I have up for D7 and D8 on Drupal.org, Beep Edition, it has a lot of that stuff built in. 

AM: Thank you, Jason, and so nice to meet you at DrupalCon New Orleans! For more great tips, follow us on Twitter at @palantir, or visit our website at palantir.net. Have a wonderful day!