SitePoint Podcast #35: Typographic Design with Mark Boulton

Episode 35 of The SitePoint Podcast is now available! This week, Matt Magain (@mattymcg) catches up with Mark Boulton at Web Directions South 2009 to discuss web design, typography, and why they aren’t the separate things they may appear to be.

A complete transcript of the interviews is provided below.

Download this Episode

You can also download this episode as a standalone MP3 file. Here’s the link:

• SitePoint Podcast #35: Typographic Design with Mark Boulton (MP3, 12.6MB)

Interview Transcript

Matt: This is Matt Magain from SitePoint. I’m at the Web Directions South conference and I’m speaking with Mark Boulton.

Mark: Hello.

Matt: Mark thanks for coming to Australia. When we spoke earlier, you mentioned that you love the place and that you contemplated moving here occasionally?

Mark: Yes.

Matt: Don’t you think you’d miss the British weather?

Mark: Judging by this week, no. You have your own blend of British weather here. Yeah, every time we come back… this is our third trip now – my wife and I used to live in Manly about 10 years ago for about six months and we came back for a wedding three years ago. Every time we come back, we have the same discussions about should we move here? It’s so beautiful. I think we’d miss a good cup of tea though, to be honest. The tea’s not great.

Matt: But the coffee’s excellent.

Mark: But the coffee’s excellent but I don’t drink coffee. So there you go.

Matt: It could be the deal breaker.

Mark: Yeah, it could be.

Matt: So you’re quite well known for being a typographic designer. Can you tell our listeners what you think that term means?

Mark: Yeah. In short, it is designing with type primarily. It means… which is more than just the typeface. So it means all elements of typographic design from grids and hierarchy and typesetting, all that kind of stuff. It means focusing on that. So the difference between a typographic designer and a graphic designer is that a graphic designer does typographic design but it’s not their main focus. They’re often focused on imagery, photography, art direction, that kind of thing as well.

Matt: Right. So many of the readers and the listeners probably think of typography as being one aspect of design but you were saying in your talk that really you consider imagery and layout and color and that kind of stuff to be one aspect of typography.

Mark: Yes, I do. I think that any image you use on a design should really fit into a grid and the grid is a typographic grid. It should be created and designed with the typography in mind as the primary thing. So yeah, they’re all related to type really and on the web, 99% of what we do as designers is typographic design. So you got the interaction layer on there as well making sure it’s usable and all the rest of it, but I think all of that is typographic design. I really do. So consider a designer like I did in university, designing an encyclopedia, you have to worry about navigation, you have to think about access structure, you have to think about hierarchy and flow because an encyclopedia is not read cover-to-cover, it’s a reference book. So it has to be navigated in the same way that a web site is. The similarities are pretty evident, in my view.

Matt: The key slide in your presentation that stood out was the 9 factors of that typographic structure. It quite resonated for me but would you mind sharing how you came up with that structure and how you use it in your workflow?

Mark: Yeah, yeah. It’s taken a while to get to that point. This is the third kind of model I’ve used to explain my thoughts about typography and what I think typography is. So it’s nine squares – and I don’t think I can remember all of them off the top of my head.

Ah, here we are. Now, we have function on the bottom, language, typesetting, and rhythm; and then above that we have three which represent form, grids, fonts, and hierarchy; and above that we have attributes which are layout, color, and content. All of those have to work together to create a strong typographic structure. You can remove a couple of those and still retain a strong structure.

So on the Web, we’ve had a very, very limited font choice to the point of actually most designers not considering the typeface that much. But we’ve got a really good, strong structure with all the other pieces in that to create really good strong typographic design on the Web. And just because we can’t choose our font, it doesn’t necessarily matter; we’re still doing pretty good typographic design.

Matt: I have to confess that one thing that came to mind when I saw you omit font from the structure was “but the center doesn’t hold!” Is having on the horizon this whole range of new fonts available for use as simple as dropping font into the equation or are we going to have to relearn the structure for every font?

Mark: Yeah, it’s not as simple as dropping it in which is one of my concerns about @font-face is that the barriers to entry for doing that are as simple as choosing Comic Sans from a drop-down. It requires no thought whatsoever. And choosing the font, you replace that bit in the middle with a different font and it has an effect on all the surroundings. So yeah, any font that does get dropped in there will affect the typesetting, will affect the layout, will affect the content, will affect the rhythm. So yeah, it’s going to have an effect.

Matt: You mentioned Comic Sans and you mentioned in your presentation that you had perhaps mistakenly been held up as a defender of the font. Do you want to talk about, maybe clarify for some people what your stance is on Comic Sans and where it fits in the big picture?

Mark: Yeah, I can almost hear that people are listening to this. I can almost hear the fury building in some designers’ minds. Yeah, I don’t think Comic Sans is a bad typeface. I think it’s been used by bad designers or it’s been used by people who aren’t designers at all but are trying to make a design decision without having the right tools available to them.

My mum and dad, whatever, for their church might create a newsletter. They want it to be friendly so they use Comic Sans. And we see that all over the place and it’s not a bad typeface but it’s just been used in the wrong context so many times because the barrier to entry is so low and we don’t have to have any typographic schooling whatsoever to be able to choose it from a drop-down. But it’s not a bad font. People berate it for no good reason, I see. It’s a font that’s been overused. It’s not a font that is inherently bad.

Matt: So, talking about bad fonts, someone at the end of your session asked about free fonts and your response was that you thought the majority of them were rather crappy.

Mark: Yes.

Matt: So what’s the difference between a bad font and a font like Comic Sans which people conceive to be bad?

Mark: There are a few things. So the actual quality of the software, so how does it render on different platforms and in different browsers. The biggest thing that I see quite a lot with free fonts is bad kerning, the distance between letters are kerning pairs. So if you have a capital T with a lowercase r next to it, the r has to go underneath the crossbar of the T. And all of those kinds of things, the spacing for all of those has to be generated by a typographer at some stage in the production of the font and with free fonts, because they’re free and because there’s no commercial weight behind them or backing, then perhaps that time is reduced and as a result, the kerning is not as good. Also, free fonts don’t generally have the breadth of weights available which makes it quite counterproductive to be used commercially. Quite a lot of designers will choose a typeface in the print world and will want a full family of fonts to be able to use throughout the design so that they can use just one typeface and get away with it right across many applications. Free fonts, generally, are only available in single weights. They’re very rarely available in multiple weights. So that’s another issue and they take a long time. I’m not having a go at free fonts whatsoever.

Type design is a completely different discipline. My hat goes off to type designers because it’s hard work, it takes a long, long time to do, and it’s no wonder that foundries are being very protective of normally years and years of work.

Matt: I have a question about fixed and fluid layouts. It’s obviously one of those topics that generates almost religious fervor in debate and discussion. The concept of a grid and the concept of vertical rhythm, they’re all things that seem to work quite well for a fixed layout. Is it possible to apply those concepts to a fluid layout as well?

Mark: Yes, it is. It’s just your base unit of measurement needs to be relative rather than fixed. So you can use percentages or ems. Quite often using ems for any of that kind of layout stuff is actually preferable to using pixels because an em is related to your type so that there’s an inherent relationship between the layout and the typeface that you’re using.

Matt: What about incorporating IAB ad units, which are pixels and which won’t change as text size increases or decreases?

Mark: Yeah. Well, I think that comes down to control. I keep mentioning this over the past couple of days and people like Khoi Vinh had been talking about this for years and I’m only coming around to his way of thinking, I guess. Designers on the Web have to lose control and that’s difficult for designers to do. It’s not because we’re being difficult, it’s because the way we’re schooled and the way that we are; it’s part of our kind of DNA is to control the message and control the design and asking us to lose control is actually quite hard to do. I think that’s why a lot of designers end up going fixed because they can control it to a degree.

Matt: Maybe it’s their clients that can’t give up the control?

Mark: Maybe it is. That’s a big thing as well. It’s clients’ expectations as well but clients’ expectations work in reverse as well. I’ve had clients who expect full-width, expect fluid layouts and ask generally why is there a lot of white space over here on the screen? So it works both ways.

I don’t know whether I even answered your question though.

Matt: Well, let’s move on. In your talk, you cited the definition of typography that you agreed with was a mechanical notation and arrangement of language.

Mark: Yes.

Matt: My question is, does the word ‘mechanical’ imply that the art of typography is more of a science than an art?

Mark: Yes, I think it is. I think type design, so the design of the letterforms, that’s more akin to art. There’s a lot of art craft in that process.

To design a certain typeface to convey a certain feeling or idea for a large body of text is very, very challenging. That’s more kind of art and craft.

Typographic design, the stuff that I’m talking about, is more science, really. There are rules, there are ways of doing things and it’s less about art than type design, absolutely.

Matt: And my final question, I thought your presentation was fantastic, but I couldn’t work out whether you were pessimistic or optimistic about the imminent arming of hobbyists and everyone with a whole stack of new fonts to choose from.

Mark: Yes, I was being a bit of both, I think. I’m a little bit pessimistic at the moment because I feel like we’re giving hand grenades to kids. I think without the right tools in place such as Comic Sans in drop downs, we’re not giving people the right tools to make good design decisions. For designers, I think that it’s exciting and it’s a good place to be. However, I don’t think we’ve got the right fonts to use yet on the Web. The difference between web fonts and fonts designed for prints is huge. Not only technically but in the actual design of the typefaces themselves and I just don’t think we’re there yet with the right typefaces available. I’d love to see, I mentioned at the end of my talk, I’d love to see browser vendors or big corporations step up to the plate like Microsoft did and invest in getting some web fonts designed and then distributed on whatever platform whether it’s something like TypeKit or if it’s the foundries themselves, getting some way of getting the right typefaces into the right hands because at the moment, putting Garamond or Bodoni on the Web is not great.

Matt: Thank you very much for your time, Mark. I appreciate it.

Mark: Thank you very much.

Matt: Enjoy the rest of your time in Australia.

Mark: Thank you.

Kevin: This episode of the SitePoint Podcast was produced by Karn Broad, and I’m Kevin Yank. Bye for now!

Theme music by Mike Mella.

Thanks for listening! Feel free to let us know how we’re doing, or to continue the discussion, using the comments field below.