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 83.

I first want to say thank you to today's sponsors, Squarespace and Cachefly. Cachefly, who's providing the bandwidth for August for all of the shows at 5by5. They're the fastest, most reliable CDN in the business. Check them out at cachefly.com. That's C-A-C-H-E-fly.com. Not flying piles of money. Caching. Because they're a CDN.

Today we're going to talk about typography on the web. A topic that is not new. We've done an episode on the show before, back with Richard Rutter. I'll look up the number. I forget the episode number. I'll look that up and put it in the show notes if you're interested, if you've not listened to it yet.

Of course, the technology to support fonts on the web has been around for awhile now. But like many of the things that have been technologically possible, it feels like we're just slowly working our way into having a deeper understanding of what's possible. A deeper understanding of the implications of what this really means.

We're really now beginning to see — not beginning, but this year, perhaps — we've been seeing enough websites all over the place who've really taken the time to figure out some beautiful typography for themselves. We're feeling the impact of this. It does feel like when we look back at the web, say, 15 years from now, when we're way off in the future and we're looking back. It's the 40th anniversary of the founding of the web and we're looking at the web. There will be this big dividing line between before we could put custom fonts on the web — or our own fonts, or choose from thousands and thousands of fonts on the web. For one, we couldn't do that to when, now, we can do that. It just makes webpages, websites, look so completely different and gives us an amazing chance to really create a voice for a project in a way that's not possible by using the same four fonts over and over again.

I thought we'd have another show and talk about that. My guest today is Jason Santa Maria. Who's known across the industry as a real expert in typography. Has been on top of this web typography thing for many years now. Was a Creative Director over at Typekit, helped found Typekit, make Typekit happen. Typekit, I feel like, is one of the first places that really helped make fonts on the web go and make it happen. He's a graphic designer wit ha deep love of letters. He now runs the Brooklyn-based design firm Mighty. He's a faculty member at the School of Visual Arts, MFA Interaction Design program. A co-founder of A Book Apart. He's done typography for A Book Apart, he used to work at Happy Cog as a Creative Director. You've seen his work all over the place. And now he has a new book out at A Book Apart called On Web Typography, which is a step-by-step of how to make web typography happen on your project.

So, hello, Jason.

Jason

Hello. Thanks for having me.

Jen

I was very happy to see your book come out, I have to say.

Jason

[Laughs] I can assure you that I might have been happiest. [Both laugh] Or, let's not even say happy. We'll just say relieved.

Jen

Was it a long process to get this book out the door?

Jason

It was a very long process and one that I grossly underestimated and really struggled with.

Jen

Ah. Well, it's a terrific book. It's funny. Typography. I've personally been doing typesetting, graphic-design-type work as a job since... [Laughs] since, like, when there was an eight in the year. [Both laugh] I first started doing stuff like that in '89 as work. As a student job I had in college. Macintosh was out and typography in that era — at least the perspective that I and a lot of people had — meant, "Should we use New York for this project or should we use Chicago?"

Jason

Mhm.

Jen

Or very quickly became, "Palatino or Times?" Not Times New Roman. Just Times. [Jason laughs] Those were the big choices, right? Slowly, over a couple of years, you could start installing all kinds of fonts on your computer and it was like, "Oh, cool! Where do I get them from? Do I have the $17-zillion-dollars needed to buy the Adobe set of fonts on floppy disks. No? Ok, where else can I get them from?" [Both laugh]

And just messing around. No idea what I was doing. Just messing around. Trying this, trying that, seeing what this looked like, seeing what that looked like. Very quickly being able to identify which typefaces were just super low-quality. Or maybe they looked fine on the screen but they looked terrible coming out of a laser printer.

Like most people, I think, I never had a formal education. Then I saw you, at one point, at An Event Apart when you were talking. I thought, in that moment, "Ok, this is scary, but I'm going to go find out from the guy who went to art school for this, all the stuff I didn't know and I'm supposed to know even though I have two decades of experience." [Both laugh]

I walked away from your talk going, "Oh! It's ok. He just told me it's ok. 'Yes, that's how you do it.'" I feel like this book, in some ways, is the same way. It's simultaneously a way to show people who aren't designers, who don't feel like they're designers, who would like to do better design work and are in a position to do some design work but are really not sure what to do. It breaks it down for those people. To be like, "Hey, it's not that hard, computer-geek-guy. Here's the step-by-step stuff to look at, stuff to think about."

But I think it is, also, a mastery level. Like, "Hey, I'm going to show you everything. When you realize these are all the things that we can talk about..." and I don't mean everything, but what is it? 220, 230 pages long. But you hit on all the major topics and then it's like, "Oh, yeah. That's not so hard. Those are all the major topics. Ok. I got that." There's a certain kind of reassurance there, I feel like, in this book. It's not a hard book to read. It's not a hard thing to grasp. It's right here. You've done all the work for us. You've figured out all the stuff that we should be thinking about and you put it very simply on the page for us.

Jason

That is a tremendous relief. [Both laugh] That's definitely what I was going for. I've said this before, too. I'm a very blue collar kind of designer and I approach it that way.

I think that the secret to design — or anything that is a creative pursuit — is that skill plays a role, but so much of learning is just about sweat. It's just about trying something and being ok with not knowing something in order to try it.

That keeps a lot of people away from doing exactly what you did. Just designing. Just doing stuff with type. Even though you felt as though you might not have had formalized training or anything like that. Just getting your feet wet and trying out something, and all the while being mindful of how you do it. Understanding how you got from point A to point B and what was working, what didn't, what made you feel uncomfortable, what made you feel powerful. It's all of those little things that actually allow you to be able to work this way. I don't know that there's any mysticism behind it other than that. It really just comes down to putting in some time and being aware. Being present in that moment while you do it.

Jen

It's interesting you talk about coming from a "blue collar" aesthetic, because this whole idea of setting type is such a blue collar thing. For many centuries, it's been a blue collar craft. Somewhere, maybe in the last 30 or 50 years, there's this overlay of "art school" or, "You need to know about so-and-so and so-and-so and they're so fancy." In some ways, that has made it intimidating and it feels like it's up in some sort of academy. Where you need to know all the famous people and those graphic designers in New York and who invented what and who did which logo. In reality, you're taking little bits of metal and wood and running them together in a tray and then pushing a piece of paper up against that stack of wood and metal. There's nothing fancy about that. [Both laugh]

Jason

No, and that's kind of the best part. Maybe it changed when people stopping having to really get their hands dirty. I don't know.

I've always found the practice of just being able to play with words really empowering. I think there are parallels to other creative industries, whether it's music or writing or something else. You can not know about all of the different musical influences that shape the way that you would like to make music. But you can also just pick up an instrument and play all by yourself, if you want, and make something beautiful over time.

Jen

If you're sitting there with a half a dozen different typefaces and you're going back and forth and you're trying to decide which one. You're trying this one, you're trying that one, you're trying this other one, you're trying this one. What is it that you're looking for as you're trying to make that decision?

Jason

This comes down to one of the toughest things that there is around becoming really conversant with typography. These things aren't really solid. It's difficult to quantify them. It's difficult to talk about them. They don't always have a sort of essence to them, they just have a feeling.

When you see something and it looks right you just know it, intrinsically. It's just a gut instinct. The same goes for when something doesn't feel right. It isn't often easy to really talk about why something feels right. You start using more abstract terms rather than specific terms, talking about the typefaces or the letterforms specifically.

When I sit down to look at something, it's kind of like those movie montages where someone is going from ugly duckling to swan and they're in a store trying on all those outfits. There's a montage of them continually coming out a dressing room. It sort of feels like that. I really enjoy trying typefaces on, in a scenario, in a real setting, so I can get a sense of what they're going to look like for what it is that I'm designing. When I look at them that way, like I said, I don't often know. I'm sure a lot of other people do it this way, too. I don't often know the particulars of what I'm looking for. It's an overall feeling. When I see it, I know that's right or I know when it's wrong.

Jen

How do you separate out... lots of times when I'm looking for a typeface and trying to make a decision... I've been doing that a lot recently. Like, a lot [Both laugh] I'm looking on this website and that website and this other website and they each have a little bit of a sample. Some of them have a lot more than others. Some of them have actually set a page of sample type. Some of them basically have nothing. Many sites have a place where you can type in a phrase of your own and look at it. Although, usually that's great for headlines, but it doesn't work so much for body copy.

But in all of those situations, it's like trying to chose a paint color for your house while you're still at the hardware store. [Jason laughs] The lighting is completely wrong, the size of the space is completely wrong. So this bright color in the middle of the giant box store seems fine, but you get it home and put it on the wall and you realize it's way brighter than you thought because your ceilings are not 27' tall. [Jason laughs]

There's a way in which looking for this typeface, it feels like looking way out in these crazy places where you can't really see it. Even then... ok, so I grab it from Typekit. I take my Typekit suitcase and shove in 20 fonts. And Typekit's like, "Are you sure you want to download 4 gb?" [Jason laughs] Yes. Yes. Give me 20 fonts on my website because I'm just going to sit here in Firebug or whatever tool and I'm just going to switch them, switch them, switch them.

But still, there's a way in which they're still so raw. It can be hard to figure out whether or not something is working well. Versus once a decision is made, then you can sit there and take the typeface that you went ahead and decided you're going to get married to. You're going to tweak every little detail about it and change the color from black to subtle gray. Set it in all caps or no. Make it a little bit bolder, a little bit less bold. Sometimes it's in the polish where whether or not that typeface is going to hold up becomes apparent. Yet you have to make that decision so early that you don't really know whether or not it's going to hold up. You kind of have to guess. Especially because some of the companies, you have to pay for it before you're able to test drive it.

That's a very long, ramble-y question. [Both laugh] I'm trying to get at, there's still another layer of, "How in the world do you make a decision about which typeface to go with?" When it can be so hard to know what it's actually going to do for you until after you've completely used it.

Jason

Until you've committed.

Jen

Yeah.

Jason

Well, there are a couple of answers and a couple of questions in there, too.

One of the things that a lot of designers don't know is that many foundries, you can email them. You can ask for a comping license or a comping version of a typeface. A lot of them will give you a small, subsetted version of a typeface or some other addition of a typeface that you can use, just to play with. Just so you can get a taste for it and see if it's going to work for you before you buy it. That's one very useful thing to know. I think a lot of people wouldn't expect that or wouldn't know to ask. It's actually fairly common for larger companies, publications, they do this kind of stuff all the time.

Going back to what I was saying before, the more that you experiment, the more you nurture and develop a gut instinct for what feels right. Even before you get to the point of being able to tune and refine that typography later.

I personally look for typefaces that look good even when the scenario and the conditions are poor. Whether it's full on black text on a white background or really small type or with a really long measure of line or what have you. Whatever the conditions are, even when they're not suitable, the typeface can still work. That right there is just one small clue of something that's going to be a strong foundation to build upon later.

When I'm looking for typefaces, I will often start with something very small. Usually it's going to be paragraphs of text. The smallest way that I'm actually going to see that typeface in a design. Because that's when it's going to be under the most rigorous of conditions. Because it's small, the rendering might not be ideal or the layout might not be ideal. When something's big, you're not going to have as much trouble with the rendering, usually, or the way the letterforms are shaped. You're probably going to be able to make them out pretty easily. But it's when they're small that you're going to have that trouble. All of that doesn't rely on the later stages of refinement. I think that a typeface that only looks good when you can tailor these later circumstances might not be that suitable to begin with.

Jen

You're talking about really looking for typefaces that have been made with some quality and some skill that look gorgeous no matter what you do to them. Rather than... I know this especially was true back in the days of desktop publishing. You could get all kinds of free, crazy fonts. Silly fonts. Everywhere. But most of them were just useless.

Jason

That's kind of the best part now. From what you were saying earlier, back when the decision was between Chicago and New York. Now we have an embarrassment of riches. There aren't nearly as many reasons to use a poor quality typeface because there are so many good typefaces out there that run the gamut between being very affordable to very expensive. I feel like you can find something that suits whatever it is that you need, that's been crafted with care, too.

Jen

I know you've talked and written about how you tend to use a lot of the same typefaces over and over again. Do you feel like you do that because you don't have time to go look at 1,400 other typefaces and consider them? You know the 20 really well and you're able to chose from those 20 what you want to use on a particular project. Or is it something else? Is that a part of a solution, too? Just get to know your own tools really well and don't worry about shopping the whole world every time you need a new typeface for a project?

Jason

It absolutely is. It's really a practice that rewards that constant revisiting. By getting to know a typeface, you really start to understand the strengths and weaknesses of what the typeface can do. That's a really potent tool. Just being a designer who switches from one typeface to another, from project to project, doesn't really give you a chance to settle in and understand how a typeface works. The only thing that you're really getting is some sort of surface quality. You probably won't be able to take full advantage of what that typeface brings to a project as a tool.

Jen

Let me ask you for all the people who are not necessarily designers who are listening, but have their own websites. I know a lot of developers who have websites and they're asking me questions like, "How do I do design?" [Jason laughs] "I don't want to be a designer. I'm an awesome developer. I'm going to stay an awesome developer. But if you go to mywebsite.com, it looks awful."

Some of it's about white space. Some of what I see when I look at people's websites and they're just overwhelmed and they would like to make it look better and they don't know how. It's a bit of a sense of, "Ok, do you see how these things are too close together and these things are too far apart?" Ok, you don't see that. How do I teach you to see that? Because if you could see that, then you could adjust it, and if you adjusted it, it would look much better.

But I think the other part, these days, is just typography. Find a couple of really great typefaces and use those. Or even just one typeface, and use that instead of what you're using. You will take your website up several notches. It will suddenly seem much more polished, much more professional, much more beautiful.

Do you find yourself giving advice to people who maybe aren't designer-typographer people that you could share with people? About how to get started or where to go just to take things up a notch?

Jason

As I'm sure you know, once anyone knows that you have any sort of interest in music or computers or, in this case, typography, people start asking you about that thing a lot. You become the person that your friends ask about it.

I think that so much of it just lies in a desire to want to know about it. Being aware of these things makes you notice them elsewhere. You might throw together a website and put it online and not realize some of the missteps that you made that could make the design a little bit tighter or the typography a little bit better. Once you actually express an interest, start looking into these things. Why does one website look nice to me and this one doesn't? You start actually looking at the details of what brings that together. That's going to make you more sensitive to those things. Just having an awareness of it is going to bring it to the forefront, I think.

That's one of the tougher things that there is to grapple about typography. There really isn't a single thing that you can do that's just going to fix everything in all scenarios. There isn't one book that you can read that's going to say everything you need to know about typography, and when you're done, you're now a typographic expert. It's something that you just have to keep driving towards. There are tons of books and resources and websites that will outline the principles of graphic design, even at an introductory level. But it's not so much, "do X, Y and X." It's, "learn why X, Y and Z do A, B and C."

Jen

There is something very weird and mysterious. Illusive. There's something very illusive. It feels like just chasing and chasing and chasing. Over the last three decades, things have changed so radically. Just what typography is and what typefaces, what digital fonts look like, is so different. Although it was true before digital, too. It was true with analog. Analog was not... there's not one way to do analog typography. It changed very radically in the years right before digital. Several times over. I don't know what I'm saying. [Both laugh]

"Ok, I've mastered all of the fonts that are available on my Macintosh computer à la 1997." [Jason laughs] But guess what? Now it's 1999 and there are new typefaces and now we're not printing to laser printers. Now we're printing straight to the digital negatives and that changes things. Now the paper quality has changed, the dot gain is different. It's just always been a moving train.

Jason

That's kind of why typography is important, too. It's similar in the ways that there are always new seasons of clothing every year. Because fashion changes and it adapts with — not just new needs for the world — but technology and influences upon it. It's something that needs to change because it's a reflection of what else is happening.

Jen

It feels like every time you look around, everybody's using the same combination of typefaces. What do you think about trends like that? Where, suddenly, something becomes very popular? Everybody's got big, bold sans serif type for headlines these days. Does that drive you crazy? Do you love it?

Jason

I don't mind it. There are the kind of people who push on the boundaries of making stuff and there are people who make stuff based on those boundaries. I think it only bothers me when people that I look to for inspiration — or companies that I look to for inspiration — fall into those traps, when I'm looking for them to establish what the next thing is. That's the only time it bothers me. If people are using good typefaces, whether or not they're on 10 other websites, I don't really care. If something looks nice, I would rather have that happen than it matter that it isn't necessarily unique. Because the typography itself can be unique, not just the typefaces.

Jen

What does it usually look like when you see somebody pushing the boundaries of what's next? Figuring out something about typography that may set a trend or that everybody else will start to copy?

Jason

I think it just looks like something you probably haven't seen before. Something that actually catches your eye. It's another one of those things, you know it when you see it. When something just sticks out a little bit differently and you have to stop and really absorb it before you can do anything else.

Jen

Yeah. When you're just like, "Wow! I want that!" [Jason laughs] Do you see that often?

Jason

I think so. Not daily or anything. But definitely often enough. I think that's probably one of the great things about the web. Not only is it a community that is very open in how we share what we learn, but everyone's trying to tinker, all at the same time. Just based on pure volume, we have a lot of people that figure interesting things out.

Jen

There are now so many typefaces available. Because the font foundries, the companies who are making the fonts themselves, they have all switched to this new business model. You could probably talk about some of that. You watched that happen.

What did it take to go from an industry that was fairly frightened of piracy? They could have been very conservative and said, "No, we're going to lock everything up." We ended up with a situation where it feels like it's a whole new world of business models and there's so much more potential income for companies that own typefaces. Because now we wall want custom typefaces for our websites.

Jason

I think first it's certainly not in the past tense. I think foundries still have a great fear of piracy. Rightfully so, because their work is very heavily pirated. Often in widespread forms. I think it took a lot for foundries to want to come to the web in that way. A lot of the places where their work was pirated is the web. It took them awhile to embrace that as a new possible venture. Because it felt like that's just where people stole their stuff. I can completely understand that from all sides. But when you have so many people out there wanting to use your work, in legal ways, and being very vocal about it, it begins to shape a very compelling case.

I think Typekit saw this very early on. It was one of the things that we really tried to embrace. The personal website user. Someone who just wants to make a site on their own, make it look nice and have some representation of themselves out there. That is the kind of person that is very compelling to a foundry. It's a very personal take on things. They might not be the one that makes up the biggest chunk of change that the foundry needs to make, but I think that kind of person, en masse, really makes the case for why this stuff matters for the web.

Jen

It is interesting when you think back to the time when buying a typeface meant picking up a bunch of boxes of pieces of wood and metal. [Both laugh] Maybe you could barely afford a new typeface every two or three years and your print shop owned six of them.

Jason

Right.

Jen

And making a typeface meant making bits and pieces of metal and wood. To now it being like, "My cousin's building a website and wants a typeface and is willing to spend whatever number of dollars it's going to cast to either rent or buy permission to use this typeface." Oh, look. Million and millions and millions and millions of people as potential customers instead of a handful of print shops. [Jason laughs]

Jen

So, typography. [Jason laughs] I could just sit here and ask Jason Santa Maria all my own questions about what I'm succeeding in or not succeeding in. [Laughs]

Jason

Go right ahead!

Jen

How long does it take you? Let's say you're looking for some new typefaces. You're not going to use the same one that you've used before. You really want to figure out something cutting edge or do something different. How long might it take you to search and look and find and choose a typeface?

Jason

It can vary with the project. There are times when I'll know right away what I want to use and I'll try it and it'll work and it's all done. There are times when I spend time off and on during a whole week. Just trying to track down something that looks good. After about a day or two of searching, then I start broadening things out. I start asking a couple of friends. Have they seen anything interesting? Or, "Hey, have you seen a typeface that looks like this but not this?" Just seeing if anyone else has seen what I'm after.

I also keep up to date on a lot of my favorite foundries and what they release. I've started collecting stuff. I've been using Pinterest for this. I start collecting either new typefaces that I like that I could potentially see myself using, or typefaces that I've recently bought so I can remember. You bought that typeface that was on sale that one day but it was eight months ago and you've probably forgotten about it because you haven't used it. I know whenever I'm looking for something that might be a good choice, too.

It takes work. It's like anything else, keeping up with anything new that comes out.

Jen

What is it that you're looking for? If you're on a hunt, what are you hunting? If you have a new project, what is it that you're thinking about while you're on that hunt?

Jason

Whatever the project is about. I often try to abstract what it is that I'm after rather than looking for a new typeface or a fancy serif or something like that. I start thinking about the qualities of the project. What does it have to imbue? Is it something delicate and flowing? Is it something strong and stable? Or machined, or something like that. I start thinking of words like that. Just being able to abstract it one level that way helps me to not just look at a typeface, but what the typeface can represent as well.

Jen

Do you typically work off branding guides that people have given you? Or is it a bit more — I don't know what the word is — artistic? Where you've come up with your own words?

Jason

I think it's all of the above. When I was doing a lot more client work, the client would come to the table with an idea in mind of what they wanted something to feel like. That's standard user experience questioning and setup before getting started, anyway. That's the same stuff that informs the tone of the writing and the tone of the rest of the design and things like that.

Jen

I think it's really standard at a certain budget level. At a certain enterprise, whatever. I think that it can be very easy, when you're not at that level... especially if you're not in New York. I know we're both in New York and New York City just... the whole city kind of runs on that mode. [Laughs] The enterprise-media-machine-mode.

Jason

Yeah, but you can get that information just from casual conversation. If it is with the client. Just casual conversation about what it is that they think is important about their company. Talking to people who use that company's product or service or what have you. Just getting a really rough sense. It doesn't have to be a big production or rely on money. Just a little bit of research.

Jen

I think it's easy to not realize that's part of the process. It's easy for many people who've not working in the bigger world to not realize. You can be that direct with things. You can really say, "Ok, what feeling do we want this to end up with? What feeling do we want the user to have when they come to the site? What impression do we want them to have?" The word "brand" is what a lot of people use when they're creating, when they're articulating, that in a project.

But I think for most people the idea of "brand" ends up with all these weird connotation of, "Ugh. This is not a Coca-Cola account. We don't need to talk about branding. We're building a website for a yoga studio around the corner." But there's a way in which, well, that yoga studio around the corner, in a neighborhood... lots of times you can skip over that step. People do skip over that step. They just go with stereotypical yoga studio feeling. It's a yoga studio, it should be cream colors and have an Om symbol on it and the font should be script-y. It can get into a lot of stereotypes in that way. Or maybe not stereotypes. Maybe it is a good match. Everyone knows what a yoga studio is going to feel like, so it's not that hard to figure out what you want the typefaces to be. But maybe you want a yoga studio that isn't so... that version. Maybe you want a yoga studio for cross-fit folks athletes to come to you. You want it to be a strong, kick ass yoga studio. In which case you would want to pick a very different set of typefaces. There's something really important in what you're talking about that can be hard to remember to do. [Laughs]

Jason

Absolutely. Yeah. I think, too, one of the biggest dangers is early on — when you don't necessarily have a solid idea of where a design might go — to put a little too much weight in the typeface selection. So much so that you're looking for a typeface to be the design, when the design should come through in the setting, in the typography, rather than the typeface itself, most times.

Jen

Let's talk some about typography. Once you have a typeface, what is it that you're doing with it? What is it that you put your time, your attention, your focus into? The way that you implement that font, that typeface.

Jason

I think I mention this in the book, too. I think of it as molding clay. That's a super artsy-fartsy way to think about it but it works mentally for me. I feel like I'm just shaping and playing with it. Getting a sense for how it looks in a bunch of different ways. Whether I'm using it big or in all caps or tracked out. What it looks like as a paragraph or a headline. In different colors, in different arrangements. Getting a feel for where it's flexibility lies. That's where I spend most of my time. At least initially, when I've settled on a typeface.

More times than not, I focus most heavily on what that typeface is going to look like for a long period of reading. I'm almost always obsessed with paragraphs and how those shake out. Finding just the right line length that's going to work, just the right amount of line spacing, just the right color. That's where people are going to spend most of their time so that's where I want to put the most thought.

Jen

I feel like I keep trying to come up with an awesome question to unlock the secrets of this stuff. [Both laugh]

Jason

But that's kind of it. If there were secrets, we wouldn't be talking about it very much. If there were just these three things that you could do that would make everything better all the time, it wouldn't be difficult. It would be something that would be pre-baked in to everything that we did. It's not like that. It takes a little bit of thought. That's why I think that it's a rewarding practice but one that has just a small barrier to entry. I feel like that barrier to entry, not unlike most user experience design, is just empathy.

Jen

Empathy for who, for which person?

Jason

Empathy for the reader.

Jen

Yeah. I think it's especially hard when there are so many devices and there are so many different ways of reading. People are not the same. As many episodes end up being about, I could just insert a rant here. [Both laugh]

Remember that not everybody has the same kind of eyesight as you have and not everybody is in their 20s like you are. A lot of people need their type to be bigger. A lot of people are going to be on some crappy phone. A lot of people are going to have a different experience than what you're having in the moment when you look at this stuff.

That is the difference between print and the web, of course. Is having to chose these typefaces and all the decisions about the typography based on how it's going to look on a range of different devices.

What kind of tools do you use while you're doing this? What kind of tools do you use while you're making decisions, while you're roughing out things and testing?

Jason

I usually just go through all the devices and things that I use on a daily basis. From a desktop to a laptop to a phone to a tablet to anything else. To a TV. Just looking at all the different places that I usually consume any sort of content and articles. That's the bare minimum that any of us should do, is to go through our own cycles. I think beyond that, obviously stuff like a device lab is immensely useful when testing out stuff like this.

Jen

And Typekit has those tools where you can see different fonts in different browsers, right? Click over and you can see what it's going to look like in Windows in IE4. [Both laugh] Or IE8. Just a little bit of this and that. You can see, "Yeah, that looks terrible but it looks the kind of terrible that people who use PCs are used to." [Both laugh]

Jason

The expected kind of terrible.

Jen

Right. Versus the, "Ok, that's completely unreadable." [Jason laughs]

What do you think about retina and non-retina? Because that's crazy. Because I don't yet work on a retina screen, I work on a regular type of screen and then I use retina for phones and tablets. But it seems like it's getting kind of weird and hard. Because I'll see typefaces, I'm trying to chose, and I'm like, "That one doesn't really look that great." And then I pick up my iPad and I'm like, "Actually that looks kind of awesome." Then I want to only look on the iPad. I'm using the iPad to make a decision and then everything just looks bad on my regular screen. [Both laugh] Are you caught in this world of retina and non-retina as well? How do you feel about that?

Jason

I'm certainly caught. I'm probably split down the middle between devices that have retina screens versus ones that don't. Retina stuff is super exciting, especially for typefaces. Because all the ones that are, like you're saying, just so close to almost being awesome, but they render really poorly because the resolution isn't there. Especially some older ones that might not have had any fine-tuning in more recent years. It's exciting to see those rendered very nicely on a screen. Back when we, as much as we wanted to only support the more modern browsers that we were using, we also had to think about the crappy browsers that are still on all the old systems. It's the same thing with type. You have to use typefaces that are strong, that are really built well for the environment that we're using today. Not the environment that we want.

Jen

I think there's something. Just pick a high-quality typeface that was created by a well-known foundry and you're going to be pretty good to go.

Jason

Yeah. It's also gotten to the point now where any of those well-known foundries or the services — whether it's Webtype or Typekit or what have you — almost any typeface they have out there, that is newly available, something that they release now, is going to take that into consideration. Or if it doesn't, it will tell you, "Not made for screen use," or whatever. I think it's just become par for the course now.

Jen

In fact, I've been spending a lot of time on myfonts.com. MyFonts used to be awesome because they had more fonts than everybody else! But also dangerous because they had more bad fonts than anybody else! [Both laugh]

Jason

Yeah, absolutely.

Jen

It's been years since I've spent quite this much time on MyFonts. Because for many years I did print and then for many years I did the web and there were no choices on MyFonts. But recently I was struck at just how many high-quality faces they have. I'm like, "Look at all of these!" They're actually all pretty good. I don't see the kind of crappy ones I used to see over there. Even the ones that just feel like knockoffs. Here's the famous font that's going to cost you more money than your budget, here's the knockoff that's almost identical, but their "e" is slightly different. [Jason laughs] Oh, and their kerning is terrible and their letter spacing is terrible and it looks horrible most of the time. There was always that danger of, "No, you really want to spend the money because the knockoff has more problems than you're ready to handle." Unless you want to go into Illustrator and hand-kern every letter. [Both laugh] Just stay away.

Jason

[Laughs] Nope, nope, nope.

Jen

And of course, that's impossible on the web. It's exciting to see so many high-quality faces out there. Rather than this, five amazing typefaces and thousands of bad ones.

Jason

Absolutely. We're really lucky.

Jen

But I do find myself in a situation where sometimes I see a Tweet and they're like, "Look, this person's awesome new website with this awesome typography!" And like, "Ooo, let's look at awesome typography!" [Jason laughs] I click and I look and I'm like, "Ah! My eyes!" Like, I can't read that. I don't like it. Then I'm like, "Wait a minute." I look at it on my iPad and I'm like, "That looks gorgeous." I wonder at what point are we going to tip to where looking gorgeous on retina's great and good enough and we're not really going to worry so much about everybody else. The same way we don't worry about... I mean, I don't worry about typography in IE6 on a PC, on a Windows XP machine. Windows XP typography? I'm not worrying about it. If you have Windows XP, your eyes are going to hurt all day.

Jason

Yeah, the web is already a different experience for you.

Jen

Right. But that's not true quite yet. Right now, most computer screens are not retina. They're much better than they used to be. Especially on the PC side. Windows 8 is way better than Windows XP when rendering fonts. But I think we're about to see — and I wish it would be this fall, but it's not, it's probably going to be next spring — a jump. When all of a sudden — at least many of us who use Macintosh computers for professional situations where spending a lot of money on a computer is a good business decision — we're going to all jump to retina screens. I think it's going to be weird and odd because suddenly we're going to be making decisions retina-first.

I guess this is a rambling question to ask. Do you think there are designers who are already making decisions around typography retina-first and not worrying so much about non-retina screens?

Jason

I'm sure there are. Part of me thinks that's unfortunate. But there's a time and a place for all of that. Even when we're making our own personal sites, and when we were doing that back in the day, we weren't as worried about what it would look like in an older browser. We were saying, "Let's push something forward and let's try and only support this one thing in a new browser." There are certainly ideals of progressive enhancement and how we should be dealing with that. I think when it comes to your personal design, there's a little bit more flexibility to have things break. To have things not always work the same exact way for everyone. Or possibly not work at all. In professional work, for something for either your business or your clients, I think we're still a ways off from it. From being able to not consider what a screen that does have retina capabilities is like.

Jen

It just feels like sometimes there's this little bit of a... Typeface A looks amazing in retina. And it looks pretty good in non-retina, but it doesn't look as good as Georgia. It's a little bit clunky. It's not hard to read but your eyes don't flutter across that screen like it's butter. [Jason laughs] Ok, that's Typeface A. Typeface B, on the non-retina screen, it's competing with Georgia. It's very, very readable. It's very easy on the eyes. When you flip over to retina, it looks pretty good over there, too. That's a hard decision. Which one do you go with? I feel like, well, B of course. But I feel like maybe that's part of what I'm seeing when I see other people's sites and I wonder, "Why did you chose that typography?" Maybe they went with decision A.

Jason

Right. It's really not anything that we can discount just yet.

Jen

Yeah. These are subtleties I'm talking about, too, the kind of gorgeousness that makes your heart sing, those of us who care about these things.

Jason

Absolutely. I'm very happy that the screen resolution thing is being taken up all over. It's no just Apple, it's not just Windows, it's not just phones. It's becoming much more widespread. When it does really begin to take over the majority, it's going to feel a little bit more like everyone is involved. Not just one faction. It's still going to be more of a new-device thing for a very long time. It'll be interesting to see how that can unfold.

Jen

We've been talking a lot about retina and non-retina in the industry over the last couple of years as retina has showed up, as Apple has pushed it out. I think, really, because it affected images and the number of pixels an image is and it's kind of a big deal. But the reality is that screens have been changing and getting better and better and better the whole time. The switch from 8-bit color to 16-bit color to 32-bit color was revolutionary. [Laughs]

Jason

Right.

Jen

Or just from black and white to gray scale to 8-bit color. This has been changing the whole time. We haven't always talked about it. There hasn't quite necessarily been as much synchronicity. Right now, it feels like everything's going from non-retina to retina or 3x, potentially three times as much pixels. Where in the past it was, "Well, PCs are doing this. Macs are doing that other thing." I forget all the different lingo. The ways that type was rendered on the page and the way that, like, "Is there anti-aliasing or not?" There have been all these kinds of things all the time. As designers on the web, we just didn't have any control over any of it. We didn't really have to talk about it. It's like, "We can use Georgia or we can use... Times." [Laughs] "Which one do you want to use? It doesn't matter what the resolution of the screen is." [Jason laughs]

Now you have to think about these things because there are all these choices to make around what typefaces to use.

Jason

That's kind of exciting, though. It's better than having to chose between a bunch of bad options.

Jen

Yeah. It's really exciting. What kinds of things do you see on the horizon that you think are coming in the future on the web having to do with typography?

Jason

There are certainly things I hope for and definitely things that are in the works already. Some of the things that are in the works, which are very exciting, are better compression of typefaces. In the WOFF format, there's a new proposal out that further shrinks down the file sizes of WOFF format fonts. Which is really, really nice. As wonderful as it is to use new typefaces on a website, it's yet another asset that has to be loaded in. That can make it really difficult to use a rich palette that good typography might require. I'm not talking about lots of different typefaces but different variations of one typeface. Whether it be italic or bold or special characters, accented characters, ligatures. Things that can really make for a rich typographic palette only further increase the file size of the thing that someone has to download just to view your site and read what's there.

There's certainly other things that I hope come to pass eventually. This is probably me talking from the things I enjoy in the print world. Things like better hyphenation and justification. The hyphenation that we have now, it's only supported in a handful of browsers. It doesn't actually seem to work against a library or a dictionary of any sort, so it breaks words in really awkward ways. There's no fine-tune control over that.

The other thing that I would love to see a little bit deeper integration on, is more size-specific typeface settings. Being able to have a little bit more of a control and not have it be so manual. Over what typefaces and what weights of typefaces are being used at what sizes.

Jen

Say more about that. What do you mean?

Jason

The way that things used to be done, certainly in the days of metal type. It was automatic that you would have size adjustments based on the size of the typeface. The smaller a font would appear — whether it's 6 point, 8 point, what have you — it would usually appear a little bit bolder than it's counterpart that would be 18 or 24 or 36 point. That's because that they were actual, physical objects that were carved. You could tailor the typeface and weight to that size so it would always appear in its best form.

But now most of the digital typefaces that we use are either cut — or based upon old cuts — of a uniform size. If you're looking at a revival of a Caslon, it was based upon the printing or the original cuts of a particular size of that typeface. That generalization is used to represent both small and large type.

Some typefaces have different size-specific variants. You might have seen "Headline" or "Display" or "Caption," those kinds of weights appended to the end of a typeface's name. Those are specific adjustments made for a different size range. But like I was just saying, these are yet more files that need to be loaded into a page. More assets. This increases the page load, but, wow. It makes a huge difference in our typographic palette. Especially when you start thinking about how type needs to act responsively across our devices. Things can look just as wonderful on a desktop or a phone or a tablet even though they might be using different typefaces or different actual font files.

Jen

Now it's like, here's the foo font small and the foo font display. You use foo font small and you have to manually say, "That's for paragraphs and for this, this and this place. Use foo font display for your headlines." It's just a lot of work. You'd rather just have one font and be able to say, "Ok, here I am. Oh, look, I made that 24." You just automatically adjust it. Now you're 18. Now you're 14. No you're 45.

Jason

Mhm. Yeah. There have been explorations into that in past years, like Adobe's multiple master format. But it's definitely not made its way to the web. It's a much smaller subset of typeface families that have size-specific variations included.

Jen

It would be terrific to have them compressed tighter. Many times, you want to load not just one font or two fonts. One for body copy and one for display. But to have the condensed version and to have the bold and the italic and the not bold, not italic versions. Those really should all be separate faces. But you can't afford that many in your page download. It's just too many kilobytes. It becomes too big. So you start saying, "No no no no no no no no no no no, we'll do fake italics, we'll do fake bold, that's fine."

Jason

[Laughs] Don't do that. [Both laugh]

Jen

Sometimes you have no choice. It's like, I can't afford the page weight. Or I've picked a typeface that doesn't have italics built in to it so we're just asking the browser to do italics.

Jason

Then you have selected a bad choice. [Both laugh]

Jen

Get the no from Jason Santa Maria. Don't do it.

Jason

That just gets back to, choose a typeface that has everything that your content requires.

Jen

What are some of your... this is where I should pitch your book again. What are some of your top tips for people who want to do great typography?

Jason

[Laughs] Top tips for...

Jen

Off the top of your head. A couple things from your book or from your life.

Jason

Looking for quality typefaces. There are so many now that it isn't a needle in a haystack so much anymore. But just trying to find one that's appropriate. The tools that you have should be as strong as you can afford, as strong as you can find. There shouldn't be a reason that the typeface that you have, that you've selected, doesn't support what you need it to do. You should be able to find something that does.

One of the biggest ones is just being able to create hierarchy and difference in your designs. Either through one typeface or two typefaces. The way the typeface interacts with the layout. Just being able to create some interest in that way. Oftentimes this is really summed up by simply choosing a serif and a sans serif. Because they're inherently going to be very different because they're different kinds of typefaces. That kind of contrast is what helps you to create a system for understanding in your design. You can make some content look like one thing and another content look like another thing. People can mentally group that content together. It creates a map for them to understand everything.

Jen

Yup. [Both laugh] Yeah, do that!

Jason

Do that! Does it feel overwhelming? Is it just, "Ugh"?

Jen

I don't know. I think for some people it is probably very overwhelming. I think for some people are already bored with it and they're like, whatever, I do that everyday. [Jason laughs]

I know for me, personally, it's just an epic quest to find perfection. And I don't want to let it go for some reason.

Jason

Well, there's not really time for perfection. Just keep practicing. Keep doing it and don't worry about making everything perfect.

Jen

It is one of those skills, I feel like, when I was cranking out eight graphic design jobs a month, including a magazine... maybe not eight, maybe three to four is more accurate. Plus the magazine. I had it down. I could design, write the copy for, and lay out a postcard in four hours. And speed dial my printer and ask him to send his guy to come get it. Every once in a while, I could ask, "Ok, Walter, it's time for the favor. We screwed the schedule on this one. This is the one I need the favor for. Can you please come and get one of my three zip disks? And can you bring the other one back? Because I don't have the budget to buy a fourth one." [Both laugh] It's easy at that point. Yeah, whatever, clickity-click-click. There are only so many options. The big inventions there were, like, "Let's cut the paper the other direction." [Both laugh] So our postcards are a half of a 8.5x11" piece of paper folded horizontally instead of vertically. Like, "Ooh, that's fancy." Or finally being able to afford four color and trying to figure out what to do with that.

These days, there's just so much possibility. Between really understanding grids — changing up layout to be more about Flexbox and Shapes instead of a 960 grid system, 12 column grid — and all these typography choices. It's not that it's overwhelming to me. It's just that I'd like to launch the new website for The Web Ahead last weekend. [Both laugh] Instead, I'm on week 1 and a half of searching for typography. Twice, I think, I thought I had it. Then I went away and came back and was like, "No. Ok. I don't have it."

Jason

You could always get close and update it later.

Jen

Yes. I can always... well. [Jason laughs] Just fake it for awhile. Go work on something else. Come back and change it later.

Jason

Exactly.

Jen

I've got everything set up in variables in SASS. It's very quick to make changes. I've got that down.

Jason

See, that part's all easy. There are plenty of people who are really great with type that struggle with SASS. [Laughs] What would you tell them?

Jen

It's just practice? [Jason laughs]

It's just that perfectionism. It's not that I don't know how to do typography and can't. It's just that I don't like what I have yet to the level that I want to. I don't love it yet the way that I want to.

But hopefully soon. When the new site is out, you, listener, will be able to go to the show notes in the page for this episode. Which will probably also have a transcript on it. You can go to thewebahead.net/83. The show notes will also be at 5by5.tv/webahead/83. The transcript will be at transcripts.thewebahead.net/83. That URL will always work. The transcripts will live there until the new website comes out. Once the new website comes out, I'll put up a bunch of htaccess redirects and they'll automatically direct you to the right place.

When you see the new website and you see the typography that I've chosen, you can think about this show. [Both laugh]

If you're also interested in finding out when the new site's coming out, you can go to 5by5.tv/webahead/newsletter and drop your name and info into this little form and sign up for the newsletter for the show. I'll be sending out an email telling everybody when the site is up. Then maybe we will potentially in the future have other things coming out. Maybe the show notes will get emailed to you each week when the show comes out. Stay tuned. I've got to finish the typography before I master the email newsletter world. Minimum shippable, viable product, right? [Both laugh]

Thank you so much, Jason Santa Maria, for being on the show today.

Jason

Thank you so much for having me.

Jen

And to Squarespace for making it possible to do this show. Until next week.