Last week, we took a look at tracking, which is the amount of space between letters, and how it is an important part of designing with type. Today, we’re looking at a close mate of tracking called Kerning. While tracking is the overall letter spacing, kerning is selective letter spacing between pairs of letters.
Certain letters, when placed beside each other create an awkward space. We use kerning to increase or reduce that space to make text more readable and more visually appealing. Here’s a few examples of letters which don’t always sit well together.
There are large gaps left between these letters. By kerning the letters in pairs, we can reduce just the space between those letters.
Kerning in Photoshop and Illustrator
Both Photoshop and Illustrator allow you to kern using Metrics (also known as Auto Kerning) or Optical Kerning. To apply Kerning;
1. Open the Character palette in Photoshop or Illustrator.
2. Select the Type tool and click in between the letters you want to Kern.
3. Choose either Metrics, Optical or a numerical value in the Kerning field on the drop down menu. You can type in your own values in this field if you want to.
Auto Kerning in the Illustrator Character palette
Optical Kerning adjusts the spacing between adjacent characters based on their shapes.
Metrics Kerning uses kern pairs. Kerning information for many commonly kerned character pairs, such as LA, P., To, Tr, Ta, Tu, Te, Ty, Wa, WA, We, Wo, Ya, and Yo, is built in to quality fonts. Some high quality fonts may define up to 1000 different kerning pairs, and automatic kerning occurs without having to intervene.
Kerning is most frequently required when text is set in all caps. Take a look at the example below. The text on the top is default text with no kerning. Optical Kerning has been applied on the text underneath, between the letters W and A, and between A and T. The text on the bottom clearly looks better.
Most of the time, you’re trying to even out the appearance of the space between letters, however there are times when extreme kerning or deliberately over-kerning creates special effects with tightly spaced or overlapping characters. Typographic logos depend heavily on good tracking and kerning. Here’s some example of logos using extreme kerning:
Have you seen any others?
Getting Started with CSS
Getting Started with HTML Media
Bootstrap: A SitePoint Anthology #1
Jump Start Sass
The Guide To Mockups
- 1 Form UX: Sometimes Even Apple, Google and Amazon Make Mistakes
- 2 ‘Reskinnable’ SVG Symbols: How to Make Them (..and Why)
- 3 Type Nugget: Good Typography is About Finding the Right Playground
- 4 Unconventional UX Wisdom for Stressed Out Entrepreneurs
- 5 5 Bankable UX Lessons from Brick and Mortar Store Design