What the Heck is Kerning?

The Fundamentals of Good Typography

Posted on: September 7th, 2011 by Shaun Hensher 8 Comments
Kerning grafitti

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.

Bad Typography

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

Good Typography

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

Kerning in Metal Type

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:

Bad Kerning

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?

Good Kerning

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

A diagram demonstrating leadingLeading (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, LaddersWidows, and Orphans

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

A River in Text

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.

Tags: , , , , , , , , , , , , , ,

8 Responses

  1. […] tracking, or leading in the type world, check out Hensher Creative’s guide on typography, What the Heck is Kerning?, to enhance your understanding of the box-defying species known as creatives.  Creativity is a […]

  2. Audrey Ross | coconut grove luxury homes says:

    What kerning is, The adjustment of the space between two characters or glyphs in a font certainly is not new but the term is new to me. I’ve come across new terms and new information on this blog. Rivers, ladders…etc are new terms I discovered here.

  3. John | Start Mission
    Twitter:
    says:

    I was giggling a bit when i saw this post, because I’m still trying to get my head wrapped around, “what’s the big deal with typography?” I tell myself it’s important, but because I don’t specialize in it’s development, still can’t appreciate it at the same level as graphic designers.

    When watching the documentary Helvetica, and later asking my graphic designer friends on the difference between Helvetica and Arial, they made it seem like there’s a war of epic proportions between the original and the clone… In terms of a very objective analysis, is Helvetica really that much more aesthetically pleasing than Arial?

    • Haha, yes I suppose we sometimes get a little passionate about it. No doubt we are tuned into intricacies that the layman would never notice. What it comes down to though is the overall experience. All those little details that we are so obsessed about come together to create a general sense of quality. You don’t have to become an expert in typography to benefit from it though. Even just the basics will improve your communications dramatically.
      Is Helvetica better looking than Arial? Not really. At least not to most people. The letterforms are almost identical, with just a few characters being distinctively different. Arial was designed basically as a knock-off of Helvetica. It’s just a slightly worse version of a reliable but slightly boring and mundane typeface. If you’re going to use one, Helvetica is a better choice (except online, where Arial’s ubiquity makes it the obvious choice).
      Personally, I don’t often use either. I guess I’m just tired of Helvetica. I’d rather use something else.
      Shaun Hensher recently posted..What the Heck is Branding?My Profile

  4. John | Start Mission
    Twitter:
    says:

    Oh, and if you have experience, would love to read more of your thoughts on web-typography in other languages. For example, I generally find the font on chinese websites ugly….i don’t know why…..curious to know what others around hte world are doing with typography

    • I don’t really have experience working with non-Roman alphabets. I know there’s been some work in recent years to improve Arabic typography, but I think pictographic languages are a little bit more troublesome. I think part of the problem too is that the web-safe fonts available are not great and the browsers don’t render them very nicely. The web was invented and developed by English speakers. It seems that speakers of other languages kind of got ignored until pretty late in the web’s development, so perhaps that is where some of the trouble stems from.
      Shaun Hensher recently posted..The Creative ProcessMy Profile

  5. Dan says:

    I can’t say I have ever herd of kerning or many of the above terms but its really interesting to think about. I think the power of aesthetically pleasing typography is greatly underestimated in almost all aspects of daily life. Could give a few of my high street shop some pointers!

Leave a Reply

CommentLuv badge

Please use your real name. You may use keywords with your name if you have had 3 approved comments. Use the following format: Real Name@keywords (maximum of 4)