Tuesday, 22 May 2018

A Comprehensive Guide to Kerning in Typography

I’m willing to bet you already know what kerning is -- you just don’t realize it.

While you might not recognize when kerning is done well, you certainly see it when it’s done poorly.

Here’s an example of bad kerning: M a rk e t i ng .

Kerning is adjusting the space between letters, and either increasing or decreasing the distance to ensure better readability or appearance.

Interestingly, it’s not always best to have equal spacing between each letter. Each letter has different shapes and curves, so sometimes kerning actually helps the letters look less conspicuous. For instance, a “cl” can sometimes appear to be a “d”, so you might use kerning to space them further apart.

No matter what your job title, it’s important to understand the power of kerning. Kerning can help you create better designs, produce more visually appealing copy, or construct better presentations. Kerning is one of those actions that can push your deliverables from ordinary to exceptional.

If you don’t know how kerning works, don’t worry. Here, we’ll show you how to use kerning in Photoshop, Word, and Illustrator. Plus, we’ll provide examples of bad kerning, so you know what to avoid when using kerning for your own text.

Kerning in Photoshop

Kerning in Photoshop is incredibly easy, once you figure out where the “Kerning” tool is. If you’re designing a presentation or email template in Photoshop, and your words look a little sloppy, this is an easy way to clean up your text to improve the appearance.

1. First, ensure your cursor is in between two letters. Next, select the “Character” panel, as highlighted by the red arrow below (If you can’t find it, try searching “Character” within the Photoshop search tool).

3. Within the “Character” panel, you’ll see a V/A (with a little arrow below the A). That’s the “Kerning” tool. It’s automatically set to “Optical”. Click the down arrow to see your options for kerning.

4. For instance, I chose the number “75”. If you’re unsure how much space you want between your letters, test out a few different options. The negative numbers make your letters closer together, and the positive numbers create more space between the letters.

5. Now, there’s a nice “75” point space between my “K” and “E” (of course, this is probably an example of bad kerning … ).

Important note: There’s a quicker option to use the “Kerning” tool in Photoshop. If you click in between two letters, you can hit “Option” and then hit the “Right” arrow. This will create more distance between letters.

Kerning in Word

If your writing copy in Microsoft Word, or using Word to design a poster, you might want to use kerning, especially if your font is bigger and the letters look awkward.

Fortunately, it’s easy to do.

  1. Within a Word document, go to “Format” and then click “Font”. FYI, I left my cursor in between the “K” and the “e” in the document, because that’s the space to which I wanted to apply kerning.

2. Next, click “Advanced” within the Font panel.

3. Under the “Advanced” section, you’ll see “Kerning for fonts” with an empty box to the left of it. Check that box. Then, input a number (I put “20”, which you’ll see circled). The number you choose will depend on how much space you want between the letters.

4. There’s now “20” points of kerning in between the “K” and the “e”.

Kerning in Illustrator

Finally, let’s take a look at kerning in Illustrator. Since many designers and marketers use Illustrator for clients or for personal projects, it’s important to know how to apply kerning to your letters.

Kerning in Illustrator is an almost identical process to how you’d do it in Photoshop (which makes sense, since they’re both Adobe products). Nonetheless, here’s how you do it.

  1. First, click the “Text” tool and put your cursor in between two letters -- I put mine in between the “K” and the “E”. Then, find your “Characters” panel.

2. Similar to Photoshop, there will be a “V/A” tool, with a little arrow underneath the “A”. That’s the kerning tool. With your cursor placed between two letters, increase or decrease the number beside the kerning tool -- as you can see, I set mine to “200”.

3. Now, I have a (admittedly, very ugly) space between my “K” and my “E”.

Examples of bad kerning

I’ve probably already shown you plenty of bad kerning examples throughout this piece, with my own attempts at kerning on various software.

But if you’d like to see more, don’t worry -- we’ve got some hilarious real world examples, to show you just how important (good) kerning is.

Here are a couple examples of bad kerning:

1. Bus sign gone wrong.

2. What's up with this spacing? 

Screen Shot 2018-05-17 at 1.53.18 PM

3. I think fixing this sign would be worth the investment.

4. Watch out for bad kerning, too. 

Screen Shot 2018-05-21 at 1.56.18 PM

5. This gives me a headache.



from Marketing https://blog.hubspot.com/marketing/kerning

No comments:

Post a Comment