What is Kerning?

Kerning is the adjustment of space between two unique letters. The best type designers out there test every letter pairing in their typefaces and adjust the kerning metrics to ensure the best overall experience – however, by and large, manual kerning adjustments still need to be made (especially for notably difficult letter pairings, like the uppercase AVA combination for example).

Kerning Improves Your Design Work

Why should you kern? Because you will be a better designer for doing so, that’s why. Clients may not be able to articulate in “design terms” why they like something or not, but many can tell which designers pay attention to detail and which don’t. Great design lies in the smallest of details, and kerning is a small – but very important – detail. Master it, and the quality of your work will improve – and I bet your client base will grow too.

A Few Basic Terms to Know

Before we jump into the tips & resources, here are a few basic terms you should know:

• kerning is the adjustment of space between two unique letters (eg. the letter “T” and “y” in the word “Type”)
• tracking (or letter spacing) is the spacing between all the letters in a given block of text (eg. spacing between all the letters in the entire word “Type”)
• optical kerning: seen in the Creative Suite programs, optical kerning automatically adjusts the spacing between letter pairs based on their shapes
• metric kerning: the default setting in the Creative Suite, metric kerning uses kern pairs that are included with the font you’re using (if they are, in fact, included)

Onto the tips!

Kerning Tips & Tricks

Below, you’ll find some quick principles, tips & tricks to start you on your path to becoming a kerning ninja.

Equal Perceived Space

One of the most important things to know about kerning is that it really is all about equal perceived space between letters. That is to say, it’s not necessarily about busting out the measuring tool and ensuring the exact same space between each letter. In fact, doing so will likely actually lead to a less-than-ideal kerning job. It’s about the perception of equal space to the viewer’s eye.

If you have ever analyzed letters in a well-crafted typeface, you’ll have noticed that type designers employ a few tricks to make things appear equal. Common type design tricks of the trade for low-contrast sans-serif typefaces (think Gotham or Helvetica) include: the letter “o” not being a perfect circle, and/or crossbars (eg the horizontal bar on a “t” or “H”) being slightly less thick than the stems of the same letter. Why do type designers do this? Well, it’s to combat the tricks our eyes play on us. If the crossbar in the lowercase “t” in Gotham was the same width as the vertical stem, it would actually look thicker than its vertical counterpart.

You’re probably asking yourself why I’m making this point. Well, other than the fact I like to ramble and am lacking in the conciseness department, it’s because we need to understand these principles of eye-trickery and apply them to our kerning practices. We need to look for equal perceived space, not exact space, between letter pairs.

As CreativePro mentions in their article about kerning, the space between straight-to-straight letters (lowercase l to lowercase i, sans-serif, for example) should be one distance; the space between rounded-to-straight letters (b to l) should be another, and the space between rounded-to-rounded letters (b to o) should be another. In these examples, the spacing should get progressively less, but very subtly so, in order to achieve equal perceived space.

tl;dr Trust your eyes.

Kern the Word Upside Down

I call it Aussie Kerning. Alright, that’s not true – I actually just made that up right now, but it’s too good to not share. Anyway, a common practice to improve kerning is to take the word you’re working on and turn it upside down.

Why? Essentially, we’re used to the language we’re designing in, and thus tend to see the letters as a word and not as a collection of independent shapes. Turning the word upside down breaks this part of brain (not permanently; don’t worry) and allows us to view the word as a collection of shapes to be kerned majestically. Then we can do our job right.

Kern in Three-Letter Blocks

Our goal with kerning is to take the headline (or otherwise important type) and create consistent spacing, weight, contrast and so forth. It can be tough to do with larger words or phrases – even a bit overwhelming. CreativePro has a great article that promotes the concept of kerning in three letter blocks.

Essentially, this technique involves starting at the left-most character in the first word, isolating the three first characters, and kerning those so they fit nicely together. Then you shift over one character and kern the next collection of three characters, and the next, and move on down the line until you’re complete. Here’s a visual:

This technique is handy way to break down an otherwise potentially overwhelming task into manageable chunks.

Choose a Quality Typeface

Lastly, one way to improve your kerning (and speed up the process) is to choose a typeface who’s designer has paid attention to kerning detail and specific letter pairs already. To make a sweeping generalization (who doesn’t love those!), many free typefaces can have poor kerning/letter pairing, while premium (read: paid) typefaces can be generally stronger in that department.

Also known as: you get what you pay for. Hoefler & Frere-Jone’s Gotham typeface is beautifully constructed – you barely have to kern anything. Conversely, the League of Moveable Type’s Ostrich Sans – while a fun, generally well-constructed typeface – has some pretty terrible built-in kerning when you actually use it. Actually, I don’t think it has any built-in kerning or attention paid to letter pairs. Thus, constructing a beautiful headline with accurate kerning is going to be much quicker & easier with Gotham than with Ostrich Sans.

Note: I’m not trying to rip on Ostrich Sans or its designer. It’s a nice typeface that just needs some manual kerning if you’re to use it.

Kerning Resources

If you grasp and employ the above three kerning tips, you’ll be well on your way to improving your kerning (and thus your overall design). While this has been a relatively quick overview of the subject, there are a bunch of resources out there for those of you who wish to further your knowledge. Below you’ll find articles and resources that are program-specific (think InDesign, Illustrator & Photoshop); web-focused (kerning isn’t just for print design anymore!) and more.

• CreativePro – Kerning Principles: a great, in-depth read on more kerning principles.
• Kerning in Photoshop: learn how to apply the principles & tips you’ve learned – in Photoshop!
• Kerning in Illustrator: same as above, but for Illustrator.
• Kerning in InDesign: same as above, but for InDesign.
• KernType: a kerning game. Actually more a letter spacing/tracking game, but fun nonetheless.
• Letteringjs.com: use this jQuery plugin to kern your headlines on the web.
• Kernjs.com: another jQuery plugin that allows you to kern web type.

Any resources or kerning tips I’ve missed that you can’t live without? Share ‘em in the comments!

QueryPosts

The WordPress Codex is awesome, but QueryPosts looks to aid WordPress developers even more with a different way to reference all the code & functions that WordPress has to offer. Worth a bookmark for sure.

RWD Calculator

Math sucks and I’m bad at it. Responsive web design requires basic math, so hopefully this calculator will help prevent us from going out of business because I can’t do basic division. Seriously though, it looks handy!

Principles of User Interface Design

Freebies and everything are great, but you can’t use them effectively in your designs if you don’t know the underlying principles. Check out this post for a solid starting point.

Discover by Usabilla

As mentioned, freebies are great – and there are a TON out there. Usabilla’s Discover aims to help you organize so you can find & use them more easily. Request an invite!

Panic Button Light Switch

I’m not going to lie – running into a room and smashing this light switch would make my day just that much more enjoyable. Maybe you could even yell something like “THE SYSTEM IS DOWN” too, just to confuse your co-workers even more.

See you next week!

Click to download the free May 2012 Desktop Calendar Wallpaper in 2560X1600px, 1920X1200px, 1920X1080px, 1680X1050px, 1440X900px, 1280X800px, iPad and iPhone versions.

The World’s Longest Invoice

This site is mind-blowing – a running tally of unpaid invoices from creatives & freelancers all over the globe. At the time of this writing, it’s currently over $5M (via @swissmiss).

WordPress Admin Menu Editor

I’m all about using WordPress as a CMS, and making the experience enjoyable for your clients who are using the software. This plugin fits right into that area, helping you organize, hide, rename and delete the menu items in the WordPress admin.

Pantone Toothbrushes

I gotta admit, I was pretty stoked on the Pantone mugs, chairs, and early product that Pantone was releasing. Now they have toothbrushes alongside their ever-expanding product list. I’m not sure how to feel about this. Am I a Pantone hipster? Who am I kidding, I’ll order one.

Creative Suite CS6 Branding

Check out Brand New‘s article on the new Creative Suite branding. Pretty crazy stuff.

Rotating Words with CSS Animations

Here’s another great tutorial from the people over at Codrops – a sort of “word slider”/fader using CSS animations. I dig.

See ya next week!

Creative Market – Free Goods

Who doesn’t like free design resources – especially well-made ones? These are only free for a bit, so check ‘em out!

Category Functions for WordPress

Spice up your categories with these tutorials from Perishable Press. Handy stuff for WordPress developers here.

Photoshop Action to Fix Gradient Banding

Photoshop’s gradients have really bad banding, which everyone complains about (including yours truly). This action fixes that, albeit at the expense of a much larger end file. Still.

Tetra Shed

I love stuff like this. Super interesting, well-designed modular office that you can set up in your garden, according to the website. Unless, you know, you live in Edmonton, wherein you will perish within 15 minutes on a standard January day.

Photoshop CS6 Improvements

All I’m going to say is this: apply layer styles to groups. And this: there’s other cool stuff afoot with Photoshop CS6. (via @kylefox)

See ya next week!