What You Need to Know so Your Typography Doesn’t Suck

If you are new to designing graphics, or you cannot afford to hire a professional to do them for you, there are some basic design principles you need to know about. I’m choosing today to talk about Tracking and Kerning, two principles that make up a large part of utilizing typography that seem to get overlooked often by inexperienced creatives. Basically, I’m going to teach you what you need to know so your typography doesn’t suck.

A Little Lesson in Tracking and Kerning for Typography

 

What is Tracking?

You’ve seen it dozens of times (or more), I’m sure. Someone uses a script or otherwise fancy font and something about it just doesn’t look quite right. If it’s script, why are none of the letters touching? *Eye twitch*

This is where Tracking comes into play.

Tracking (not to be confused with Kerning, which we’ll get into later), is the the consistent increase or decrease of space between letters. Basically, it’s when you tell your designing program of choice (hopefully Photoshop or Illustrator) that you want all of your letters to have a degree of spacing between them.

Here is an example using a script font (which I think best represents why you need to be mindful of your tracking):

Typography tracking example

 

How to Adjust Your Tracking (With Photoshop & Illustrator)

Of course I’m not about to tell you what you’re doing wrong without explaining how to fix it (that would be not nice!). Here’s a step-by-step look at adjusting your typography tracking:

Step 1

The first thing you need to do is get acquainted with the Character Panel if you aren’t already. This panel has all of the settings that control anything typography related – choice of font, font size, kerning, tracking, etc. If you don’t see this setting in Photoshop or Illustrator, you can bring up the panel by selecting Window >> Character. It should look something like this:
 
Photoshop Character Panel

We’ll be focusing on using the Tracking Adjustment (noted in blue).


step-2

For the purpose of this tutorial, I am once again going to use a scripted font (I’m using Always in my Heart, in case you’re interested). I’ve chosen to type out ‘The Blog Dept’ and for the purpose of the example, I’ve set my tracking to 80.

improper-trackingAs you can see, the letters are not touching in the way we would expect them to with a script font. This is typically an easy fix.


step-3

To fix our tracking, we’ll simply open the Character Panel and change the number from 80, to 0. This is the result you should get:

correct-tracking
Notice the letters are now touching how we’d expect them to. Of course not all fonts were created equal and this fix isn’t always perfect. Sometimes it requires some fine tuning and that’s what Kerning is all about.

 

What is Kerning?

Kerning is often confused with tracking (and truthfully, even some seasoned designers use the terminology incorrectly). Kerning is the adjustment of space between individual characters to achieve a visually pleasing result. Basically, it’s when you have a font that is otherwise proportioned, but the characters need some adjustment in order to make them look better.

Here’s an example of text that could use the help of adjusted Kerning:

kerning-example-1

As you can see, there are strange gaps between letters (especially A, V, & A), while others are much closer. This is what Lora (a free Google font) looks like set to a 0 Tracking and Kerning set to Metrics – the built in Kerning information for this font.

 

How to Adjust Your Kerning (With Photoshop & Illustrator)

The easiest way to fix this problem is to change the Kerning from ‘Metrics’ to ‘Optics’ in the Kerning section of the Character panel. In most cases, this simple change makes a huge difference and may even completely eliminate the problem.

When I change Lora’s Kerning to ‘Optics’, this is the result I get:

kerning-example-2

In case it isn’t super obvious (which is why I created the versions with the blue guidelines), the A, V, & A are now closer together with the serifs further overlapping each other. This is much better, although not perfect. You may want to do further adjustment to make the text more visually appealing.

 

Question

These simple fixes can greatly improve your typography usage (not to mention your designs and credibility). Have you used the Tracking or Kerning settings before this post to edit your typography? Comment below!