8 Simple and Useful Tips for Kerning Type

by on 31st August 2011 with 19 Comments

screenshot

Kerning is fun! All right, unless you’re a serious type nerd like me, that’s definitely not going to be a true statement. However, it is an absolutely essential part of your typographical education and implementation.

If you’ve been ignoring kerning or simply aren’t sure how to do it properly, take a look at these eight quick tips and get started on the road to becoming a kerning master.

Introduction

The past few years have seen an explosion of type on the web. It used to be the case that web designers were faulted for not having a strong sense of typography, but nothing could be further from the truth these days as web designers lead the art of typography to new heights of popularity and respect.

Designers have a newfound appreciation for both typographic art and the practical ways in which typography complements and even drives a strong design.

There’s still at least one major topic that web designers tend to miss out on though: kerning. The truth is, kerning on the web is still a nightmare. There are a few options for making the task easier but on the whole, we just sort of ignore it.

As a result, many web designers neither think about kerning nor do they really even understand how it works on a fundamental level. Fortunately, it’s not rocket science. The largest factor involved in learning to kern type is to make yourself aware that it often needs to be done. Below we’ll go over some basic and useful tricks to get you started.

#1 What Is Kerning? Think About Blocks

The first thing you should know about kerning is, well, what exactly it is. There are a lot of funny sounding typographical terms and it’s easy to get confused quickly so it’s necessary to make sure we’re all on the same page.

Once upon a time, there were no computers. Type was set, get this, by hand. It’s a crazy concept but believe it or not, the process of bringing a design to life used to be a pretty laborious task, unlike the cushy desk jobs that we now all enjoy.

Back then individuals letters were set onto physical blocks made of wood or metal. Obviously, the nature of the blocks meant that you could only squish two letters together so far, to the point where their edges hit. As a solution to the problem, typographers created sets of notched blocks that fit together like puzzle pieces, thus allowing the letters to move closer to one another when needed.

screenshot

Photo credit: Joel Gillman

The reason that I tell you this is that it gives you something real to picture when you think about kerning. This helps you remember what it is and distinguish it from other typographical terms. Now when you hear the word “kerning,” you’ll picture woodblocks with notches in them and remember how it works.

Obviously, these days the art of manual typesetting is a novelty. Instead, this is all handled in the digital realm, right on your computer screen. However, the core concept here is identical. Kerning still refers to the adjustment of space between two letters.

screenshot

The goal is simple: to equalize the appearance of the whitespace between letters. This gets tricky because you really have to feel it out. Sometimes uniform spacing between letters won’t look like uniform spacing and you have to tweak and tweak until the word looks like you think it should. There’s really no magic formula, you just have to eyeball it and decide what looks right.

#2 Kerning ≠ Tracking

One thing that trips up most new designers is the difference between kerning and tracking. Don’t make the mistake of mixing these two terms up, old school print designers love to point and laugh at people who do that.

The difference between the two is simple: tracking refers to the uniform spacing between all the letters in a given selection of text and kerning refers to the spacing between two specific letters.

screenshot

Leading

Now, to add even more confusion to this equation, we can throw leading into the mix. Leading (“led-ing”) is the vertical space between lines of type. In CSS we use a similar adjustment called “line-height”.

screenshot

In The Type Palette

While we’re on the topic of adjusting all of these values, here’s a quick reference so you know how to spot them in Photoshop, Illustrator or InDesign.

screenshot

Note that the “Option” key (Alt) is your best friend when adjusting any of these, in conjunction with the arrow keys of course. Which one it adjusts depends on your selection and cursor. Place the cursor between two letters and Option+Left/Right adjusts kerning, or with a larger text selection the same commands adjust tracking. Similarly, Option+Up/Down with a text selection will adjust leading.

#3 Letters to Watch

Once you start making it a regular practice to kern your headlines and other important type, you’ll notice that certain letters are more problematic than others.

To get a feel for how this works, let’s open up Photoshop, set our kerning to “0” and type a few words with Times. These results haven’t been tweaked by me at all, they’re genuinely this horrid right out of the software.

screenshot

All caps type definitely tends to be quite problematic so as a rule of thumb keep a close eye on it. However, we find similar problems when we start mixing uppercase and lowercase letters.

screenshot

Looking at this, we see a pattern start to emerge. In general, the less a letter conforms to a block shape, the more problematic it becomes. Letters with strong slants like the uppercase “A” and “W” are bound to case some issues, whether they’re mixed with uppercase or lowercase letters. Also, notice how the overhanging bar on the “T” and the arm on the “Y” cause problems when used as initial caps. Here, the lowercase letters that follow are being spaced relative to their block outline, but we need to notch the blocks just like the old typographers:

screenshot

You can find big lists of specific letters to watch, but as a rule of thumb, I generally keep a close eye on letters with diagonal lines like “A” and instances of initial caps (especially when a “T” is involved), no matter what the pairings. Also, though lowercase letters tend to play fairly nicely together, you’re not off the hook with them. Notice the how the “ly” in the example above differs greatly from the “ry” spacing.

#4 Kern Upside Down

The reason kerning is so easy to miss is because your eyes tend to ignore the spacing in pursuit of reading the word or sentence. After decades of reading, adults don’t see letters anymore, we see words.

To help account for this, some designers suggest the simple trick of flipping your type upside down before kerning. It’s a brilliantly simple technique that really helps you focus on the letter shapes and how they fit together instead of getting distracted by the words.

screenshot

#5 Don’t Kern Before You Decide on a Font

Obviously, letter spacing is going to differ drastically on a font to font basis. On a practical level this means your process should be to choose a font first, then kern.

screenshot

Easy right? We tend to forget this step though when we change our mind on a font at the last minute. At this point, you can’t bank on the kerning that you’ve already done but instead have to pretty much start from square one and treat each font as unique.

#6 Watch Word Spacing

We’ve discussed tracking, leading and kerning but there’s one more area of typography spacing that you really have to watch out for: the spacing between two words. This essentially boils down to the size of a “space” in a font.

One thing that has really been bugging me lately about free fonts is how many of them tend to have really awkward amounts of space between words.

screenshot

In general, kerning in free fonts can be a pretty bad, but the word spacing tends to be a specific problematic point that you want to keep an eye on. A font with really poor word spacing becomes super high maintenance when you start actually working with it so it’s best to use them sparingly or avoid them altogether.

#7 Don’t Trust the Software

As I outlined in a recent article on general typography tips, Photoshop and Illustrator have a few built in auto-kerning modes. These are great to use, but use them in conjunction with manual kerning, they’re simply not smart enough to handle the task on their own.

screenshot

#8 Use Kern.js to Kern Online

All of these tips are great if you’re designing for print or turning your headline into an image, but what about live web type? As I mentioned above, kerning on the web is a pain and many designers suggest just living with poor kerning where web type is concerned. However, recently some great JavaScript tools have been created to make the job a little easier. One of the best I’ve seen thus far is Kern.js, an extension of the excellent Lettering.js.

screenshot

Conclusion

To sum up, kerning isn’t the hardest thing you’ll ever do in design, but it can get a little tedious and tends to be something that you flat out forget to do.

Make it a point to keep kerning in mind and to always analyze your letter spacing. Sixty seconds of kerning on every headline you create will improve your typographical competence by leaps and bounds.

Title photo credit: katietower.

Comments & Discussion

19 Comments

  • Brant day

    Great article! I agree with what you’ve said about kerning. I don’t think it’s just web type suffering from this either but most digitally displayed type and some print! Great call out to an important typographic skill

  • http://www.naveedahmed.in/ Naveed

    Nice article. Must read for all designers and type beginners.

  • Hanna Stone

    Hi and thanks for the great article! Learned a lot from it. Just one quick question, what font did you use for the biggest “YEP” in this example (the hand drawn one)? http://designshack.co.uk/wp-content/uploads/kerntips-11.jpg

    Thanks again ;)
    hanna

  • http://www.jgd,com.au ian

    … well DERRRRRRR!

  • http://www.gatgblog.com Laurel G

    Great tip on flipping the text upside down. Never would have thought of that.

  • Christopher

    Thank you for the fantastic web kerning tip. It will help keep the inner kerning monkey happy. I am also glad to see that this is still a relavant topic. I am forever thankful for the first design director that took me by the scruff of the neck and taught me the importance of kerning all those years ago.

  • http://danmeehndesign.com Dan M

    A very good article, typography can make or break a design project. This information is extremely valuable to a student designer or marketing professional.

  • Ana

    Very helpful, well written and above all – easy to remember. Thank you.

  • http://www.webdesigncreare.co.uk Kim Ruddock

    Great article exposing the ins and outs of kerning. I hadn’t really understood the importance of correctly spaced lettering until I saw some of the examples in the post. I can’t imagine kerning large blocks of text would be fun but for large headlines and banners it is clearly very important. I could tell when using some free fonts that certain words made the typography look so amateurish and now I know why!

  • Steve Manley

    This “old” typographer appreciates you doing such a clear and uncluttered job of explaining what was once second nature — instinctive — to designers who worked with words. If I may, couple of minor suggestions regarding your examples: Illustrating not only the problem, but also the solution might be beneficial in some instances (a before and after); and in example #4, rotating the entire three-words as a unit to be upside down will be a more realistic demonstration of the tip than rotating the characters individually. Again, thank you.

  • http://ag1lab.com Roberto

    I’m guilty of downloading a freebie now and then. I did noticed before how badly some of them are. It’s a shame really, because, I do love fonts! I usually kern my headlines instinctively -those spaces between letters and words are hard to miss. Tip #4 is my fave. I completely forgot about it from my days at school… Thanks a lot for the great article.

  • http://www.mgtdesign.co.uk Michael Thomas

    Thank you for putting this together, it is a good refresh from those university days. I often use guides when creating bespoke typography.

  • Joshua Johnson

    @Steve Manley
    The rotation of the entire block was the suggestion, I merely rotated the letters to make the statement more readable while upside down… and to see if anyone would notice! Well done.

  • http://synthetictone-media.com Synthetic Tone

    Nice article. I am not entirely a type geek but, as a designer, poorly rendered type bugs me… especially headlines. I can spot that badly kerned number 1 on almost every price point in advertising. It sticks out like a sore thumb if not tweaked. I look forward to trying to the kern.js to help tidy up my website headlines.

  • http://www.junyuetrade.com NikeJordans

    I got more useful information on this blog.. Thanks to sharing the useful information.

  • http://permainanberpakaian.blogspot.com/ game berpakaian

    Awesome articles disclosing the way it functions of kerning. I had not really recognized the value of properly going writing until I saw some of the styles in the submit. I cannot think about kerning huge prevents of conditions would be fun but for huge statements and ads it is clearly very important.

  • ali

    is there any way to check if the kerning (for ex of a logo) is perfect or not. thanks.

  • https://groups.drupal.org/user/2776868 how to Write a Cover letter

    Can I simply say what a comfort to find somebody who
    really knows what they’re talking about on the net.

    You definitely realize how to bring an issue to light and make
    it important. A lot more people have to check this
    out and understand this side of the story. I was surprised you’re
    not more popular because you certainly possess the gift.

  • https://www.youtube.com/watch?v=qGIYlyzDGuY garage door opener genie

    There’s certainly a great deal to learn about this issue.
    I really like all the points you have made.

    Take a look at my site; garage door opener genie

Subscribe
Membership
About the Author