‘Five Simple Steps to Better Typography’

Liveblogging a presentation at @media2007 London by Mark Boulton

Mark took the stage at 2007.06.07 15:04.

I’m also here, as we’ve got the Samurai on after me and we’ve got JavaScript-fu tomorrow, I’m here to talk about one of the interests in my closet – I’m a complete martial-arts fan and I have been for about 20 years, which is twice as long as I’ve been interested in typography. But there are a lot of crossovers.

(Asks how many have attended a martial-arts course, then blue belts, then brown, then black.) First step is to be appropriate and adaptable. Good typographic design requires this above all else. (Shows Bruce Lee, compares typefaces to water, which is mutable.)

Typefaces tell stories. We have to understand what we’re trying to tell, then align the typography with the story. (Shows restaurant menu in Comic Sans, or actually Chalkboard.) This says “My daughter set the typeface menu.” If you went to a greasy spoon in Blackpool and it was set in this type (a script), delusions of grandeur, perhaps. An extreme example.

E. Gill: “There are about as many different types of letters as there are kinds of fools.” But what is this typeface (Gill Sans) saying? Businesslike? British? BBC? For BBC, it tells the right story – it’s got a British feel to it. It aligns very much with the brand values, almost, of the BBC.

But what about Save the Children (also using Gill)? Is that the right message for that corporation? They think so. (Shows “pretty horrific” Web site for them.) They hired Johnson Banks to address this. Rebranding is an extraordinarily expensive exercise to undertake for any corporation. They wanted to work within those bounds. Johnson Banks got kids to colour in outlines of Gill Sans, to tell more of a childlike story to align itself with the brand values of the organization, so they ended up with six weights of Gill Sans (shows SC Adam, letters made out of crosshatched squiggles). These are a bit more touchy-feely.

I did a typographic design degree many years ago. Don’t let the type (or the design) get in the way of the words. Talk about signage briefly, which actually has quite a lot in common with the Web. It’s not the time to get creative. (Shows green egress sign he redrew from Brussels.) (After a flight,) you want to get your luggage, go to the toilet, and get out of the airport. What does that sign tell you? Emergency exit? Run to the door? Emergency toilet? It really isn’t saying anything.

This photograph is courtesy of Joe Clark, a prototype for the new Toronto street signage in Akzidenz Condensed. It’s not telling the right story. There are legibility issues. Signage has to be tested; it has to work; it has to be tested again and again. I believe since they’ve prototyped this sign they’ve changed the font to Clearview, a font that was designed specifically for signage.

I’ve got to have a dig at Comic Sans (shows STAIRS TO BE USED IN EMERGENCY ONLY and GOODS LIFT ONLY on twin doors). It’s a legible typeface. It gets a really bad rap, and in the (wrong) context it is not the right font to use. (Shows warning sign from police in Arial and Comic Sans. Shows London 2012 logo. Shows quote: “If they really wanted a logo that would be inviting and inclusive, why did they design one that actually physically hurts you when you look at it?”)

Be adaptable to the requirements and appropriate to the story. Arm ourselves with knowledge and be aware of the medium, which isn’t very old.

Next step: Rhythm. (Shows capoiera, where the beat dictates the dance.) Vertical rhythm. (Shows variation of Richard Rutter’s example, where every fifth sidebar line aligns with every fourth line in main column.)

Balance and contrast. Opposing but complementary principles – hard and soft. Optical grey. When I was in art school, we were taught to paint, and to recognize tonal value. We did that by squinting. That knocks out all the detail and leaves just some bit of colour. When a body of type is set too tight, the grey is dark (and vice-versa). Sometimes just adding whitespace isn’t enough.

I was lucky enough to see Erik Spiekermann talk about the Economist redesign of a couple of years ago (shows slides). People think the publication is too heavy, too hard to read. Yeah, you need more space. Rather than adding line-height, I’m going to redraw the typeface.

(Shows Arial and Verdana lines and outlines of letterforms.) Just switching to Verdana can give a lighter grey. Compares Daily Mail (too-tight Arial), A List Apart. There is more line-height, but it’s set in Verdana.

Combine serif and sansserif fonts [which he pronounces as “sereef”]. (Shows a headline in same serif face as paragraph, then in Helvetica; then both sans; then sans hed and serif body; then bold serif hed.)

Minimize dark grey and carefully look at line height. Mix sans and serif.

Use the right tool for the right job. Hyphens are not dashes. This is where Joe is probably gonna go “Yes, they are!” (Shows samples with hyphen and double-hyphen as en dash. Shows nospace-emdash-nospace, and space-emdash-space;) either way is correct. In the U.S., it’s en dash with space on either side. Get yourself the Bringhurst book; in the U.K., get The Oxford Guide to Style, the updated old Hart’s rules.

There are stylistic differences not only per country but per organization. The important thing to say is they are not hyphens. Can’t we automate that? Yes, but that’s not the point. Just because Word automatically puts in en dashes when you type doesn’t mean you shouldn’t care about en dashes. (Recounts anecdote how everyone at the newspaper cares about little details like these.)

Use a system. Use a grid, a tool to help us as designers to organize information, and to help readers and viewers understand the information that’s presented. With a grid in place, you’ll never have to ask yourself: How do I align this list? Units are combined to create rows and columns, and multiple columns. They can be uneven. How do you decide on a unit size? You could start with the ad size. But there should be a direct relationship between your layout and your type size. (Shows rectangular unit divided into two vertical and three horizontal, each of which is 1.5em. Adds gutters of 0.5px and 0.33em at bottom.) The spaces between things are not arbitrary values.

(Shows tables with even weight of rules around cells. Removing vertical or horizontal lines emphasizes different data in the table. Add banding behind rows.) I see this loads on the Web and the banding is too strong. You get this horrible zebra effect. These are supposed to aid legibility, but they’re too strong. Add bold or colour to highlight a couple of numbers.

Set your type to a grid. Don’t overadorn tables. Align everything.

To recap the five steps:

• Be appropriate and adaptable.
• Use rhythm.
• Balance and contrast.
• Use the right tool for the job.
• Use a system.

Type is about the inconsequential, often-pain-in-the-arse details you can’t be bothered to do. If you take the time to address these, it will certainly knock someone off their feet.

Q&A

1. Q. from Kath Moonan: I think it’s fantastic that we’re really starting to see a massive trend in Web design going back to basics with typography and legibility. I’ve been working on the Web for 10 years, and five years ago everything was set in six point and David Carson and all that. But there’s a few things that worry me about matching really good typography with really good accessibility for people with dyslexia or low vision. I’d like to see more user testing with how Georgia copes with – because we know we’re not supposed to use serif for people with dyslexia. Or as soon as you increase the text size, the whole thing falls apart.

   A. When you’re defining your unit, it’s em-based rather than pixel-based. The grid was based on ems, which were related to the type size. To be honest, if that’s part of the requirements of the brief, and usability testing is deemed to be important, then that should be part of a designer’s job to take it on more. You can get very mired within – you can get yourself in a right mess with it. So when you’re setting layouts, try to set to a relational grid, using ems.

   — What about the tiny details like all-caps and things like that?

   — What about them?

   — The space around the lettering, that’s how people read. In that minutiæ and the devil in the detail, there’s a constriction between the needs of – at the end of the day, every single brief in this country has to be accessible because it’s under the DDA. So how can we match beautiful, agile typography to people with dyslexia who find all caps difficult to read?

   — I think you just have to test it. The only thing you can do is test it and see what comes back and adjust and reiterate. As a designer, you always want to push the details.

2. Q. from woman: Using a serif font for headings and sans for body. When I learned typography and stuff, we were told never to mix them. Is that something you were taught it was OK to do, or is it something that’s fashionable now?

   A. (Both. It adds contrast.) Is a growing trend, like Times and Guardian redesigns. The problem is it’s Georgia and they’re all kind of looking the same. But at the end of the day it worked; it’s legible.

3. Q. from Andy Budd: What’s your impression of the new Microsoft fonts?

   A. They’re good. Silly that they were all given (names with) the letter C. I can’t tell them apart. I tried. I even have a list. They’re really great typefaces and they’ve really broadened what we can use. I’ve recommended everybody put them in your font stacks in your CSS. A couple of weird things going on with Camino and italics. That shouldn’t stop you using the typefaces. Maybe we’ll see Georgia kind of fade away a little.

4. Q. from (gingery) Mark Wallis: I wonder about using the Flash replacement, the Swiffer [sic] or whatever?

   A. I’ve used it a couple of times, but it’s really hard to use.

5. Q. from man: Do you have like a standard line-height and font that you always go for?

   A. Do I? Yeah. 1.5em, 12, 18 pixels. If I’m setting print, 10, 14. Again, it goes back to the optical-grey thing and whitespace. If you get a brief that’s from an upscale brand and it needs whitespace to communicate that, then the type you set will probably have a hell of a lot more line-height. And also it depends on the typeface as well.

6. Q. from man: I want to ask you about capitalization of headlines. Bringhurst advises against it, and I do find myself they look better and more balanced when uncapitalized. And the practice of what to capitalize is not very consistent, even in the pocket schedule guide for this conference.

   A. That can depend on the style guide. The most important thing is to be consistent. I personally don’t have any strong feelings on that one.

(Ends 2007.06.07 15:57.)