Don’t Forget To Kern Your Headers and Logos

Wednesday, February 20th, 2008

Categories: Web Design

This is something you’re taught as a print designer. You’re taught to kern all large text. I’ve peaked around and I’ve come across pages produced by web designers and developers that overlook this very small detail. That being said, I think it’s important and does make you look professional.

What Exactly Is Kerning?

Simply put, Kerning is the distance between two specific characters. The ability to modify kerning on a per-character basis is done in a graphics or vector program such as Photoshop. Kerning options are not available in CSS. See below for a diagram.

What Exactly Is Tracking?

Tracking (also know as letter-spacing) is the overall distance between all letters. Since this isn’t as letter-specific as Kerning, CSS does have a supported attribute called letter-spacing that can be applied to CSS elements.

Here’s an example with a chunk of text that was kerned, and a chunk of text whose tracking was adjusted.

Kerning Tracking

Why Kern/Track?

Kerning and tracking are simply more appealing to the eye. It’s one of those things that if you show a kerned and unkerned version of text to a non-designer, they would typically choose the kerned version. When asked why, they wouldn’t be able to put together a concrete reason. As I mentioned above, it appears more professional to art directors and clients alike.

Here’s an example. I currently adjust the tracking on the headers on my blog. Allow me to compare two headers, one uses my existing formatting, the other scraps any letter-spacing modifications I’ve made.

Nunc Congue Felis At Augue

How To Adjust Kerning

It’s easy! In Photoshop, simply click between the two letters you’d like to kern. Hold ALT and tap the right and left arrow keys. Adjust to your liking.

How To Adjust Tracking

CSS
All it takes is one attribute: letter-spacing. You’ll want to set this to a negative value as fonts will default to a letter-spacing of 0. -1px is a great value. Example:
letter-spacing:-1px;

Photoshop
Select your chunk of text, and in the Character window you can adjust the tracking value as seen in the highlighted location of the image:
How To Adjust Tracking Photoshop