
“K” is for: Kerning

- Let me let you in on a little trick of professional graphic designers. This little last-minute tweak can make a huge difference—and it’s a key factor separating the amateurs from the experts.
The terms branding and marketing are sometimes used interchangeably. This is understandable — they…
Just like a person, your company’s brand has a unique personality, and how people…
The terms branding and marketing are sometimes used interchangeably. This is understandable — they…
So, you've got a brand new logo! High five! Now, you start to notice that some other logos have ™ or ®, and you…
On occasion, after designing a logo, I have people ask if they need to trademark it, and if I can do it for them.…
So, you've got a brand new logo! High five! Now, you start to notice that some other logos have ™ or ®, and you…
In 10+ years of developing websites, I’ve come across a lot of assumptions. And you…
These days, it seems everybody “does web design”. How do you know the best option…
These days, it seems everybody “does web design”. How do you know the best option…
Can something as basic as design affect customers’ perception of your product? Yep, it can and it does. How, you ask? Take a peek behind…
Business cards are, without a doubt, the most common marketing piece there is. But that doesn't mean it has to look common! Read on for…
Can something as basic as design affect customers’ perception of your product? Yep, it can and it does. How, you ask? Take a peek behind…
It’s called kerning.
Kerning is big. Kerning is huge. Kerning makes the difference between success and failure.
So, what is it? Glad you asked!
Kerning is what designers do to adjust the space between individual letters or characters.
That’s the big secret? Yes. That’s it.
To understand kerning, consider the effects of negative space, or the empty, passive gaps between design elements. Kerning corrects awkward spaces that can appear when differently shaped letters are placed next to each other. The goal is to have all a word’s letters appear as though they are evenly spaced, which improves the flow and legibility of that word.
The key word here is “appear,” because it’s really about the illusion of space. Effective kerning takes a bit of practice. Even if letters are the same distance apart mathematically, the interaction between the letter shapes may make them appear farther away or closer together than they actually are.
Good design should be invisible, allowing the intended message to shine through unhindered. Poor design creates distraction, or worse, confusion, when it gets in the way of the message. As with many things, the devil is in the details. Here’s an example.
Let’s say you’re a massage professional. You just moved into a fancy new office and commissioned a sign to hang outside your door. And your designer sent you this:
Whoops. That’ll probably cost you a few customers.
Whether or not we realize it, our brains interpret a too-large gap between letters as the signal that one word is ending and the next is beginning. Just try and not get tripped up by the poor design choice in the kerning on this sign. It’s the difference between people being drawn in for your wonderful services and running away screaming, or laughing at your incompetence. And it’s all thanks to that unfortunate gap between the E and R.
Not all kerning faux pas are as obvious, but the eye still picks up on many of these things subconsciously. Non-designers, when shown a word with kerning applied versus one without, will say the former is more pleasant, readable, or professional-looking, even if they can’t articulate exactly why.
Kerning isn’t something you do to every single word of every project. It would be insanely time-consuming to kern the spaces between every letter of a 300-page book, for example. Spacing is less noticeable in small type, so designers typically don’t kern body copy. Spacing issues are most obvious in larger typefaces, like headlines or display text, so designers put forth extra effort there to make sure the design has the intended effect.
Kerning in logos is also important; they should feel fluid and cohesive. Unsightly gaps are a sure-fire way to look sloppy and unprofessional.
While we’re on the topic of spacing, this would be a good time to touch on a couple of other terms that may get confused with kerning. Tracking is similar to kerning, but instead of focusing only on the spaces between letters, tracking applies indiscriminantly to entire blocks or lines of text. Tracking is generally used for body copy.
Traditionally, kerning and tracking are tools of print design. However, it is possible to adjust character spacing on websites as well. Online, tracking corresponds to the letter-spacing property in CSS. If you apply a letter-spacing value of -2px to your web page text, it tightens all of the text by two pixels. Unless you use JavaScript to allow you this kind of precision, kerning online is usually impractical.
Now that you’re a kerning expert, want to test your kerning chops? There’s probably an app for that, but there’s definitely a game for that!
Kern Type allows you to adjust kerning of words and test your best against a professional typographer’s solution.
See how high of a score you can get…good luck!
I can’t say that about many things in life. Those who know me personally see me as a laid back, calm, pretty level-headed person. Very few acquaintances have ever seen me giddy about anything.
Possibly the most expensive typo in history was made by NASA in 1962. The omission of a single hyphen in a mathematical calculation resulted in the destruction of Mariner 1 mere minutes after launch and cost $80 million. While your typos may not cause rockets to explode midair, they could keep your profits from skyrocketing.
“I just need something simple.” I can’t tell you how often I hear these words when people approach me about a project. Some of these people are using “simple” as code for “inexpensive”. However, other people are using “simple” to describe the desired function and experience. Huge difference; and here’s why that matters.