Sunday, July 10, 2016

Typographic Pet Peeve #2: Default (and/or Bad) Letterspacing/Kerning

In the first of this series of "Typographic Pet Peeves," I addressed the issues associated with leaving leading (pron. "ledding") on automatic, particularly when using connected type elements of different sizes. Today's post is concerned with the spacing among and between letters (BTW, those are 2 different things as you'll see below), particularly as related to "bad" typefaces (something I addressed way back in a post titled "Some good examples of bad type."



For the sake of today's discussion, we're going to need to make sure everybody is familiar with two different type terms, and the difference between them: 1) letterspacing and 2)kerning.
Letter-spacing (a.k.a. tracking) refers to the amount of space between a group of letters to affect the overall density and texture in a line or block of text.

Kerning, on the other hand, applies specifically to the spacing adjustment of two particular characters to correct for visually uneven spacing (i.e., a "kerning pair").


For my visual examples today, I'll be using another mockup for a non-existent retro-clone, using the title type ("Simple Fantasy") and attacking a series of issues (and insights) one-by-one. Unfortunately, a lot of the factors we'll be discussing today are not controllable in programs like MS Word (which I should remind everyone is a word processing program, NOT a layout program, regardless of what Microsoft tries to sell you). However, all the main Adobe Products (Illustrator, InDesign and Photoshop) do give you the control necessary (though Photoshop is clunky for this, since it is also NOT a layout program).

Formatting type in Illustrator: https://helpx.adobe.com/illustrator/using/formatting-type.html
Formatting type in InDesign: https://helpx.adobe.com/indesign/using/formatting-text.html



At first glance, there's nothing really glaringly bad about this title type... and that's the pitfall! Like Peeve Post #1, the issues are going to come down to the fact that the computer does a lot of things automatically for you, and takes the responsibility for how good, bad, or average, your type looks. As this post progresses, and you see all the things you CAN control, you'll see how we can take a header with "average" visual presence and "strengthen" it.

So let's review the basics of this title type:

Typeface: Goudy Text MT
Point Size: 64 pt.
Kerning: Metrics (usu. the default)
Tracking: 0 (zero)


Now that we've got the "control group" set up, let's move to our first topic...



KERNING

I have always been a huge proponent of the idea that the FIRST thing you should change in the type dialog box (for headlines OR body copy) is the kerning setting. There are a couple of exceptions:
a) connecting script fonts (if you change the setting to "optical" for these kinds of fonts, the script lines won't "connect" properly; I plan an entire Type Pet Peeve post on this topic alone)

b) types that are intentionally meant to be monospaced, and the use requires them to be such (e.g., when character count per line is important, like in writing screenplays)

In this example (#2), the kerning setting is set to "optical" (it is set to "metric" in #1). You may not see much difference because it's subtle. But it IS there. Look at the spacing around the "l" in "Simple"; you'll see how it's a little narrower in #2 than #1. Optical spacing tends to "even out" the spacing between each of the kerning pairs (every 2-letter set in the headline is a kerning pair... "Si", "im", "mp" et al.)

Now that we've taken a look at that, let's move on to kerning's cousin...



LETTER-SPACING

Again, letter-spacing is the overall amount of space "among" a group of letters. In this example (#3), I've decreased the tracking (letter-spacing) to "-30." I'm a fan of tight letter-spacing. To me, it tends to make the type feel more cohesive (i.e., more "intentional" than "accidental").

One thing that adjusting the letter-spacing tends to magnify though (especially as it is "tightened"), is that the blank spaces in many display/ornate faces is just TOO DAMN BIG!

Which brings us to something I find myself having to do on almost every single title I ever typeset for an RPG publication...



ADJUST THE BLANK SPACES!

It might surprise you to find out that in this example (#4), I've altogether taken out the blank space between "Simple" and "Fantasy." Theoretically, the title is typed as S-i-m-p-l-e-F-a-n-t-a-s-y. I did, however, have to select the "e" (alone) and change the letter-spacing to "0" (from "-30").

Depending on the typeface and program you're using, there are a number of alternate ways to adjust this issue, including:
a) change the point size of the blank space to make it smaller than the rest of the type (e.g., 10 pt. blank space with 80 pt. type)

b) change the horizontal scaling of the blank space to make it narrow (e.g., 10% instead of 100%)

And so we move on to...



INDIVIDUAL ADJUSTMENTS

In example #2 above, I changed the "type" of kerning I was using (optical over metric), but kerning is actually the space relationship between 2 individual letters. As I get close to finalizing a piece of copy like this, I always try to review the spacing and see where it could be evened out even more. Look back to #4 for a moment. Though I liked the overall tracking in that, the word "Simple" felt a little too tight, and I'm not happy with the uneven spacing around the "s" in "Fantasy."

In this example (#5), I opened up the letter-spacing (tracking) on "Simple" from "-30" to "-20", then in the word "Fantasy" I adjusted the kerning between the "a" and "s" (made it tighter) and the "s" and "y" (made it looser).

Overall, I liked where this type specimen ended up compared to where I started (#1). Compare them for a moment before we move on to my final tweak...



GIVE THE TITLE MORE PRESENCE

Now that I've taken out all that spacing that the title didn't need (but the computer gobbled automatically), I have a bit of extra space which allows me to make my type bigger and give it more presence. So I went from 64 pt. to 70 pt. And it does make a difference. My title now has more visual presence and impact... things I couldn't have given it except for the fact that I took it back from the computer that tried to eat it.



So here are #1 and #6, side-by-side for comparison.
I have now put this knowledge and power in your hands.
What are you going to do with it!?


5 comments:

  1. It is SO subtle, but when you put them next to each other, it does make a difference.

    ReplyDelete
  2. Is it weird that I want to vertically center the text in the box?

    ReplyDelete
  3. Hey, very good post, thank you. This helped me understand what to look for when a graphic project I'm working on feels "off" for some reason. It's quite an eye-opener to see how a series of subtle adjustments not only tightens the composition, but affords a noticeably larger amount of room to make the title more prominent.

    ReplyDelete