Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Some Learning About Kerning.
3711
single,single-post,postid-3711,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
OH BOY, IT'S KERNING!

Some Learning About Kerning.

OH BOY, IT'S KERNING!

Yeah, I Know What Kerning Is Dude…

Sure, we all know what kerning is, no matter what our job description says, we’ve all heard the term. Kerning is one of the most basic, and often most mundane, steps in the design process. However basic it may be, it is still incredibly important and needs to be accounted for in every step of a project’s production.

I put together this little article because I find that sometimes kerning can become forgotten, put off or simply ignored. So I thought it may be helpful to offer a refresher on the basic principles and some quick tips that might help “kerning” become less of a dirty word.

 

 

I Fell Asleep for a Second There. Remind Me What Kerning Is?

Kerning is the adjustment of space between two letters with the goal of equalizing the negative space between them. Proper kerning will enhance the legibility of type and make it generally more pleasing to the eye. Most quality fonts include metadata that defines the spacing between every letter pairing in the typeface, but manual adjustment is still usually required.

While a large percentage of a design’s audience might not know or care about kerning, our industry peers and clients usually do. Quality kerning simply improves the overall quality of a design. Crappy kerning can sour an otherwise nice design or make your work appear unprofessional.

Example of poor kerning.

 

I’m Not a Designer, So Imma Check Facebook Right Now.

Kerning can creep into your day if you’re a designer or not. On the production/animation side, especially in Flash, you may have to re-layout or re-create text from a design. This makes you responsible for the kerning quality.

Even as an HTML developer, you may simply open up a design file where font conflicts can screw up text layout and jack kerning. If you can recognize kerning issues, you can work with the designer to fix it.

 

How To Kern In Adobe CS.

Most CS applications treat kerning pretty consistently. Kerning values sit in the same spot on the Character palette in Photoshop and Illustrator ( I’m not familiar with Indesign, sorry! ), where you can numerically adjust spacing values.

Both Photoshop and Illustrator come with a couple built in kerning modes.

Example of Photoshop's kerning modes.

Flash, of course, handles kerning a bit differently.
All these numerical controls and auto-kerning modes are great and all, but more often than not, you are just going to want to use keyboard shortcuts to adjust the spacing between specific letters.

PHOTOSHOP & ILLUSTRATOR: Place an insertion point between two characters, then press Option+Left/Right Arrow (Mac OS) or Alt+Left/Right Arrow (Windows) to decrease or increase the kerning between two characters. You can also hold Command to increase the adjustment amount.

Kerning in Photoshop

 

Kerning in Illustrator

 

 

FLASH: Place an insertion point between two characters, then press Option,Command+Left/Right Arrow (Mac OS) or Alt,Command+Left/Right Arrow (Windows) to decrease or increase the kerning between two characters. You can also hold Shift to increase the adjustment amount.

Kerning in Flash

 

TIP 1: KNOW WHERE TO LOOK

As a general rule, the less square a character is, the more likely it is to need manual kerning. A, W, V, T, Y, I’m looking at you. Some letter combos to keep an eye on are: LA, P., To, Tr, Ta, Tu, Te, Ty, Wa, WA, We, Wo, Ya, and Yo.

Text in all caps usually tends to be more problematic as well.

 

TIP 2: IT’S OK TO WAIT

It can be a good idea to make kerning one of the last steps in the design process, or at least until you have settled on font choices and general layout. Every time you change a font or scale text, if affects the kerning. Getting kerning just right can be time consuming, so waiting to do it can save a bit of headache.

 

TIP 3: TRUST YOUR EYES

Even great kerning is largely subjective. It’s all about the PERCEIVED space between letters, not exact measurements. Don’t stress about being exact, adjust the kerning so the spacing looks right to you, trust your eyes. It helps me to imagine that if water was poured over a word, would an equal volume of liquid flow down between each character?

If you are still not sure about your kerning, flip the text upside down. This will take away the distraction of the eye’s want to read the text and help you focus on the shapes themselves.

Flip, then kern.

 
I am by no means a kerning expert and you don’t have to be either. Simply taking the time to kern, even if not perfectly, is usually enough to avoid glaring issues. Thanks very much for reading! :)

 

Wait, kerning Can Actually Be Fun?

Well yeah! Check out this well-executed and surprisingly fun game. It’s a great way to practice and see how up-to-snuff your kerning skills are.

http://type.method.ac/

 

 

Still Interested?

Read something that’s written better than my post:

http://www.creativepro.com/blog/typetalk-kerning-principles