Have you ever read something and thought: What the hell does that say?
It happens to me all the time. Usually it’s because the designer picked a terrible font. Other times the designer ignored spacing (and didn’t kern).
Musicians create melody not with notes, but with the silence between the notes. Type is the same way. Designers create beautiful (and legible) typography not with shapes of foreground—the strokes of the letters—but with blank spaces of background.[Tweet “Simply: typography is defined by space.”]
The best designers and typographers know the importance of space.
There are a few main spaces that impact a design:
- Counter space (the space within a letter)
- Letter space (the space that separates letters)
- Word space (the space that separates words)
- Line space (the space that separates lines of text)
All of these contribute to how a design looks. With proper spacing, a design can be beautiful, elegant, and enticing. With improper spacing a design can look 100% terrible.
If the counter spaces are too small, the letters won’t be legible. If the letter spaces are too big, it’ll be hard to tell where words begin and where they end. If word spaces are too big, it will be difficult for the reader’s eye to read entire lines of text without getting lost.
Finally, if the line space is too big, the reader will have to search for the next line down the page, without naturally jumping to it.
As you can imagine, bad things also happen when these spaces shrink too small.
You can adjust these spaces one way or another:
- Change counter spaces by selecting a new typeface or a new weight in the current face
- Adjust letter spacing by kerning the type (what we’re going to discuss here)
- Adjust word space through some tricky settings (the default usually isn’t so bad)
- Tweak line space with leading or line-height settings
Letter spacing is one of the most important aspects of effective typography; it’s the difference between flick and… It’s the difference between click and… Just look at the examples below.
Less harmfully, it’s also the difference between A WE and AWE, L oud and Loud.
Even less harmful—but still completely tragic—is the result of measurably even spacing. See, kerning is the process of adjusting your letters so they LOOK even, not that they ARE even.
Letters and numbers are really funny shapes. They’re not simple like a square or circle. I mean… Except for the ones that are (l, 0, o, etc.)
Some have big gaping holes in their sides. Some have wall-like sides. Some have curvy sides. Some are lop-sided. Honestly, they’re an odd group of things.
This causes all kinds of strange letter spaces. For example, the o’s below have the same amount of space as the l’s, but they look farther apart.
They look farther apart because the letter space between them spills over on top and below their strokes; the l’s don’t suffer the same fate.
In practice, this means that each combination of letters needs specific adjustment to make their letter space look even.[Tweet “Each combination of letters needs specific adjustment to make their letter space look even.”]
Every font has letter spaces built-in. If you’re using MS Word, then it’s what you get. If you’re using an Adobe program, then the built-in letter spaces are referred to as “Metric.”
Without getting too far ahead of ourselves, if you’re using an Adobe program, it has an automatic adjustment called “Optical,” which is usually pretty good.
You might be wondering, though: if a font has letter spaces built-in, why would I need to adjust it?
Well, with so many possible letter combinations, the type designer may not have gotten everything perfect. There are a few main letter pairs that the designer probably adjusted, but overall, things tend to get a bit tricky: AV AW VA AF AP AT FA Fa Fe Fo LV LW Ye Va Wa and so on.
Pretty much any combination where one letter has an open space and the neighboring letter is meant to slide over and fill it.
It’s your job as the designer to notice the letter spaces and kern them to best fit.
How to tell if your spacing is too tight or too loose
Honestly, you mostly have to get a feel for it. I know that sounds like the worst advice possible, but I’m here to help you get that feel.
Rather than thinking of your page as white with black letters on it, think of the combination of all the white and all the black as a grey. (This is really easy if you step away from the page, where you can’t read the text anymore.)
You want a good “medium” grey—not too light and not too dark. The brightness of the page’s grey depends on all the spaces we talked about before, but for now, let’s look at this on the level of a word:
You want the letter spaces to be large enough so the letters don’t look crushed, and small enough so they don’t look they’re going to fall out of the word.
In the example below: the top is too tight; the middle is too loose; and the bottom is just right.
Here are two pro ways to test your letter spaces for bad kerning:
Narrow your focus
The first step in properly kerning your text is figuring out what combinations need help. Look at your text in groups of three characters. At first, you may need to hold your hands up to block the rest of the text, but after some practice you’ll be able to just ignore all but three characters.
When you do this, you’re looking to see if the middle character looks centered. You don’t need to break out a ruler or anything; it’s about optics (how it looks).
If the character looks like it’s too far to the left, then it needs to optically move right. Either add space to the left, or remove some space from the right. (Or both.) You won’t know until you look at the next combination of letters.
You want the spaces among all the characters to look the same. So scan through the text in groups of three.
Make sure to keep an eye out for the letter and number combos listed above.
Flip it over
Sometimes the letter spaces aren’t easy to dissect if you can read the word. One great way to avoid this pitfall is to flip the text upside down.
By adding this hurdle, unsightly gaps and tight spaces become far more obvious, even at first glance. Make notes of these gaps and tight spaces, then flip it back over to make your adjustments.
Once you know where space can come out and where you need to add some in—to center all the characters between its neighbors—just go in and make your adjustment. (You can find Kerning under the Character Panel in Adobe programs.)
How to practice your mad kerning skills
There’s a relatively fun game online centered around kerning type. Created by Mark MacKay, the game is called… wait for it… KERNTYPE.
Basically, you kern different words using keyboard, mouse, or touch and then get a percentage score. I disagree with some of the official answers, but that’s alright.
Well, now you know how to avoid accidentally including profanities in your designs. (You also know how to better create a pleasant reading experience.)
Kerning is one of the most important activities of a typographer. Again, typography is all about space, and if you can master the letter spaces in your designs, you’ll be better than 95% of designers.
I am not a designer but I work with a lot of them and I love to know new things, things that sometimes they do not even know. Your website is really really helpful for me. Keep doing it!
That’s great to hear Luisa. Maybe you can teach those designers a thing or two 😉
Well written, very clear for the layperson to understand the magical ‘white space’! Most designers take kerning for granted and expect our clients to just see this.
I design logos and spend ages kerning the type and shapes to make them fit visually.
(I’ve had past clients who’ve show me a free font they’ve downloaded and installed, then started using it for all their marketing designs. I have to explain to them how the letter spacing doesn’t look right as not much time has gone into the kerning. Not all free fonts are like this, and work great for headlines or logos)