A beginner’s guide to kerning like a designer

Have you ever looked at a word or phrase you’re typesetting and something just looked off about it? It might just be a kerning problem. Kerning refers to the amount of space between two letters (or other characters: Numbers, punctuation, etc.) and the process of adjusting that space to avoid awkward-looking gaps between your letters and improve legibility. In this article, we will outline how to kern like a professional designer.

Sometimes a font’s default kerning isn’t ideal for certain letter combinations, so you’ll want to manually adjust it so the spacing between all the letters looks consistent. It’s important to note here that kerning is a visual exercise; it’s about the perceived amount of space between letters rather than the actual distance between them. Kerning involves adjusting your typography to look right rather than creating mathematically equal spacing.

Type is a funny thing in that it can be a sort of optical illusion. If you were to typeset a word with exactly equal spacing between each letter, it wouldn’t actually look evenly spaced. That’s because letters have unique shapes, like puzzle pieces, and need to be fit together in a way that works best for each pair.

Keep reading to find out why kerning is so important in design, along with nine expert tips you can rely on to start kerning like the pros.

Kerning may seem like an unnecessary or unimportant detail, but adding it as a quick extra step at the end of your design workflow can make a big difference in helping typography-focused projects look polished. Kerning will be most important for large, highly visible text like typographic logos or headlines.

To get a better understanding of why kerning is a smart move, imagine each letter bounded by a box. You’ve probably seen pictures of old wooden or metal type like this:

Although most of us don’t use physical blocks of type anymore, the digital fonts we use work in a similar way. Each letter is still surrounded by an invisible box, and sometimes those boxes create too much space between letter pairs, so their boundaries need to overlap to create the appearance of even spacing. In the old days of printing presses, typographers would fix this problem by cutting notches in the wooden blocks to help the letters fit closer together in a more visually pleasing way. Now, the process is far less involved and can be done with just a few clicks.

Kerning isn’t that hard once you understand how it works. And although eyeballing the spacing and using your own judgment to determine what looks best is a big part of kerning, there are several tricks you can use to make the process easier:

The shapes of some letters (particularly ones that have strong slants or extended pieces) can make them hard to kern. Words typeset in all capital letters tend to need extra attention as well. If we go back to the idea of each letter being surrounded by an invisible box, these problematic letters wouldn’t fill their boxes edge to edge—leaving those pesky gaps. Here are some of the troublemakers you should keep an eye on:

• Slanted letters: A, K, V, W, Y

• Letters with arms or cross strokes: F, L, T

• Letter combinations: W or V + A (any order); T or F + a lowercase vowel

If a problem letter falls in the middle of a word, make sure to look at how it interacts with other letters on both sides. For instance, the first A in PANCAKE below looks fine next to the N, but creates a big gap next to the P.

In the previous point, we focused mostly on how pairs of uppercase letters can be problematic, but lowercase letters have their own kerning challenges. That’s because straight-edged letters and rounded letters look different when paired with each other than when paired with their own kind.

Typographer Ilene Strizver recommends these kerning principles⁠(opens in a new tab or window): two straight letters need the most space; a straight and around need slightly less to look equivalent, and two round letters need slightly less than that. It helps to visualize this (check out the example below). Hopefully, you can see how the amount of space between letters (indicated by the colored bars) decreases from left to right. Yet, when viewed on their own, the letters look evenly spaced.

Let’s apply this idea to an actual word. Looking at both sides of each letter, the spacing should be consistent for each of the three types of shape combinations we discussed above.

In the word “headline,” straight-to-straight edges share consistent spacing (marked in blue), as do straight-to-round (in turquoise) and round-to-round (in orange). The kerning result seems to be fairly visually consistent. Although by no means do you have to kern your type this precisely, keeping this concept in mind may help you achieve consistent visual spacing in a word or phrase you’re typesetting, particularly if you’re stumped by a particular letter pairing that isn’t looking right.

The size you set your font at will influence your kerning. In other words, letters often appear to interact differently at various point sizes — if you set a headline at 48 pt., kern it, and then later need to change it to 24 pt., your careful kerning work will likely be undone.

For that reason, it’s a good idea to kern after you’ve settled on the size of your type. Or, if you’re working on something like a logo⁠(opens in a new tab or window) that will appear in print at one size on a business card⁠(opens in a new tab or window) and at another larger size on a t-shirt⁠(opens in a new tab or window), kern those separately. Keep in mind that any kerning mistakes (or neglecting to kern at all) will be most glaring when you’re working with large, highly visible letters.

As a general rule of thumb, you can get away with tighter kerning at larger sizes, but letters can look closer together at smaller sizes, so looser kerning may be required. (More on this in the next tip.)

Text that is tightly spaced can be hard to read, especially at small sizes. Another negative side effect of under-kerning is that letters can be so close that they touch, which sometimes creates a whole other letter (or word!). This witty poster demonstrates that possibility: What happens when the “r” and “n” in “kerning” are spaced too closely? They become an “m” (and create a new term to add to your typographic glossary):

So since readability and legibility should be a top concern for typography in any design, when in doubt, it’s best to kern letters slightly looser to avoid giving viewers eyestrain or any opportunity for misinterpretation.

Sometimes it’s hard to spot where you need to make kerning adjustments because your brain wants to look at what the letters say. One way to shift your focus is to flip your type upside down — this helps you zero in on the shapes of the letters and the spaces they create, rather than getting distracted by the word itself.

In terms of your design process, kerning should come last in your typography and spacing-related tasks. Make sure you’ve finalized your font choices before moving on to kerning since kerning will look different for every typeface. It’s that final step that can give your design some extra polish and professionalism.

But before you do any kerning, you should devote a little attention to other types of spacing first, as appropriate: tracking and leading.

• Tracking: Also known as letterspacing, this type of spacing contributes to the overall visual “looseness” or “tightness” of your text. Rather than adjusting one pair of letters like kerning, tracking applies consistent spacing to all the letters in a selection of text—you might adjust a single word, a sentence, or whole paragraphs or pages at once. If any tracking is necessary for your design, you’ll want to do that before kerning.

• Leading: This is the vertical space between lines of text. You’ve probably used this setting in word processing programs, where it’s a common feature. Although it’s not likely you’ll need to kern multiple lines of text, it’s still good to be aware of the types of spacing you can use to improve your designs.

As a side note, many programs have a couple of different kerning settings to choose from. Aside from manually adjusting kerning (which is always best), you’ll often see “metrics” or “optical” kerning options. Metrics uses the built-in kerning settings that the typeface designer specified in the font file. Optical discards those settings, re-spacing and re-kerning the type according to an algorithm. Learn more about how these options work and when you might use them here⁠(opens in a new tab or window).

As we’ve mentioned a couple of times already, kerning creates the most bang for your buck on big, visible typography like headlines, titles, banners⁠(opens in a new tab or window) or hero images with text, logos, and the like. Large blocks of copy don’t need kerning (especially manual kerning) because:

1) Any kerning problems won’t be visible at typical body copy sizes like 10, 11, or 12 points.

2) Many fonts, especially high-quality ones, come with hundreds or even thousands of “kern pairs” built in. Most of the time, these custom-kerned pairs will take into account a typeface’s unique letter shapes and construction, and eliminate the need for manual kerning, especially when typesetting paragraphs of text.

Besides, going through a page full of text and kerning letters pair by pair would take hours, and you don’t have time for that. Do take the time to kern, just be strategic about which pieces of typography will benefit the most from the extra attention.

Kerning is one of those design concepts that you really need to practice yourself—both to understand how it works and to get good at it. Aside from starting to kern type in your own projects, you can try out your kerning skills (and get feedback) with a web game called Kerntype⁠(opens in a new tab or window):

The game doesn’t have any instructions, so here’s how it works: You’re given a word to kern; the first and last letters are locked in place, and you’re supposed to move the remaining letters to create the appearance of equal spacing.

After you’re done, click “Compare” and then make sure to select the “Both” option so you can see your kerning work (in white) compared to the recommended solution (in blue). You get a score according to how close you came to the recommendation. Exercises like this one can help you get accustomed to the visual process of kerning.

Kerning has generally been considered something that graphic and print designers do for projects where the typography is static. But since the Internet came along, type-savvy web designers and programmers wanted to kern, too. And now there are tools to help them do that. One is Kerning.js⁠(opens in a new tab or window), a script that allows you to manipulate your web typography’s kerning via CSS. Learn more about web-specific kerning and other typographic techniques here⁠(opens in a new tab or window).