- Mark, thanks for coming to Australia. When we spoke earlier, you mentioned that you love this country and occasionally contemplate moving here. Surely you’d miss the British weather, though?
Ha ha! Judging by this week, no. You have your own blend of British weather here!
This is our third trip now. My wife and I used to live in Manly approximately ten years ago, for about six months, and we returned for a wedding three years ago. Every time we come back we have the same discussions, like, “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.
- But the coffee’s excellent!
The coffee’s excellent—but I don’t drink coffee! There you go.
- You’re well-known for being a typographic designer. Could you tell our readers what a typographic designer does?
Primarily, I design with type—which is more than just choosing the typeface. It means all elements of typographic design, from grids and hierarchies to typesetting, and 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, and art direction—those aspects.
- Many of our readers and listeners think of typography as being one aspect of design, but you were saying in your presentation today that you consider imagery, layout, and color to each be one aspect of typography?
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 element. They’re all related to type, and 99% of what we do on the Web, as designers, is typographic design.
Sure, you have the interaction layer, making sure it’s usable. But I think all of that is typographic design. I really do. Consider a designer doing what I did in university: designing an encyclopedia. You have to consider navigation and 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 quite evident, in my view.
- The key slide in your presentation that stood out was the 9 factors of typographic structure. It really resonated for me. Would you mind sharing how you came up with that structure, and how you use it in your workflow?
Yes. It’s taken a while to reach that point. This is the third model I’ve used to explain my thoughts about typography, and what I think typography is. The structure consists of nine squares: we have function along the bottom—language, typesetting, and grid; above that we have what represents form—rhythm, fonts, and hierarchy; and on top we have attributes—layout, color, and content.
All of these have to work together to create a strong typographic structure, although you can remove a couple and still retain a robust structure. On the Web we’ve always had very limited font choice, to the point where designers rarely consider typeface. But we have a really strong structure due to all the other elements, so we’re able to create really good, strong typographic design on the Web.
Just because we’re unable to choose our font, doesn’t necessarily mean we have to produce poor work. It’s still possible to create solid typographic design on the Web.
- I have to confess one point that came to mind when I saw you omit “font” from your typographic structure—I thought, “but the center doesn’t hold!” Is having this whole range of new fonts available on the horizon for use as simple as dropping “font” into the equation? Or are we going to have to relearn the structure for every font?
Yes, it’s not as simple as dropping it in, which is one of my concerns about
@font-face—that the barriers to entry for doing that are as simple as choosing Comic Sans from a drop-down. It requires no thought whatsoever. When you choose a font, you replace that bit in the middle with a different font, and it has an effect on all the surroundings. So yes, any font that’s dropped in there will affect the typesetting, the layout, the content, and the rhythm.
- Speaking of Comic Sans, you mentioned in your presentation that you had, perhaps mistakenly, been held up as a defender of the font. Do you want to clarify what your stance is on Comic Sans, and where it fits in the big picture?
I can almost hear the fury building in some designers’ minds. No, I don’t think Comic Sans is a bad typeface. Bad designers have used it, and it’s been used by non-designers who are making a design decision without having the right tools available to them. So, for example, my mum and dad might create a newsletter for their church. They want it to be friendly, so they use Comic Sans. And we see that all over the place.
It’s just been used in the wrong context so many times, because the barrier to entry is so low—no typographic schooling is needed to be able to choose it from a drop-down. People berate it for no good reason. It’s a font that’s been overused, rather than a font that’s inherently bad.
- Talking about bad fonts—an audience member at the end of your session asked about free fonts, and you responded that you thought the majority were “rather crappy.” Tell me, then: what’s the difference between a bad font, and a font perceived to be bad like Comic Sans.
There are a few differences. First, there’s the actual quality of the software—how does it render on different platforms, and in other browsers. The biggest issue that I see quite a lot with free fonts is bad kerning—the distance between individual letters. For example, if you have a capital T with a lowercase r next to it, the r has to go underneath the crossbar of the T. These kinds of issues, including spacing requirements, need to be addressed by a typographer when generating a font. With free fonts—because they’re free, and there’s no commercial backing behind them—then perhaps that time is reduced, and as a result the kerning is poorer.
Also, free fonts generally lack the breadth of weights available, making them 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; that way they can use just one typeface and use it right across many applications. Free fonts, on the other hand, are generally only available in single weights. They’re very rarely available in multiple weights. So that’s another issue.
And they take a long time to produce. I’m not having a go at free fonts. 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 very protective of (normally) years and years of work.
- I have a question about fixed and fluid layouts, as it’s obviously one of those topics that generate almost religious fervor in debate and discussion. The concept of a grid, and the concept of vertical rhythm—these are elements that seem to work quite well for a fixed layout. Is it possible to apply those concepts to a fluid layout as well?
Yes, it is. It’s just that your base unit of measurement needs to be relative, rather than fixed. So you can use percentages for 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 there’s an inherent relationship between the layout and the typeface that you’re using.
- What about incorporating IAB ad units, which are always specified in pixels, and which won’t change as text size increases or decreases?
Well, I think that comes down to control. It comes down to designers on the Web needing to lose control, and that’s difficult for designers to do. I’ve mentioned this over the past couple of days, and people like Khoi Vinh have been talking about it for years; I’m only just coming round to his way of thinking, I guess. It’s not because designers are being difficult—it’s the way we’re schooled. It’s part of our DNA: to control the message, and control the design. So asking us to lose control is actually a big ask, and I think that’s why a lot of designers end up going fixed—because they can control it to a degree.
- Maybe it’s their clients that are unable to give up that control?
Maybe it is! That’s a big issue as well—client expectations. But client expectations can work in reverse as well, you know. I’ve had clients who expect full-width, fluid layouts, and will ask, “Why is there a lot of white space over here on the screen?” So it works both ways.
- In your talk, the definition of typography that you presented was: “the mechanical notation and arrangement of language.” My question is, does the word “mechanical” imply that the art of typography is more of a science than an art?
Yes, I think it does. I think type design—the design of the letterforms—is more akin to art. There’s a lot of art craft in that process. To design a specific typeface so as to convey a certain feeling or idea for a large body of text is very, challenging. That’s more art than science.
Typographic design, the stuff that I’m talking about, is more science, really. There are rules, there are ways of doing things … it’s less about art than type design, absolutely.
- Finally, I thought your presentation was fantastic, but I was unable to work out whether you were pessimistic or optimistic about the imminent arming of hobbyists with a whole stack of new fonts to choose from.
Ha ha, yes, I was 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. With the wrong tools in place—such as Comic Sans in drop-downs—people are unable to make good design decisions.
For designers, I think it’s exciting, and it’s a good place to be. However, I think we lack the right fonts to use on the Web at this stage. The difference between web fonts and fonts designed for print is huge—more than just technically, but in the actual design of the typefaces themselves. I’d love to see browser vendors or big corporations step up to the plate, like Microsoft did, and invest in having web fonts designed and distributed—whether it’s like TypeKit, or if it’s the foundries themselves—so there’s a way of putting the right typefaces into the right hands. Because at the moment, putting Garamond or Bodoni on the Web is fairly ordinary.
- Thank you very much for your time, Mark, it’s much appreciated. And enjoy the rest of your time in Australia.
That’s all right, thank you very much!
Matthew Magain is a UX designer with over 15 years of experience creating exceptional digital experiences for companies such as IBM, Australia Post, and sitepoint.com. He is currently the Chief Doodler at Sketch Group, Co-founder of UX Mastery, and recently co-authored Everyday UX, an inspiring collection of interviews with some of the best UX Designers in the world. Matthew is also the creator of Charlie Weatherburn and the Flying Machine.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja