Getting Your Letter Spacing Right

Earlier this year, I found myself in Malaysia, which is odd, because I don’t remember leaving myself there. (Please click here for an audio file of the rim shot that joke deserves.)

I was on Pangkor Island, standing at the end of a dead-end street that, had it continued, would have dumped travelers right into the Straits of Malacca. Luckily for travelers, the road ended and this giant billboard prevented people from accidentally ending up with soggy shoes.

Before I continue, I should point out that a few weeks ago, Shea wrote a post asking what sort of posts you, our readers, would like us, your bloggers, to write about. One response that cropped up several times was that you would like an occasional post about the nuts and bolts of interpretive design. (Very few of you said, “More baseball!”) So because you asked for it, here’s a post about letter spacing.

A lot of people use the terms kerning and letter spacing interchangeably. These people probably have more active social lives than we do, but they are using these terms incorrectly. Both relate to the space between individual letters, but kerning means to tighten the spacing, while letter spacing means to increase the space. And neither of these should be confused with tracking, which refers to letter spacing throughout a block of type rather than between individual letters. (Remember, you people asked for this.)

Anyway, back to Malaysia: I was drawn to the billboard in the same way local TV journalists are attracted to abandoned warehouse fires. (“It’s so awful, I have to show everyone!”) I just couldn’t ignore the stacked type, the faux Polaroids, and the composition that makes it look like all of the design elements were loaded in a cannon and fired at the billboard from 100 yards away.

This sign was nearly the width of a two-lane street, and they still ran out of room for the word “beach” in the bottom right corner. Perhaps had they not letter spaced those lower-case characters in the sentence “Keep the cleanliness of the beach,” they could have kept that whole sentence on the billboard. (Besides, readers recognize words as shapes, so letter spacing lower-case type is generally frowned upon.)

The first thing I noticed that made me break out the camera was the script type “Ceria di Pangkor,” set in our old default typeface friend Mistral. Script typefaces are meant to be strung together to look like handwriting. When you letter space them, it breaks the connection between the letters and makes it look like you were writing during a bumpy van ride.

As you blow type up (and by that I mean making it larger, not actually exploding it), the imperfections and inconsistencies in letter spacing become more obvious and distracting. Basically, the larger the type, the more important it is to pay attention to the space between individual letters. The word Pulau (island) pictured here drove me crazy. The blue outline actually causes some of the letter combinations (“ul” and “au”) to touch while others (“Pu” and “la”) are left with space between them. At this large scale, that letter spacing issue is obvious and distracting.

Letter spacing is more art than science. Most computer fonts have letter spacing built into individual characters (one of the many things Comic Sans does poorly), but variations in the shapes of letters and the immense number of character combinations make letter spacing nearly impossible to automate.

Typographers have devised lots of tricks and techniques to help them get it right. Some typographers like to look at their type upside down or in a mirror. (There’s a good post about this on the website Type Cast Creative, where the image above came from.) Others like to imagine balloons of equal volume squeezed between each letter. (The image here is from a website called Computer Arts.) One of my grad school professors swore by the practice of simply covering the bottom half of the type with a sheet of paper to see where the issues might lie. These techniques help us see the gaps between the letters as abstract shapes rather than seeing the letters of the words.

Certain types of letters are more likely to cause issues. Tall, skinny characters likes lower-case i and l or the number 1 are likely to have more space on either side that needs to be tightened up (which is why the year 2011 is going to be a bad one for typography). Round characters like o and e should be tightened up so that their middles come close to touching while their tops and bottoms are far apart. Angled characters like the capital letters A and V or the number 7 are likely to start out too far from their neighbors.

Regardless of which technique you use, the first step is to recognize that the computer does not do everything for you. Getting your letter spacing right means understanding that any display type, whether it’s in a brochure or on a billboard, requires attention to detail.

Had enough? Next week, tune in for jokes about baseball and photos of our kids!

Technical note: Every layout program has its own way of handling letter spacing. I work primarily with Adobe products, and I really like the “Optical” setting (as opposed to “Metrics”) in the kerning menu.

Streakers, Browsers, and Students: Sam Ham on Hierarchy

In late April, I presented a one-day Interpretation By Design workshop in Helena, Montana, during a training event sponsored by Montana Fish, Wildlife, and Parks, the Montana Historical Society, and NAI Region 7. Sam Ham, keynote speaker at the upcoming NAI National Workshop and author of Environmental Interpretation: A Practical Guide for People with Big Ideas and Small Budgets, delivered a plenary session the day before I presented, so I had the distinct disadvantage of having to follow his act.

f_sam_hamOn the other hand, the event afforded me the opportunity to have dinner with Sam. We mostly talked baseball and compared notes on how we spent the most recent royalty checks from our respective books (Sam bought a small island; I bought a six-pack of Fat Tire beer).

The conversation briefly veered to the subject of interpretation. Sam offered a unique take on the notion of hierarchy in interpretive design that I feel compelled to share.

We talk in Interpretation By Design about three levels of visual hierarchy, including primary (the attention grabber, the element viewers notice at first glance), secondary (supporting information for those who are intrigued by the primary information), and tertiary (the real nuts and bolts for those interested in pursuing the subject further).

The idea that our primary audience is often a very brief one is well established. In their book, Signs, Trails, and Wayside Exhibits, Michael Gross, Ron Zimmerman, and Jim Buchholz present the 3-30-3 rule to describe the amount of time visitors might spend on a composition at each level of hierarchy (3 seconds, 30 seconds, and 3 minutes, respectively).

Sam, in his unique and energetic fashion, talked about how visitors can be described as “streakers,” “browsers,” or “students.” “There is no ‘average’ visitor,” he said.

In our interpretive media, Sam said, we want to make sure that even the streakers (whom I envision as shifty looking visitors in sunglasses and overcoats) come away with an understanding of our themes as they breeze on by. This can be accomplished through engaging but simple image-word pairings. For example, Sam suggested an exhibit with an image of a grey wolf paired with the word “Endangered.” Obviously, additional information should be included for those who stop to learn more, but even those who don’t will come away with an understanding of the basic premise of the composition.

This forces us away from topic-based titles to titles that convey the essence of our themes. The topic-title “Grey Wolf” with an image of a grey wolf accomplishes very little for a brief audience. When we sit down to write a theme or headline or design an exhibit, it’s useful to think of Sam’s streakers. What will that visitor who barely even slows down to review your communication come away with? It forces us to be creative. (“When I wrote the book,” Sam said, “I never imagined that people would write boring themes.”)

Trying to steer the conversation back to baseball, I suggested pairing an image of the Philadelphia Phillies with the title, “World Champions.” Sam, a Seattle Mariners fan, was not familiar with the term.