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.

8 thoughts on “Getting Your Letter Spacing Right

  1. Thank you – since I was one of the geeks looking for more “nuts and bolts” and since I’m working on 3 projects – your post was great. How about spacing on a curve or otherwise uneven line. I’ve attached one I’ve been working on – this one was a challenge for me.

  2. Joe, love the app suggestions.

    Linda, when you’re dealing with type with a nonlinear baseline, letter spacing gets wacky and requires extra care. It looks like you’ve done a nice job here, though I’m sure every time you look at it, you want to tweak it a different way. Letter spacing can drive you crazy like that.

    I’d loosen up the word “bird” and tighten up the “he” of the and the “nd” of hand.

    Then I would look at it 20 minutes later and do something completely different.

  3. Whatever.
    I read this blog for the talk about baseball, food and your families. I give guided tours through a historic house museum. I do not get to write, or design, or plan anything. I walk and I talk. Sometimes I am even scared to write here in fear of the grammar police and nerd herd that is lurking in the background to attack. When I have any writing or design issue, I just ask Paul what to do anyway. Let’s get back to baseball, food and families please. Then we can trash the No-Good Stinkin’ Yankees, make jokes about Paul’s haircut and Shea’s wardrobe and continue the conversation about how superior Apple products are than the others. Angus, Amy, Phil, Chosen One, Joan … are you with me?

  4. Jeff, try Googling “Interpretation By Walking Around and Talking” and let us know what you come up with.

  5. Most excellent post! Not only was there valuable design info, but it was filled with travel, adventure, examples of screw-ups, and even a pot shot at Comic Sans. I feel full and satisfied.

    Jeff, if you were to start your own blog about you, Paul, and Shea, I’m sure you could get up to three faithful followers.

    Is it wrong that I get hungry for popcorn every time I hear about keening?

Comments are closed.