Transcript

Jen

This is The Web Ahead, a weekly conversation about changing technologies and the future of the web. I'm your host Jen Simmons and this is episode 87. I first want to say thank you so much to today's sponsors, Citrix GoToAssist and Squarespace. Bandwidth has been provided by CacheFly, the fastest, most reliable CDN in the business. CacheFly delivers all the content at 5by5. Check them out at cachefly.com.

I've never done a show like this before and maybe you can already tell. I probably sound different because I'm using a different microphone. I'm here in New Orleans with Jason Pamental. Hi, Jason.

Jason

Hi.

Jen

We both just spoke at the CSS DevConf.

Jason

Yes. Some of us spoke twice.

Jen

[Laughs] I spoke twice. I spoke yesterday and then again today. So if we sound really tired, that's why. [Laughs] But I saw you in the hall and I was like, "Let's do this." I just bought some audio recording equipment last week so I could do the show on the road and do other kinds of interviews with people on the road. I'm still figuring out the equipment.

Jason

But it all looks really cool. Very high-tech.

Jen

It looks really cool!

Jason

There's, like, wires and cables and microphones pointing everywhere. It's pretty fancy looking.

Jen

Let me see what channel... [mumbles] Yeah. So you spoke about responsive typography.

Jason

I did.

Jen

I thought that would be a really great subject to talk about. Because Jason Santa-Maria was just on the show several weeks ago talking about web typography. I asked him a lot of questions. They kind of were all the same question: how do you choose a typeface? [Jason laughs] Or, better, how do you design a typography system and create beautiful typography? But the talk that you gave was, in some ways, more about the tech behind putting fonts on a website. A lot of the details. You had a lot of tips and tricks-type details for people to think about in order to successfully do this on a website.

Jason

I have to say, it took me a long time to write the book. I know that Jason went through a similar thing. I had just gotten the deal to do this with O'Reilly and less than a month later, they announced that Jason was working on a book about it as well. Pretty much my first reaction was, "If I don't finish mine first, no one will ever buy it because they'll just buy his."

Thankfully, it turned out we have very different approaches to what we wanted to talk about. It's ended up being really complementary. I just finished reading his book on the way down here. It's amazing. I absolutely loved it. But I also felt like there was still a lot of things to talk about. I've always been someone who was self-taught with typography and while I love it, I don't think that I am necessarily the best person to talk about typography from and aesthetic standpoint. I think I still have a lot to learn. I always feel like I do, anyway. But I've spent a lot of time figuring out how to make that work well on the web. It's coincided well with the advent of Typekit and the rise of things like responsive design. I just felt like there were a lot of things that overlapped but things that were really very different and distinctly about type. That was why I tried to figure out, "What do I call that? How does it fit in the larger world of what we do on the web?"

Jen

I should say, you just published a book with O'Reilly called Responsive Typography.

Jason

I did. I was really excited to find out that you keep it in a safe in the hotel. I thought that was pretty awesome. I feel very special.

Jen

Yeah, we're in a hotel room with curtains all around us so hopefully that's a good sound booth. [Jason laughs] But I got here and I needed to pull out some equipment that I had stashed in the safe and, yes, I had stashed Jason's book in the safe. [Both laugh] Because it's valuable and I don't want it to get stolen. I don't know where I would get a new one.

Like the books that are being put out by A Book Apart, your book is a short book. It's an easy read. It's not a tomb of hours and hours of figuring stuff out.

Jason

I love the A Book Apart books and I think I own pretty much every one of them. Except maybe one or two. I've read them all at least once. I felt like that was the right size. I think trying to write more than that... one, I never would have finished it. There's just no way.

There's also that timeliness to it. I didn't want it to be a book that was out of date in six months, and I don't really think that it will be. But some things will change. We have to deal with these things now and there's literally nothing else out there that I've found that collected this stuff this way. It just seemed like the right thing to do when the chance came up.

Jen

What do you think is one of the biggest problems that people run in to? Something that people don't realize when it comes to actually putting web fonts on a website successfully? There's a whole bunch, so let's start with the first one that comes to mind.

Jason

Well, Jason... the other Jason. You know, weirdly, there's actually three Jasons all writing books on web typography. There's Jason Cranford Teague, Jason Santa-Maria. I'm the only one with only two names. I'm just Jason Pamental.

I think the first step is actually choosing good type. From Jason's perspective – and mine, too – but if you're reading his book and looking at it from that perspective, it's really about choosing the type that has the right voice. To amplify what the message is that you're trying to get across. Fit with it and work well in the context of the design.

But technically, it has to be a font that works well. By that I Mean, it has to be one that renders well in a browser. Because it's going to render differently in a browser than it does in Photoshop or Illustrator. It's going to look different on a phone versus a Windows machine versus a Mac. It's going to look different in different versions of Windows because there are different type rendering engines.

So the source of the typeface matters a lot. That's one thing that a lot of people really don't know. One, they have no idea how many are available. But they may not also realize that getting it from one font service to another could be very different. Getting it from something that looks like it from Google Web Fonts may not work as well as one that the got from Fonts.com. It's not to say that's necessarily true, but you don't know if you haven't tested it.

That's actually, I think, the very first thing that people need to do. They need to prototype their type first. That's why things like Typecast are so awesome. It has typefaces from all of these different services and you can go in there and build little type prototypes with headings an paragraphs and links and stuff. Then duplicate that chunk of type on this canvas of your webpage and try different typefaces. Then it's a shareable link that you can test in other browsers and see which ones render better. They have stuff from Fonts.com, Typekit, Fontdeck, Google Web Fonts, all in that one service.

But however you do it, you've got to just see how it works before you go full-boar on doing a whole design.

Jen

Yeah, because frequently you can get the same typeface from more than one company. I was choosing Avenir for a project and realized that it's available... well, maybe that's a bad example, because it really was only available at two places. But there are plenty of faces where the same face is available at five different houses.

Jason

Right, like a Garamond. Everybody has a Garamond of some kind. They really vary widely. Not only stylistically, there's lots of little differences, but you'll see different file sizes, different quality of rendering in different operating systems.

Jen

I think that's a big one. I work on a Mac, a lot of people work on Macs, and you look at these two different faces, these two particular fonts – same typeface, two different fonts. If I look at them both on my Mac – especially if I'm just looking at a sample sentence that isn't the whole character set, it's just the sample sentence – they might look, in my eyes, very quickly, identical. But in reality they might be very different. One might be really great and beautiful on Windows and the other one might look really bad on Windows. Maybe it looks good on Windows 8 but it looks really bad on Windows XP. Or they look the same on the computer or seem to be the same quality on a regular, non-retina screen. But when you go to retina, this brand's particular font file is much more beautiful on a retina screen than the other one.

Which only makes it that much more complicated to choose which font to use, because you've got to choose a typeface and you've got to choose a company. Maybe you already have a contract with one of these companies. Maybe you have a big enterprise contract with Fonts.com and you have access to all these different libraries, but you don't have access to the handful of other libraries that aren't part of that service. There's a lot of stuff to choose from.

Jason

There is. To me, I think, the goods new is, the basic level of subscription from any of them is really cheap. It's like $100 a year or something like that, to have a basic, standard subscription with any one of these services. At our company, we just maintain one with all of them. We have something with Cloud.typography from Hoefler & Co, we have Fonts.com, we have Typekit. We've used stuff from Fontdeck before. Their pricing is a little different, so you don't have the monthly thing.

Jen

Or MyFonts and just buy the file, straight off MyFonts.

Jason

Right, MyFonts, Emigre, FontShop. There's a bunch of different vendors out there that will sell you the license for an individual typeface.

Jen

So you pay once, instead of every year.

Jason

Right. Although, interesting, they're all still very different in their pricing. For some, it's a one-time cost. For some, it's a one-time cost but tied to traffic. You buy a license based on the anticipated traffic and it's up to you. It's kind of on the honor system at that point. We now have 10 million page views a months and not 500,000 or 5,000 that we originally thought. You really should be going back and pay for the license for that.

But most the time, the cost is, I think, pretty secondary. We try to make it not a part of what we do with our clients. It's really an afterthought. We maintain the basic subscriptions so we can use all the choice that we need to use during the design process and then, at the end of it, we maintain the subscription so we can take care of it and then just bill them for it every year.

Or if they want to transition it, we can migrate the project to a separate account. We try to keep that out of the discussion until we've found one that works, that's either part of their brand or something that works with it, if they don't have something suitable that can be used on the web. Do all of our own testing and verify that it's really going to work out. Do that all really early, that way we can keep that settled, quickly, and then move on to other elements of the design.

Jen

By testing, you mean trying that font out in a wide variety of browsers and devices. Just a simple type sample at different sizes, the way you think you might use it, just to see whether or not it works.

Jason

We typically use a style-tile-like approach. With type, we'll start out first really just testing the type before we even do other elements of design. Just make sure that it will work. We'll try and be sure to put actual content in it, so we can read it. That was really the heart of one of the things that struck me in Jason's book. if you can't test and evaluate a type system unless you can actually read the content and see what it feels like to read a paragraph of text on that device or in that browser, on that platform. We try to take a few paragraphs of real copy, set that in the different typefaces we want to choose, make our own HTML page with sample stuff, with sample kits using our own subscriptions, or Typecast, then preview it in lots of different stuff.

Jen

Yeah, I find it surprising sometimes when I see situations where a branding company is brought in and they do all this work to really hone in on what would be the best typeface for this brand. They come up with all these decisions, but they don't even look to see whether or not that typeface is available for the web, first of all. Never mind go through, trying to figure out which vendor they're going to go through and testing it.

What they end up delivering is a PDF or Photoshop file. All the stakeholders, all the business owners, everybody in marketing, everybody who cares about the brand and having a say in what is going to happen are actually making decisions based on something that's only going to work in very, very few places. It's going to work on the business cards, the sign outside of the building, on the schwag that's made for conferences.

But in the place that most customers, most users are going to see that type, it's not going to work. Those PDFs get emailed to some developers who then open them up and they have to make these decisions about, "Ok, that typeface isn't even available." Or maybe it is available, but somebody, somewhere, is going to make a decision about which font file are we going to be using.

Jason

I think that's really inexcusable. It really bums me out. Coming from a graphic design background – it's what I went to school for – knowing that so many agencies still don't know enough about the web to know that they could. I think they're still in this mindset, "You can't do anything good with fonts on the web, so we'll just do whatever we want." When it comes time to translate that, we got in a scenario for a very long time... we had this window of time where it's like, "Ok, everything's in Gotham. On the web, that's Museo Sans." Everybody would have to go and figure out, "What's the thing that we should use?" Because the whole design world wants to use Hoefler & Co and they were not available, until, like, a year ago.

I feel like it's something that we, as designers on the web, and people who write and talk about this, need to try harder to talk to the people that don't know about it yet. I love doing web conferences, but what I really want to do is go to the graphic design conferences and talk about it there. I'm not sure enough of us do that. So I'm hoping to change that. This book was very much written with graphic designers in mind. Also, other people who work on the web, but I wanted people to know how much they could do and give them the way to do it.

Jen

What is something else you feel like people don't realize is possible? Or considerations they should make?

Jason

Once you've chosen typefaces that work well, and you know the rendering and availability isn't going to be an issue, the thing that I hear the most now is about performance. That's a huge problem. But I would also contend that no one is pushing back and saying, "We just shouldn't use photos anymore because they take a long time to download." No, we tackled it. We figured out a way that we could use images that won't suck on a mobile device.

I think it's a really false argument to turn around and say, "Web fonts take time to download, so maybe we just shouldn't use them." No. Learn how to do it well. Learn how ti do it correctly so the web fonts don't interfere with the loading process. The same way we've tried to deal with, how do you serve the right image asset so that you go around that problem?

Jen

What should people be doing to make sure their web fonts are performing well?

Jason

In 2010, less than a year after the launch of Typekit, and lots of other services coming online, Typekit worked on something with Google called the Web Font Loader. That was a simple little JavaScript library that we could u=pump our font requests to and it would inject classes into the page and tell us whether or not the web fonts had loaded. That was a really simple little thing that would give us this hook, in our CSS, to control what happens during that loading process.

But something else has happened in the meantime. That was in 2010. That really, right away, gave us a way to deal with it. This gave rise to the term "fout" or "flash of un-styled text." You would see the page render in the fallback font and your navigation would reflow and your page breaks would be different and everything would jump around. Then when the web font finally loaded, it would snap into place. It was really jarring and ugly.

I had one friend that has a company that works with Fortune 25 financial companies, and they made him pull out the web fonts. They would rather go with something that was not representing their brand than something that was so janky in the way that it would load. I worked with him to introduce some of these ideas and since then it hasn't really been an issue.

The thing is, if you have that class, then you could style those fallback fonts. When you have that fallback font on the screen, then you could adjust the size and line height and letter spacing, because those are all standard CSS things. You could make sure that nothing reflows. It's not going to be perfect; it's not going to be an exact replacement. But it's that perception of change that people notice. If everything stays in the same place but it just looks better, it's almost like a JPG loading progressively. It comes in blurry and then it gets better. That's something that we're very used to on the web.

Now, that does introduce an extra JavaScript call. There is a downside there, in that you're introducing another thing that has to load before you get that class in the page. But it enables the rest of the request to happen asynchronously. So that you fire this off, you get the class, and now the web fonts are loading but the page is still rendering.

Chrome has introduced native font events and I think they've just come out from behind the flag. I think they're fully released now. I'm not sure that's true, I've only just started to work with them. That's the ability to tie into this through JavaScript natively in the browser, rather than having to make this extra request to an external source. Once all of the web browsers support that, then we could do it natively within our own site and we could have much quicker control over it.

The thing that I really take issue with is, all of the browsers now have switched to this idea where they're just going to hide the content while the web font is loading. If you haven't done anything to work around that, you get a flash of unseen text instead. You get a blank page with some random underlines and nothing else until the web font comes in. I think across the board, they've adopted a three second delay in waiting for the web font to load before anything shows up on the screen. If you've got five seconds before somebody bails on your website, and you're burning up three of them waiting for fonts to load, that's a killer. And that is really irresponsible.

My take on that is, if we simply use that loading class to call CSS that doesn't list the web font, there's no delay. We get the content on the screen right away, we style it so things don't reflow, then when the web font comes in a couple of seconds later, it just sharpens up. Unless it's a really crazy, really exaggerated thick and thin typeface where we don't have a really good fallback, most of the time you can make that a pretty seamless thing and avoid almost all of the line break changes and reflow of content.

Jen

You're saying if you're using Garamond for body text, you should go ahead and style it the way you want, but then turn it off for a moment and look at what you've got as a fallback. So let's use Georgia as a fallback. Garamond is frequently a little bit smaller. Maybe your Garamond is 18 points, so Georgia at 18 points is bigger and would take up more space, then when Garamond came in, everything would shrink. Instead, make your Georgia be 17 points so it's as close to 18 point Garamond as possible.

Jason

Right. Because we know there are so few really "web-safe" typefaces to work with, you could almost reduce it to two or three choices in a serif or sans serif. With Garamond, Times New Roman might be a better fit because that's overall a smaller character than Georgia. Similar with Helvetica or Arial or Verdana. Because Matthew Carter designer Georgia and Verdana to work well on low resolution, coarse screens. That's why they're generally a little bit bigger. That gives you two choices: if you have a larger, rounder one... you mentioned Avenir. That's a really round typeface. Verdana would be a little bit better substitute for that during the loading the process rather than Arial or Helvetica which is narrower. It's just one or the other, start with that.

What I ended up creating for the demos that I was working on was a little toggle button that would take the loading class and add and remove it. You could use the web inspector to play around and make sure that it's close. Close enough. Little margins above and below, a little letter spacing, a little bit of font size and line height changes, and it really works wonders. You can almost completely eliminate the perception of something moving once that finally loads.

Jen

One of the things that doesn't quite work about what you just said is when you're using something like a super condensed font or a super heavy bold font and there's nothing. If you use Helvetica or whatever to substitute for say, Avenir Condensed, it's going to be hugely different.

Jason

It is. But I think it's unavoidable. That's when it comes down to your stance on what will give the best experience. I think, unfortunately, in my opinion, anyway, the advice on a lot of the font service websites is to hide the content. That's what the browser vendors have done. But the problem with that is, you hide the content, if you're not being really smart about it, what happens if the web font never loads? You run into the circumstance where you might never give the content to the user.

Jen

We're on really slow hotel wifi right now. I feel like we're stranded on an island with 60kb per second down. [Laughs] Like, "Ohhh my gosh." I've been trying to go to websites on this incredibly slow connection and, I do. I get pages of empty blankness. I'm waiting and waiting and I'm not waiting three seconds, I'm waiting 30 seconds. Maybe eventually I'll get some content.

Jason

I think it's a far bigger problem than a lot of people will want to admit. Bad cell phone connections happen all the time.

Jen

They're very common worldwide. Very common.

Jason

Yeah, it's not like it's really that uncommon here. I live just outside Providence, and if I take the train to Boston, it's a 50 minute train ride and there's at least three spots there where I lose signal entirely. And that's in one of the most heavily tech-infested areas of the country. That little corridor around route 128 and into Boston. And still we don't have great signal there. This is something that happens all the time. I think it's the web. I think it's our responsibility to provide a great experience for everybody regardless of whether or not the web font loads. I think it's super important to be mindful of that and be sure that your design will hold up, even if that web font never shows up. I think we have to do something, even if it is going to still be different enough that it's noticeable. Like a really heavy, condensed typeface or whatever. We could still style something in Arial Bold that's going to be at least relatively close and occupy roughly the same space.

Jen

Or even simply that just looks good. Maybe the condensed type is set at 60 pixels because that looks great. But then when it's 60 pixels for an old school web font, it's way too big. Maybe a strategy might be to say, "I'm not going to try to emulate the condensed font version because that's not possible. I'm just going to make a headline that looks really good and I think 36 pixels is about right."

Somebody was recently talking about – I guess when I was at Brooklyn Beta – Jason Scott was talking about archiving and the need to be better about saving our websites. I don't know if it was him or somebody else, but we were talking, and someone was like, "What happens when these sites are saved on archive.org or somewhere else and they don't have their fonts anymore?" Like, jensimmons.com probably will not last forever. [Jason laughs] It's not going to be there in 500 years.

It just made me think. If you're building a big corporate website, something can happen. The credit card number that was saved at the font company's billing service... that's going to expire at some moment and someone is going to go, "Oh no!" And for seven hours the website will have been delivering no fonts for perhaps millions of users. It just seems there are going to be circumstances where the fonts may fall off the site and just not be available. It's not the most common use case; I think it has to be balanced with everything else that's going on. But there is something to be said for going ahead and applying some styles for that situation.

Jason

One of the recurring themes that I've heard at Artifact and here are about better starting points. That's something that I've been a huge believer in for a number of years. Having your own boilerplate, your own tiny Bootstrap, in Dave Rupert's words. To say, "This is what I start with." If you build all of these things into that starting point, and you have a toggle to turn your web fonts on and off, and you have the CSS so you just have to vary the numbers a little bit, you're far more likely to do it, and it will take you less time. It takes me half an hour to an hour at most to do that fine-tuning before launch to make sure that it will work.

At Artifact a couple of weeks ago in Providence, somebody was quoting some stats from gov.uk and the number of users there. It was so amazing. They were talking specifically about the availability of JavaScript. If you are only using JavaScript to add type to your site – which I don't recommend, I think you should have a fallback for CSS-only with no script wrapped around it. But if you're using JavaScript only and you have a percentage of your users that can't experience JavaScript for one reason or another, that's a real issue. That's a far bigger issue than a lot of people think. if you work on a site like gov.uk that gets 40 million visits a day, or something insane like that, 0.7% of the users don't get JavaScript. Not because they turned it off but just for some other inexplicable reason, it's just not getting there. That's fine, you might think, it's only 0.7%. But with the level of traffic there, we're talking about 300-something million users that aren't going to get typefaces over the course of a month. Or they're not going to get other kinds of interactivity that are JavaScript-only. Depending on your particular project, there are real scenarios.

One hundred percent of all webpages experience a state of being free of JavaScript at some point during the loading process, because it's not there from the very start. If you're loading things in a weird way or one JavaScript fails and then the next thing doesn't load, all of a sudden your web fonts are gone. If you haven't factored that in, with that simple extra half hour to an hour, then you have a really broken experience. Versus one that's just fine and maintains the integrity of the site and will work on 350 million more devices that don't support @font-face at all. That's a real thing, too. Especially for people that work on highly international sites or work on things in emerging markets. Maybe there's a lot of users in Africa that have inexpensive feature phones that use Opera Mini. That just doesn't get web fonts at all. But if you've tuned up your fallbacks, they'll still work.

Jen

What are some other ways to optimize performance? I know file size is a huge one.

Jason

That's really the biggest. That is affected in a number of ways. It starts with good typography. Jason describes it really well. I keep coming back to his book because I just read it. But it's not using all of the typefaces. It's not, "I have all these web fonts, I'm just going to use everything!" It's not, "I'm going to use 18 different weights of this typeface. I need to think about a system that speaks more clearly by having less variation and a more clearly defined system." By having a really clearly defined system of typography – maybe it's a nice slab serif header and a decent range of weights that you're using for body copy – whatever the system is, it probably doesn't need to be more than six fonts. Maybe it's two typefaces and you have regular, bold, italic and bold italic to use for your body copy. Then you have one or two others that you use for your headings. That will help keep the overall file size down. By looking at the different services, you could evaluate, "Is this Garamond going to be more lightweight than that one?"

Looking at VAG Rounded as an example, if you happen to use that for your headings. From one service I looked at about a month ago, it was 160k for a single weight and 40k from another service. Because they had done more work to go back and look into the original typeface and remove extra points that they didn't need and streamline it for better compression on the web. That was an example where two very highly regarded services, they're really good sources of typefaces, one is just a step or two ahead of the optimization of that particular typeface. Makes all the difference in the world. That takes 75% of the file size away.

Jen

It's something I wouldn't necessarily think of, comparing fonts an trying to choose one, to peek under the covers and see how big the file sizes are. One might be four times as large at the other.

Jason

Right. I pick on that particular one, VAG Rounded, because if you go back about a year, year and a half, it was like 400k. I knew a designer that wanted to include it as a regular typeface for use on a website, because she thought it looked really cool. And it did in the design layout that she did. But she had no idea there was no italic. Again, it was this thing where it wasn't enough homework up front and then we had to backtrack and say, "That was an interesting design but we can't do that because we can't use it in all the scenarios in which we need to use it" And, by the way, on top of that, we might as well ask them to download an extra Hyundai to fill out the rest of the weight of the site." That was just not a good decision for all of those reasons. I think treating performance as an aspect of design is hugely important when you're thinking about all of those things. Brad Frost wrote about that really well. In thinking about the type choices that we make, I think that absolutely comes into play. Because typography is useless if they can't see it.

Jen

It makes me think of architecture, where a lot of it is an art, but also a practical art of figuring out, "We're building an auditorium, how are we going to get 500 people in the doors, into the seats quick enough? We need bathrooms, we need this, we need that. What's a great layout to do this kind of flow for people to be able to walk through our new building?" You might decide, let's make this glass facade, it will be so awesome, we'll use triangles and it will be really amazing and it will be totally innovative. A lot of that happened back in the 50s as kind of a modern architecture movement. But a lot of those buildings, when you look at them now, they leak. There's big stains where this beautiful silver-y metal... was just this gleaming, shining pillar of the future in 1952 when the building was finished. But 20 years of water stains just made that metal turn into grime and pour down the front of the building, so it looked bad. By 1970 it looked horrible. Now, here it is, 40 years later and it just looks awful. There's a certain kind of practicality of the real world that kicks in.

I feel like this is sort of the same way. Yes, make great art with type, but also here are a bunch of practicalities. So as a designer – who is a designer, not an artist – it's our job as designers to balance that reality with that artistic desire.

Jason

I think that's always been true in different arenas. But kind of related. We've had to think about the function of type. Thinking as designers, as print designers before the web, we would be making typeface choices about what would have the right voice and tone, but what would also be readable and reproducible? What would print well? You would see typefaces that were designed to trap ink better so on cheaper paper they would... Bell Centennial, which is designed by Matthew Carter, was designed to be the typeface for use in phonebooks. Because they're printed on really cheap paper. It had all these little notches in the letters that would trap ink.

Jen

Yeah, the dot gain. It's called the dot gain. When ink hits a piece of paper, each paper has a certain quality of dot gain. How much will that dot of ink grow? If you put a drop of ink on a newspaper, it's going to grow. If you put a drop of ink on a really shiny card stock, it's just going to sit on top of the paper. You don't put giant dots of ink on a printing press, but you do put tiny ones down.

Jason

Exactly. Those kinds of decisions we've had to make forever. As long as there's been type, we've had to make decisions about which ones to use. Based on the intended use. It's not really different now, it's just that we have a different set of considerations. What is the quality of the screen on which it's going to be read? How large or small will it be? Is it something that will cripple the download? This is where I think when you host it yourself, you have a little bit more freedom to use more different weights or variants or special case ones that would really amplify something. Because when you're hosting it yourself, it only will get downloaded once you use it in the CSS. You can have it available to you in your @font-face file, but it's not going to be triggered as a download until there's a page that's actually using it.

Nick Sherman wrote about the idea of doing display faces. There were typefaces that were version of typefaces that were designed to be used really big. More of the vendors for web font services are making those available. We can start thinking about doing things like, I would like to use the display version of this typeface when the screen is 27" or bigger. I'm going to have these really massive headlines and it's going to look absolutely gorgeous. That typeface will hold up really well. Whereas if you look at something like Georgia or Verdana, they actually look kind of terrible when they're really big. Because they weren't designed for it. They don't have the right scale and proportion to work well at that size. It's a whole other set of considerations that we have to apply. But it really does all come back to, "Will it deliver a great experience?" Part of that experience is whether or not it shows up on the screen.

Jen

You're saying you could use media queries to specify this headline font, or this size is going to use this other. You could load different fonts for different size screens.

Jason

Yeah. If you're using a particular typeface for your headings, there might be a display version that's available. I'm completely drawing a blank right now to think of a specific one. You could use a standard bold one that works across most sizes that you're using, up to maybe a 40 or 50 pixel equivalent. Then once your screen size gets beyond a certain number of ems wide, you're going to switch it out for a different typeface. That would call the display version once you're going to set it at 70 or 90 or 100 pixel equivalent. Like the huge, big, fat A Lit Apart across the top. That's really, really big and you want to use a display face that holds up really, really well. That might be a slightly different version than the one that you would want to use at a smaller size.

Jen

Let me ask you, what do you think right now is the best way to load fonts? There are many different ways to do it. If you go to a service like Typekit for example, they give you options but one of them is, "Here is our script tag, just grab that and drop it into your website and call the fonts in your CSS and you'll be good to go." They do things like include – I don't know if it's the same code or slightly different code they wrote themselves – but the Google Font Loader that you were talking about. If you go to MyFonts.com, you find a font you really like, you go ahead and you buy it and you download it, you have the files in your own stack of files in your website and you're calling your own copies of those fonts. There's probably other ways that I'm not thinking of right now to do it as well. Is there one clear best practice or do you use different techniques for different situations?

Jason

I've used both quite a bit. A lot of it depends upon your particular site's requirements. I think, in many cases, using a service is the way to go. It's easy, they do a great job of serving the assets quickly, the use content delivery networks so they can distribute those font files and serve them to the end user in a faster way than you possibly could with your single source web hosting.

They also update them all the time. That's huge. I always ask people when I'm giving these talks, "When was the last time you went to a font service and downloaded an update?" Nobody does that. I've had maybe three people ever raise their hand when I ask that question. That's not something that we think about but they're constantly going back and checking the hinting to make sure they render well on Windows or they're improving things like the number of points in VAG Rounded and greatly reducing file size.

The latest standard for a font format is the WOFF format, or the Web Open Font Format. That is basically a wrapper around one or two other formats that enables a better quality typeface to be used on the web. It supports other features like OpenType so you can get really nice ligatures and fractions and kerning and all these other nice features that are available on the desktop for use on the web. But only in that format. There's a new version of that format called WOFF2 that actually supports much greater compression. Those things will continually be updating, that means that once the WOFF format is available, you want to add that to what's being downloaded. If you're not going back and getting that version from the vendor, you're not getting that benefit and neither are your users. If we have something that's compressed to 50% of the stuff that's already being served, you want to get that thing. The font services make that a lot easier. It's not perfect, but it certainly is a good, reliable, easy step forward. I can count on two or three fingers the number of times I've had outages with font services. They're really, really good. I think in general it's in their interest to keep pushing that stuff forward. I really like working with them. I know lots of people that work at the different services and they're really wonderful people that care about type.

Jen

You're talking about WOFF, there's other formats for fonts and certain formats work in some browsers and not in other browsers. What about IE9? What about Chrome-whatever? They take care of all of that. You don't have to know which file to serve to which browser or worry that everything's being taken care of.

Jason

Yeah. Because currently, you need four different file formats if you want to serve to all the devices. WOFF is the most recent one but I think the last time I checked, it's still only around 78% or so of devices – if you look at CanIUse – that are on the web can support it. That maybe 100% of your audience and that's great, but the likelihood is it's not. There are certain older Android devices and the first few generations of iPhones that only work with SVG. Older versions of IE only work with the EOT format. Mac is happy with WOFF or TrueType and has been for quite some time. WOFF is the new standard. That's a total of four and it goes even further; you have to load them in the right order or you're going to end up having double downloads, if a browser happens to support two of them. There's lots of things you have to do to set that up correctly.

The good thing about hosting it yourself, if you do have that license, is it can be cheaper. Sometimes you can get a license that allows you more freedom for more subdomains and more traffic. That was the scenario with one of our clients. That worked out to be a really great deal, to just purchase that one time. It was a couple thousand dollars for 16 different weights and variants and we could use them across every site on their network. It was really kind of perfect. I've since had a little bit of difficulty with them getting things like lining figures versus old-style figures. So the numerals that have descenders, that look like upper and lowercase letters, versus ones that are all lined up in a row. We need both and you should be able to get both in a single font file if it's supported with OpenType. Then you'd be able to trigger that will CSS to get the ones that you want. Instead they gave us a whole other set of font files. Now we have to load them ourselves but the flexibility we have, again, it will only trigger a download once you request it. We can set up slightly different classes to know we want to use lining figures so we're going to trigger that one. We can then go back and group them in our CSS.

That was something that I actually learned not that long ago. If you're self-hosting and you're creating your own file that has all your @font-face declarations in it to load them, you can name them all the same and then add things like font-weight: bold or font-weight: 200 and font-style: italic or not and that reenables using the bold tag. If you don't group them that way and you list them all – and this used to be the case with a lot of the services, they weren't regrouping them. If you added the bold and italic fonts for a particular typeface you chose, it's loading a whole separate asset and it's a different font family name for the regular one versus the bold one, You'd have to remap your own HTML tags to call the right bold weight of the font when you wanted to use that tag. That creates a lot of headaches when you're working with a content management system. Writing it yourself allows you to group it back again. That was one of the things that I added back into the book when I learned the ins and outs of that, so people would have some samples to go by. It allows you to take back a lot more control in the HTML and CSS that you're writing so you can have fewer classes and workarounds for things. It works much better in content management systems. Google and Typekit already do that for you. Fonts.com has rolled that out as well, you have to enable it there, but then you get to choose specifically. If you're using the extra light weight instead of the regular one, you can redefine that as normal and define the medium one as bold.

Jen

Or you can define the 100, 200, 300, 400, 500 that in the past never did anything – font-weight: 300, font-weight: 200 used to always do the same thing. Now at Fonts.com you can actually define those numbers and give them, "This font is 200 and this font is 700."

Jason

That was a thing. When Typekit first started regrouping them – and I'm not sure if they still do it exactly the same way – they would just make a judgement call. If you added one in that was a weight of 500 or less, then that would be what showed up if you just said "regular." Then if it was greater than that, they would say that was bold. Or if you had one lighter weight and one heavier weight, it would map them for you. It didn't matter if it was 100 and 300 or 400 and 700, it would just say, "This one is heavier than that one, so that's what we'll serve for bold." It has always worked for me but it doesn't give you quite the same level of flexibility if you like to use the more specific ones. Say my headings are going to be in 900 and I want bold to actually be the 700 weight and I'd like to use something a little bit lighter than the regular one for my body text. I want to map them all a little bit differently.

Jen

I just personally found it handy, not because I'm ready for production, but just for prototyping.

Jason

Oh, exactly.

Jen

I don't know which weights I want to use. There's nine of them, so I'm going to use all of them right now. [Laughs] This should never get shipped to production because it's 20 bazillion kilobytes to download but I can't make up my mind, so let me just toss of them into the soup and then I'll sit there in my web inspector and switch from 200, 300, 400, "No, maybe 200, no, maybe 700. No, oh gosh, not 700, maybe 300." Eventually get to a place where I decide, "Ok, there's nine of them, I'd maybe like to use five, but there's no way. Let me pick three. Ok, these are the three that are being used the most often." Just in that messy, messy process of stuff.

Jason

That's where you always have to bring back the checklist at the end, because a lot of designers will forget about that. This is why I harp on designers needing to understand enough about HTML and CSS to know what's going on here. So they have an understanding that they've created a monster. That's fine for the designer process, it's great, it lets us explore. But you can't let that go past you.

Jen

Don't ship the monster.

Jason

Yeah, don't ship the monster. That's actually what you need to remember.

Jen

But also, maybe you're working as a designer in a prototyping phase where none of the code that's being written is production-ready. All of the code is quick and dirty and ugly. That prototype is going to get sent to a set of front-end developers sometimes. Where it's really the job of the front-end developer to maybe reuse the code and clean it up, maybe just get rid of the code and start over.

Jason

They may do that but they're probably not going to go back to Typekit and turn off all of the weights of the fonts that you weren't using. That's the problem. They might not even have access to it. All they have is the project code. They're going to start swearing. That's actually the start of all of the writing I did about fonts, started with a late night bar conversation with Drupal core contributors at DrupalCon Chicago. We spent two hours debating whether or not anyone should ever use web fonts. I finally was able to get through to them that type actually matters, it is something that can really inform the user and give them hints about what you want them to think or feel or do. Then beyond that, it doesn't have to suck. It doesn't have to be really horribly big and bloated, if you set it up right.

Jen

Talking about images, I think, is a really good analogy. It really is that you could do images very badly, and ask people to download a 4mb picture, or you could do it correctly and they're downloading a 40k picture. That's not pictures good, pictures bad, that's technique for ending up with the 40k image is good. It's just learning the techniques for the fonts and figuring that part out.

Jason

I think the other thing to remember is that you could have a different header image on every page. So every one of those header images is 100k. You have 100k worth of fonts. You might have a different message on every page, but you're not downloading that 100k every time because it's cached. So it's a one-time hit. That really gives you far more for your money than those images do, in a lot of cases. A really strong typographic system can carry the weight of a site far more effectively than any single image ever could. Especially on a mobile device when you're probably not going to see the image for more than a nanosecond before you start scrolling to read the content.

Jen

That's absolutely true. To replace all of these images of fonts, these pictures of type that we've been shipping on the web for all this time, to get rid of them completely. Stop doing that bananas stuff and just start using real fonts. That's a huge performance gain.

Jason

We were reminiscing this week. I was talking to Chris, one of the organizers here at CSS DevConf, and remembering all of the magic Photoshop filters we would want to apply to all of our buttons. Needing to make them all at once so you got the consistent effect going across the page of the site. There were all of these terrible things that we would do to get embossed metallic brushed metal buttons on our website.

Jen

I know! And rounded corners on everything and drop shadows.

Jason

It was awesome.

Jen

What's so funny, we used to make all of these images. All of these background images and put them everywhere. We'd have four <div>s around everything so you could have four corners or four separate sides of the box because each side has a different dropshadow.

Jason

Or if you were really clever, it was one image that you were somehow rotating. Or if you were one of the cool kids, you made a sprite with four corners in it.

Jen

Well, I made sprites that were, like... I think one of them was 6,000 pixels wide and 10 pixels tall. Because I needed borders – really, it was drop shadows – and rounded corners for three different color boxes.

Jason

This is The Web Ahead and dirty little secrets behind. [Both laugh]

Jen

It's funny because we finally got to a place with CSS where you can do drop shadows, box shadows. You can do rounded corners. You can do custom borders. You don't have to have a different image for each side of the box. You just create the image for the border itself and instead of having a straight line for a border, you use the image and you can stretch it and do all these crazy things. You can have gradients made out of CSS instead of images. You can have layers of color that are translucent, on box over another so you can create this 3D effect that in the past would require images.

But the thing is, somehow, culturally, we went from, "Gosh, we want all this eye candy even though it's impossible to do on the web." To, "Hey, it's possible to do all that stuff on the web, it's no big deal. Yeah, we don't want any of that anymore."

Jason

No, we want it to be all flat.

Jen

Flat. Flat design. Flat. I want a flat box of color. [Both laugh] What kind of humans are we? Humanity has done this bizarre thing that we have all these amazing tools now that we don't want to use.

Jason

It's all a fad. We're going to go back to carving things in stone tablets soon.

Jen

We need some kind of stone tablet filter for CSS.

Jason

Well, it was lighting effects in Photoshop.

Jen

They're working on some of that stuff, yeah. [Jason laughs] Lighting effects, I haven't heard about that. But CSS filters will bring a lot of the... up the saturation, add more brightness, add more contrast, all of that stuff will be possible to do straight on a webpage, right on the image instead of having to go into Photoshop and adjust the image and bring it back out again.

Jason

That's one of the more underutilized things, is using something like ImageMagick on the server. Which is really cool. That really lets you do a lot of stuff. I actually used to use it to add type to things, like add watermarks to photographs and things like that. It was amazing, the number of things that you could do in the context of the CMS. You're still uploading the photo through the browser and adding it to the site and sepia-toning things or whatever. Doing all of these crazy effects that you could totally automate.

Jen

Like making all of the photos be black and white.

Jason

Yeah!

Jen

Yeah. ImageMagick is built into Drupal so I think any of us who were Drupal nerds, it was one of the many things that we got used to with Drupal. Like, you want to upload a 4mb photo? Go ahead. Why? Because I built some magical robots that are not going to ship that photo.

Jason

Right, exactly. Don't ship the monster. [Laughs]

Jen

And actually I want you to upload a 4mb photo. Because, who knows? Maybe two years from now there will be something that's called a retina screen and we'll need to recut a whole bunch of images that will be four times as big as we originally thought they would be. So yes, please, in the archive, in the pile of photos that never actually get put on webpages, we want amazing, huge, giant photos. Then we're going to get magic robots to go ahead and resize them and cut them and make all these separate copies.

Jason

I want a photo of what's going on at Media Temple with all the magical robots in their servers. I think that would be awesome.

Jen

You want the magical robots, not the monsters.

Jason

Right.

Jen

So what's something else? One other thing that you want to leave people with when they're thinking about practical ways to make type work?

Jason

It's really important to get past the performance issues. That's just a dealbreaker for a lot of people. But it's also something that's the easiest thing for you to kind of automate. You can have a really good starting point and tweak a few things and then this stuff just gets there. Then you can focus on the really awesome stuff. That's what makes the experience really delightful or really compelling, really engaging.

When you look at a magazine like Vanity Fair – and I pick on it a little bit in my presentation, not because I don't think they do beautiful work, I think they do beautiful work in print and I don't think it has translated as well to the print. The content is great. But that visual identity and brand, I think they could do more. That's just one of many. There's tons of great publishers out there, book publishers in particular, put a ton of time into really carefully crafting that printed object. They make sure that ligatures are being used, so it's really beautiful and nice and readable and connects well. There's always the right kind of letter spacing, so things read nicely together and they don't have one word sitting on the end of a paragraph. Just making these awkward spaces between things. A lot of care goes into that because they know they're printing it and they're not going to print it again, so they want to make sure they get it right. That's one of the things that makes me a little bit sad about the way we work on the web.

We've put so much time and effort into just getting this stuff on the screen, that we kind of forget about going that extra little bit. If you look at the care that goes into Medium, I think that's a great example. They really care about stuff. Or if you were a fan of Readmill. I love Readmill. That was such an awesome reading experience, I was so sad when that shut down. There are a few of platforms out there that I think are doing a really great job of preserving a really great reading experience. Because it's becoming so much more normal, and it's so much more prevalent to see things electronically rather than in print, if we don't start caring about that, then it just goes away. I can see it in the way that books are printed now; many times, it's on a short-run digital press so it's not on the nicest paper, it's not the nicest ink that's being used, so you lose some of the touch. If you're losing some of the care and quality in the typesetting itself, then that experience all slightly degrades. We're still getting the words across, but we're losing the voice.

Jen

It's true. A lot of tech books used to be... like Friends of ED. I loved those books back in the day when I was buying every Flash tech book they put out. Because they had all the great Flash books. Now that imprint is being printed in a completely automated process – it's a financial decision. It just doesn't make sense anymore to do those layouts by hand. So I don't know what they're using, but it's probably Microsoft Word and it gets shipped to India and computers are told to do something and it comes out the other side. It's just really awkward. Even though it's a book, it just looks really crazy.

Jason

There are wonderful things that come out of it. Someone like me got a chance to write a book. I think that 10 years previously that probably wouldn't have been possible, because it was a much smaller pool of people that would actually get the opportunity to write something and have it be reproduced in this wonderful little tome that I could hand to someone. Or hopefully they'll buy, which would be even better.

It's great that it's broadened the base of the people who can publish, but at the same time, we're not taking as much care in what that artifact really is. I think there are some that do. The A Book Apart series are beautiful books. They're incredibly well thought out.

Jen

I think they do those by hand. I know 5 Simple Steps did everything by hand. And your book is an O'Reilly book, and everything is automated from O'Reilly. But it's automated with CSS rather than Microsoft Word. And there's a lot more care put into it.

Jason

There is. And I think there's a lot more unseen as of yet potential to do something with that because it's CSS. The authoring platform is pretty cool, it was a neat experience writing it. Because I was basically working with a git repository. I could work online or I could work offline and I could sync everything back up and then I could go generate a PDF of my book at the drop of a hat and it would be ready in 30 seconds. There are some things about that that are completely amazing. Because these things are all working in systems, that's why I focused most of what I do – since I mostly work in Drupal – all of the efforts that I've put in are things that are sustainable techniques that we can use. We'll always style that first letter of that first paragraph in this particular way without the editor having to apply a class. Stuff like that.

Jen

It is true. Going back to the web, there's a way in which, when a designer, especially in this siloed mid-2000s way of building out organizations, where you had this design department or design company completely siloed and separate from developers and they emailed PDFs and PSDs back and forth. The designers weren't really thinking about the thing as a system. They're not thinking about a whole bunch of different varieties of content. They make one template, or you get emailed one template, or everybody's making a decision looking at one template, one Photoshop file of a single article. Like, we're going to have a calendar page and there's going to be events.

Jason

And there's going to be three events in every square and they're all going to have titles that are exactly the same length. [Laughs]

Jen

There's that. But also, let's look at the page for the event. In this particular situation, the paragraph is lorem ipsum, and the last line of that paragraph has three words on it. There isn't an orphan there and nobody's put an annotation on the page to explain that not having orphans, not having the one word all by itself left over, is important. So when the developer gets it and its been broken down into all these task tickets and stories or whatever, nobody goes in and says, "Look at all the things that aren't broken about this page. When we build out a system that has real content in it, especially now that we don't even know what the fixed size of the page is, and it's going to be responsive."

Jason

By the way, the size of your book is changing.

Jen

Right. Or even your paragraph. You could be, in old school ways, be like, "Editors who add paragraphs must always look and see and make sure there isn't an orphan. If there is, you either have to remove a word or add a word to your paragraph." A) That's not going to work. B) You can't do that anymore. There is no column width. What needs to happen, in that case, there are a bunch of techniques and you talk about them, there's an easy way to get rid of that orphan. But nobody told the developer to do that. But the developers can anyway. It takes five minutes. You don't need anybody's permission to do that kind of craftsmanship and that kind of quality of work.

Jason

It's being aware. 1) That it's a problem that this thing exists, and 2) That there is a fix that is within your power. I had three different people in mind when I wrote the book. One was a designer who knows typography but has no idea how much they can bring that knowledge to bear on the web.

Then there are the many web designers who don't have a formal design background, that just found their way into it and they like it. They may be really talented but they don't have some of the formal education about type. I'm hoping they'll look at this and figure out some of the "why" behind how they might do some of these things and do them more often.

I want the developers to be able to look at it and say, "This is how I would solve these things that frustrate me. This is how I can do this and still provide a really great, predictable, reproducible end result."

All of these things, we're all working within some kind of system. Designers have been working within systems for decades. They've always done that. Just in a different mode of thinking, in a different set of materials. When they design something for a company, it's going to be used in letterheads and business cards and envelopes and invoices and newsletters and all of these different ways of applying those styles. Designers have been creating systems forever. They haven't thought about how those systems might translate and how that meaning translates with it. That's where things like proportion and scale as screen sizes change are still helping convey the meaning through the size relationships of those elements of type. Increasingly, on a tiny little screen, those are the only things there to give you those cues. We want to make sure links stand out and buttons work and you know this heading is more important than that one.

Jen

Yeah, it's all good stuff. Thank you so much for being on the show today. I'm glad we found a moment during this conference to do this.

Jason

Yeah, this has been really a lot of fun.

Jen

People can follow you on Twitter. What's your Twitter handle?

Jason

@jpamental. Pretty much anywhere. j-p-a-m-e-n-t-a-l.

Jen

And your website?

Jason

hwdesignco.com.

Jen

Nice. And the show notes for today's show will be at 5by5.tv/webahead/87. And sometime in the future, thewebahead.net/87. You can follow me, @jensimmons, on Twitter, or follow @thewebahead on Twitter. You can also sign up for The Web Ahead newsletter. Right now there's an easy form to fill out at 5by5.tv/webahead/newsletter. And if you're a big fan of the show, it would be really helpful to me if you could go over to iTunes – if you're also an Apple person into iTunes, a Mac person, an iPhone person – and leave a review. Leave a rating and a review. It's a huge help in helping other people find the show and it's been awhile since I've asked for reviews. That would be awesome. Thanks so much for listening and see you next week.