What the Heck is Kerning?

Image courtesy of Justin Henry / flickr

So, what is text kerning all about anyway? Well, before we answer that question, let’s talk about why typography even matters.

A thorough understanding of typography—the art and process of setting and arranging letter forms—is one of the primary things that sets the professional graphic designer apart from the less skilled practitioners of the graphic arts. To many, the fine details of quality typography may seem like minutia—unimportant details that nobody will ever notice. This could not be further from the truth. A careful consideration of typography, whether on a book cover, a storefront sign, a poster, or in the body text of a book, can make or break your image. Poor typography can lead to being seen as cheap, unprofessional, of  low-quality and disorganized. On the other hand, good typography can give you the appearance of being professional, elegant, organized, and of high quality. It may be finicky and a bit time consuming, but it’s a bit like sculpting. Anyone could rough out a basic statue of a man, but it took the careful hand and patient mind of Michelangelo to make David.

Since pictures speak louder than words, let’s look at an example. On top, we have an example of poor typography. On the bottom, an example of good typography.

No, this is not a restaurant that serves Spam. It's supposed to say Spain. (Courtesy of Quinn Dombrowski / flickr)

This is something I quickly whipped up. It's not perfect, but it's no Spam.

I won’t even bother trying to explain why one is better than the other. Surely, even to the most undiscriminating eye, the difference is self-evident.

So how do we ensure our work is more like the latter than the former? Typography is pretty big topic that has been the subject of many ponderous books, but there are some basic rules that, if followed, can immediately elevate you above the majority of people claiming to practice graphic design. Besides choosing a better typeface than Brush Script (and in All Caps no less!), we can start by answering our original question, “What is kerning?“.

Kerning

A piece of metal type that has been notched or "kerned" to fit more closely to the preceding character.

Kerning is the adjustment of the space between two characters or glyphs in a font. This is not the same as tracking, which is the adjustment of the overall spacing of a word.

The word kern is a cognate of corner. In the days when type was set using wood blocks or metal dies, to improve the spacing of letters, corners were notched out of pairs of letter forms to allow them to be moved closer together. The term kern was adopted for this process and has lived on into the digital age.

Without kerning, the odd shapes of various characters cause uneven spacing. This is particularly the case with letters that have a high degree of vertical asymmetry, such as the uppercase A, T, V, P, W, or Y and the lowercase v, w, or y. The fundamental goal of kerning is to give the text a uniform texture and spacing. This aids readability and looks much nicer. Many programs, such as Adobe Photoshop offer auto-kerning features such as optical kerning and metric kerning. While these are a big improvement over no kerning at all and can save you a lot of time when setting large amounts of text, they are not nearly good enough to replace the human eye when it comes to large type such as that of headlines, titles, or logotypes.

How kerning is adjusted depends on the program, but in Adobe’s software, you can place the cursor between the letters and hold down Option (Mac) or Alt (Windows) and press the left or right arrow key to adjust the spacing. When kerning a word, you are trying to make the spacing between the letters look even.  This is a bit tricky, because what is even may not look even. You really have to feel it out.

Let’s take a look at an example:

Notice that the space between the letters appears uneven. Some pairs are worse than others. Look at the AV pair in RAVING. You could drive a bus through there! Let’s kern that shall we?

Notice how the kerned version is easier to read and looks cleaner and more professional.  Achieving these results is merely a matter of a little practice.

As a book designer and poster designer, kerning is one of the most important tools in my typography tool kit. It is however only one of many such tools. Let’s have a look at some of the others.

Tracking

I’ve already mentioned tracking, the overall spacing of a word. You can adjust tracking in or out to improve readability. Large type usually needs the tracking tightened because the spacing appears to expand as type gets larger. Small type, such as that of a caption, needs to have looser tracking, as the letters tend to feel cramped at small sizes. Likewise, text meant to be read on a screen, unless very large, can also benefit from looser tracking, partly because of the fact that most typefaces were not designed for the screen and because of the fact that the smallest possible space is 1 pixel, making some of the letters blend into each other. In HTML/CSS, this is adjusted with the letter-spacing attribute.

Leading, Line Length, and Justification

Leading (pronounced “ledding”) refers to the spacing between lines of type, or more accurately, the amount of space between the baselines of lines of type. Like most terms in typography, the origins of the word can be traced back to the movable type era. Typesetters would literally add strips of lead between lines to increase the line spacing. Leading affects text density and readability.

The default leading in most layout programs is 120%. In other words for 10 pt type, the default leading would be 12 pt. This is often written as 10/12 or “ten on twelve”. Longer lines of type may need more leading, as the eye has more trouble hitting the right line when it scans back across the page. Smaller type can also benefit in this way. Headlines with more than one line may actually need negative leading so they don’t appear too spaced out. In HTML/CSS, line spacing is controlled by the line-height attribute.

Line Length is pretty self-explanatory. It refers to the width of a block of text. Line length can be adjusted to improve readability or to fit copy. Line length can also be tweaked to avoid rivers, orphans and widows, which I’ll explain in a bit. For readability, it is generally accepted that a good line length is anywhere from 45 to 75 characters, including spaces. The ideal is often considered to be two and a half alphabets, or 65 characters. There is some debate around this, especially when it comes to text on screen. Some research has shown that line lengths of over 80 characters may actually aid readability on screen. The text you are reading now is closer to 100 characters wide. Despite this disagreement, a good rule of thumb is to avoid anything shorter than 35 characters or longer than 115.

Justification is the alignment of text within a block of text. Full-justified text is aligned to both the left and right margins of the text column. Because full-justified text adjusts the spacing between words and letters, it must be used carefully, as it can lead to problems with readability, especially when used in a narrow measure (a column with a short line length). You should not necessarily avoid using it, just be extra vigilant for typographical anomalies when you do. To ensure smooth texture and optimal readability, you can set text as flush left, ragged right, also known as left-justified. It’s a trade-off though, because full justification is more space efficient and creates nice straight margins and gutters (the space between columns of text).

Rivers, Ladders, Widows, and Orphans

These aren’t tools, but I should explain what they are and how to avoid them.

This is what a river might look like.

Rivers are basically lines of white space that wind through a block of text, caused by the inadvertent alignment of word spaces. They are distracting and interfere with the texture of the text.

Ladders are groups of 3 or more hyphens on consecutive lines. This should be avoided for the same reasons as rivers.

Widows happen when the last line of a paragraph appears at the top of the following column or page, cutting the line off from the rest of the paragraph. Orphans refer to two different things: an opening line of a paragraph that appears at the bottom of a column or page, and a single word or very short line that appears on it’s own line at the end of a paragraph. Orphans create too much white space between paragraphs, making it look like the spacing is off.

All of these anomalies can be corrected by adjusting line length, tracking, or hyphenation and by utilizing soft returns (Shift+Enter) and non-breaking spaces.

And so…

I could go on and on about the subject of typography (just ask my wife), but I think this is a good place to end. There are a great many more considerations, and no doubt you’ll hear from me on this subject again, but armed with these basics, you will be far better off than most.

If you want to go further down the rabbit hole, I recommend The Elements of Typographic Style by Robert Bringhurst. It is pretty much the bible of typography.