July 2nd, 2014
When you break down written language, it’s really just a carefully crafted set of tiny symbols. It’s easy to dismiss these meticulous creations in daily life as simply, reading. The shape, readability, and size of these symbols are all factors in effectively communicating ideas, and have been for thousands of years. In essence, typography itself is more than just picking a font.
Tim Brown works at Adobe Typekit. Tim says there is a certain level of complexity in good typography. There’s more to it than symbols and shapes or serif versus sans-serif. One of the more important aspects that affects communication is the spacing of these symbols. A well designed typeface creates a rhythm and balance in the words. This allows you to apply this balance to your typography and your design as a whole.
Attend a daylong workshop with Tim at UI19
Tim’s UI19 workshop, Designing with Type, in Boston October 29 will show you how to choose and use type on the web, from serifs and superfamilies to counters and compositions.
Register with promotion code TIMCAST and get $300 off the current conference price.
|Explore Tim’s workshop|
Jared Spool: Hello, everyone. You are listening to, yet, another episode of Spoolcast and I am so excited, because we have someone new that we haven’t talked to before, Tim Brown. Tim works at Adobe Typekit.
He is the brains behind the Typekit Practice system, which if you haven’t checked it out is really quite brilliant. It’s a way to learn about typography and fonts and understand what you’re doing, but he is also speaking at the User Interface Conference this fall. He’s going to be giving a full day workshop on designing width type and how to get over your fears of fonts and types and typefaces. It’s going to be a lot of fun. I’m really excited about it. We’re going to talk about type today. Hi, Tim.
Tim Brown: Hi, Jared. Thanks for having me.
Jared: Thanks for taking the time to talk to me. This idea that type does not have to be scary. Back in the day, we had ourselves, what, eight fonts to play with. It was hard figuring out when to use Georgia and when to use Verdana.
Now, because of companies like Typekit, we’ve got thousands of fonts to play with. With Google Fonts and all these different resources now, it feels scary. It feels like I could do the wrong thing. I could make the mistake. I could do that thing that will get me ridiculed in designer world forever by accidentally using Comic Sans when I’m not supposed to.
Tim: I really don’t know if people would be scared of that stuff. There’s a lot of fun to be had. There are a lot of good choices to be made.
Jared: There is. You and I were talking about the workshop. One of the things that I’ve noticed you’ve done with the workshop is you’ve divided the day into layers.
The layers seem to be around going everywhere from type up to blocks of text to entire pages. I don’t usually think of type as being anything, but rather I’m using Helvetica Neue-ish. I saw a t-shirt the other day that said, “Helvetica is the Neue Black.”
Tim: I’ve seen that, too.
Jared: That’s very funny. But when I think of type, I guess, I’ve always thought of, “Do I pick Roman versus Italic? Do I pick Helvetica versus something else, Cooper Black?” [laughs]
Tim: That’s the big part of it. If you spend time looking at type, what you’ll find is that these are tiny symbols. We see them everyday and you overlook them as you’re reading, but they’re very carefully shaped little symbols. Humans have been using these symbols to get ideas across to one another for hundreds of years, thousands of years. They’ve evolved in different ways.
If you study enough of those different shapes, you’ll notice that some are slightly different than others in really subtle ways. When you look at them up close, the differences aren’t so subtle, but there is a complexity to all of that that can be really intimidating. The way that symbols are shaped is a big deal. It changes how we feel about seeing text. Picking a font is a big part of typography, but there’s more to fonts than those symbols and shapes.
There’s more to typography than picking that font or a set of symbols. The shapes of the letters are one thing that a type designer creates, but another big part of type design is deciding how those shapes, those glyphs, are spaced, so in some junky fonts that you might find online or stuff that came with your computer that isn’t quite the best, or things like that.
When I was a web designer at Vassar College, a while back — I was thinking about this story two days ago for some reason — I was really into type. I was working on a new website for Vassar. At Vassar College, they make a new unique look and feel for every department and office on campus. I really had a blank slate working on this one office’s website.
I wanted Sans-Serif typeface that would feel good for the school. In a lot of the school materials that I liked, they used a Serif’s typeface called Goudy Old Style. I wanted something that was Sans-Serif that would go nicely with Goudy Old Style, they could see the words “Vassar College” in Goudy, and then, the name of the office in this Sans-Serif typeface that would look pleasing together.
At the time we didn’t have web formats, I was going to be using that and Georgia for lots of stuff anyway. Really, it was just a branded masthead of the site that I was caring so much about. I remember back to when I was trying to find that Sans- Serif typeface that would suit my needs.
I looked a lot at the shapes of letters. I spent so much time comparing the A of the potential Sans-Serif typeface to the A of other potential sans serif typefaces. Getting a feel for the shape of that A compared to the shape of the A of Goudy Old Style. I think what I ended up with was a fine choice. I don’t even remember what it was but one thing I wasn’t paying any attention to was the spacing in the font.
I remember having to do a lot of work adjusting the letter spacing to get this masthead area of the site looking right. That’s probably because whatever font I ended up choosing, it wasn’t spaced very well. That’s why designers have allegiances to certain foundries because they know those type designers put so much care into their fonts that they’re not going to be getting some font that’s poorly spaced. There’s more to those font files than the shapes of letters.
Now that we have web fonts and the entire compositions that we’re working on. Text, headings, everything in addition to that branded little area. It’s all branded, the whole website is all typefaces that we are suggesting. Your choice of the typefaces you use for all this stuff can be a much bigger deal than it used to be, too.
Jared: The idea that the spaces are part of the typeface is an idea that I didn’t realize until recently. It seems very zen. You not only think about the actual character, but the space between the characters. I’m reminded of that XKCD cartoon that says, “If you really hate someone teach them to recognize bad kerning.”
Tim: That’s right.
Jared: I work closely with someone who is deeply affected by bad kerning. I’ve seen her stop dead walking into a building because the sign outside was poorly kerned.
Tim: You’ve seen the talk that I’m giving this year, “Virtual Typography.” One of the things that I love to say in that talk is that type designers, certainly, in addition to giving shape and expression to the symbols of our languages, that type designers also are responsible for creating rhythm and balance in typeset words.
When you type stuff out in a particular font, the way that those letters are spaced and the overall rhythm that you see in all the different strokes of letters, that was part of the design. The type designer paid careful attention to the black and white spaces. That’s why, although I like to start with type itself, when you start talking about all that stuff it really flows right into text blocks.
You choose a font. It has a particular shape, some spacing about it, but you’re not setting single lines of text. You set big portions of text. You set headings and paragraphs together. You have to take that rhythm and spacing that’s inherent in a typeface and apply it to your typography, your overall design, the way that you’re handling text in whole compositions.
Jared: It’s interesting to me, this idea that once you start thinking about the spacing as being critical, now that distance between lines, that distance between paragraphs, that distance between margins. All of that starts to become part of that same thinking.
Is it true that the rules that apply to intercharacter spacing, you can generalize and expand them and understand almost in a whole, holistic way how the blocks of text should look and how the overall page layout should look and that there’s a pattern to that?
Tim: I would say that there is a feeling you can get from type that you bring outward into text blocks and then outward still into compositions.
I wouldn’t quite say there are rules, though. You could take a particular typeface and mathematically measure its spacing, let’s say, and try and extend that out into ideal line spacing and margins and whatever, but that’s not going to be appropriate for every situation.
You have to marry this appropriate spacing feeling that you get from the typeface with the context of your project, the needs of the text that you’re setting like what sort of content is it, and also, the contexts that you care about that your work will be reviewed in. When we talk about responsive design…because, really, that’s what I’m talking about.
I’ve reached the point where I don’t even think about responsive design anymore. It’s just design. Everything we do, everything I talk about, it’s with responsive design in mind. When you have this spacing coming out of the typeface, and you’re sensitive to the content you’re typesetting, and you’re thinking about the various contexts in which all the stuff will be put together you come up with unique answers based on the type you’re using and the project you’re using it on.
Jared: It seems to me that this is one of those things where you’re going to develop a feel for it, but the way you’re going to develop the feel for it is by just playing and constantly trying stuff and going, “That doesn’t work,” or, “That’s too broad and too spacey. I need to tighten it up.” You have to give yourself a chance to tweak and play.
Tim: You have to practice.
Jared: You have to practice. Yeah, it comes to back to that, doesn’t it?
Tim: That’s why I’m so excited about this website. It’s what I’ve always wanted to do. I’ve been studying typography and web design for more than 10 years. My college thesis in 2003 was about web typography back when we just had Verdana and Georgia, this has been a deep interest of mine.
Not only am I excited about teaching people about typography, I’m excited to practice it myself. When I say responsive and this feels like a second nature, along with that, taking what I’ve learned about responsive design working on the Web these past few years, and knowing what I know about typography from the books that I read and the education that I have.
You start to see that right now, the problems and challenges we face in our work. When we design stuff, it is unlike anything that we’ve ever faced before as professional graphic designers, as humans. We’re trying to make our work do things, make decisions for itself. That stuff only happened in the minds of designers and typographers years ago.
You have to make the work think like you think, and that’s a combination of knowing your type really know, knowing your content really well, and trying to find out what’s going on in readers’ environments and change your decision-making based on that.
Jared: How much of learning to work with type is just starting to see things that in the past you didn’t know were there?
Tim: That’s a big part of it, yeah.
Jared: I spent a lot of years hanging out with a good friend who was a filmmaker, and we would go to movies together. I swear that he would see a completely different movie than I saw, because he would be coming out talking about tracking shots and pulls and lighting changes and scene switches and all sorts of things, and I was thinking about the guy didn’t get the girl at the end.
He opened my eyes to film craft in a way that I had never seen it before. Typography feels very similar to me. There’s this hidden world right in front of us of all this detail that once you start to see it you can’t un-see it, as the saying goes. Now, you’re paying attention to all of this level of stuff that you never used to pay attention to. That’s part of learning the craft, I guess.
Tim: Thomas Phinney, who used to work at Adobe, and then worked at Extensis, and now, I think he’s with Fontlab. A while back, he wrote an article for Communication Arts where he directly compares typography to film editing and camera movement, the stuff that you don’t necessarily notice but you feel anyway.
Jared: Right. When it’s done wrong you just have this sense that something is not right about this movie.
Tim: Have you ever chosen a new font for a blog or something? You get some theme, it comes with a default typeface, but you want something different so you choose a new font. You apply it, and it doesn’t feel right. The reason it doesn’t feel right is because all the other decisions about the typography haven’t changed. All you changed as the font. You haven’t adjusted the size or the line length or the line spacing or any of the rest of the margins in the composition.
Those are concrete reasons why that doesn’t feel right. Having that kind of experience that comes with practice to identify reasons why something might not feel right and come up with the words for why something might not feel right, that’s the difference between your friend and you at that movie.
Jared: There are all these variables to manipulate. Before you start working, you don’t even know these variables exist. You learn the variables. You learn about line height, you learn about inner character spacing, you learn about margins and indentation and all this stuff.
You learn about what makes a good heading and what makes a good body text and what the spacing between above a heading and the previous body text versus below a heading and the body text. You learn all these variables. Now, you have to learn how to manipulate them in a way that they all flow together. That feels like a monstrous activity to learn.
Tim: Yeah, it does. That’s why people spend their whole life practicing. That’s why we love doing this. That’s a very interesting challenge, especially, when you face the same kinds of challenges in the context of many different projects that all have their own different content and timing. It’s really interesting. Really interesting stuff.
I think what bothers me about this is it shouldn’t feel like intimidating stressful. It should feel like a daunting challenge. With practice and experience you approach that kind of a big project with a kind of enthusiasm, because you know how to address it. You’ve gone through it before. You have a checklist of things in mind for how to break it down into more manageable chunks.
Jared: Alan Cooper has this saying that nobody ever likes to look stupid. I wonder if it’s because we’ve treated type as this mysterious thing for so long, that people are just afraid that they’re going to make some mistake that they can’t see, but everybody else can.
That sort of “Oh my gosh, can you believe that he wore that to work, type mistake.” They get scared and they don’t play. Having an environment — and I guess typekit practice, maybe this is what you were trying to do — having an environment where you can learn a couple of things and get in there and tweak it and play with it, and see at what point do I cross the threshold of this looking pretty good and this looking pretty bad and go back…
Tim: There are two parts to that feeling stupid thing. One is that if you know a few key things to address you won’t make bad choices. If you just get a handful of knowledge about typography you won’t make stupid choices. You might not make the best choices, but you won’t be embarrassed.
The other key to not feeling stupid or feeling embarrassed is to know that it’s all a balance, to know that you can’t make horrible choices. I don’t know, I can’t go over the basics right now on this call but in the workshop I will. As long as you make some basic decisions appropriately then the rest of it, the rest of somebody coming up to your work and saying, “That looks dumb,” it’s a conversation, really, is what it is.
You didn’t make bad decisions, even if somebody tells you you did. You made certain decisions, and you can defend them. That’s the other thing. Know some basics, and know how to defend the decisions you eventually made. I think both of those are really interesting things.
Jared: I don’t want you to teach the whole workshop, but what is an example of one of these decisions?
Tim: Don’t use display typefaces for body text. There are lots of fonts and lots of them look really interesting. Those shapes we talked about in the beginning of the call. Type designers spend a lot of time making those shapes really enticing. You need enticing type sometimes, when you need to turn somebody who’s walking by on the street into somebody who stops and reads what you have to tell them.
Once they’re reading, you don’t want to use any old typeface for that body text, for the main text somebody’s trying to absorb. A lot of the fanciness about those eye-catching display typefaces isn’t appropriate for body text. That’s one thing. Choose a typeface that’s appropriate for the text, for the way that you need to talk to a reader or a passerby.
Jared: I see this crime on packaging a lot where they have this fancy identity-ish text for the product name, and for some reason they decide to keep using that for all the ingredients list and all the instructions and all that stuff and you can’t read any of it.
Tim: The problem with that, and one of the other basics, is combining typefaces. It’s easy to take that branded typeface that you know you want to use and use it for everything, because it doesn’t feel wrong, and it feels really hard to come up with some other typeface that will work for that other text, but also, looks good with that brand of typeface. That’s a big challenge.
Then, you see people going the other way. They’re using a very subtle typeface that looks good at those small sizes and when you use it large is kind of dull. Finding a nice balance there, finding text that’s appropriate in the different contexts that you need it for but that also is engaging overall and feels like it’s a match. The other thing, of course, is nice, branded display faces and small text that don’t feel like they’re connected in any way. I’ve seen that all over packaging, too.
Jared: This is something I saw in your presentation when I saw it recently that intrigued me, this idea of typefaces actually change their line thickness and heights and things, the geometry of them, depending on what size the font is being used at.
The folks who crafted the old type that was used in printing presses actually would make things thicker or thinner based on how much ink they wanted to leave on the page. The letters weren’t exactly the same at 30 points as they were at eight points. I didn’t know that.
Tim: That’s just the nature of working in metal, the way that type designers used to. When you’re making something for an extremely small size, the features have to be thicker so that when it’s printed it will hold up. You see type designers doing the same kind of thing with digital typefaces.
Folks like the Font Bureau who have reading edge versions of their typefaces that are meant for use at small sizes on coarse screens, those are versions of popular Font Bureau typefaces that were slightly redrawn so that they would work better small and course. Other foundries are doing the same thing.
Monotype has a bunch of them. Hoefler & Frere-Jones have screen smart versions of their fonts. That’s all the same kind of mindset. Adobe type…which everybody knows Adobe as a software company, they have for 30 years employed a group of type designers who make things like Minion, Myriad, Adobe Castline, Garamonds, beautiful Garamonds, and now, more recently, these source font files.
What they do with a lot of their fonts is they create optical styles. It’s a similar idea where you have versions, very subtly different versions, of the same typeface meant for use at different sizes . The ones meant for very large use, display use, they have thinner, more hairline features because you’re using them large. Those won’t break down.
Think about that in the context of one of those branding situations. You have this family of typefaces that will work well on that packaging where some stuff needs to be big and some stuff needs to be small. Designers love finding super families that have those different components. That makes combining typefaces easier.
Jared: Tim, I find this completely fascinating. I am so looking forward to your workshop that you’re going to be giving at the UI19 conference because it’s going to be so much fun to really dive in deep and learn about all the different features of type and how to use them and how not to be scared of all this stuff.
Tim: I can’t wait. It’s going to be so much fun.
Jared: Great. If you guys are interested in coming to Tim’s workshop, it’s very easy to do this. You just go to uiconf.com and look over the full-day description that’s going to be there of his workshop, the description that we have. If you like it, it’s going to be October 27th through 29th in Boston, Massachusetts, and we’d love to see you there.
It’s a great chance to push the envelope and get comfortable with everything that goes into using type in your designs in a great way. Tim, thank you so much for spending time with us.
Tim: Thanks, Jared, it was my pleasure.
Jared: I want to thank our audience for spending time with us. Thank you, again, for encouraging our behavior. We’ll talk to you soon. Take care.