5/13/2014

What Is Kerning : The importance of space between letter pairs

Proper kerning is, in my opinion, the single biggest thing -- and the first thing I notice, that separates the work of professional designers from that of 'apprentice' or 'wanna-be'
designers.
The amount of empty space between letter pairs 'wants' to be equal, and that's the goal of hand kerning your type." />

Login / Join

Inspiration Gallery

Download A Design

Find A Web Designer

Blog

Best Of Roundups

Submit

Freebies
Follow

Like

970

Design Blog Categories

Design Tips & Tricks Blog

Guest bloggers - write for us >>

> RSS Feed

> Web Design

What is Kerning in Web

Design

> CSS - DHTML

Category: Typography,Tutorials,
Date: 11-03-2011

> Photoshop - Illustrator

> Coding
> Free Downloads

> Search Engines - SEO

Like

Share

Tw eet

> Social Media

Kerning the lowdown:

> Tutorials
> Typography

Kerning is the space between letter pairs. When you set type in any pro-grade graphics program
(like Photoshop, Fireworks, etc.), you have the ability to alter the space between letter pairs, making
minute adjustments until your type looks just right.
What's that you say? "It looks fine without adjustments of the space between letter pairs?" Put down
those pork rinds and pay close attention Cletus...I'm going to enlighten you.
Proper kerning is, in my opinion, the single biggest thing -- and the first thing I notice, that separates the
work of professional designers from that of 'apprentice' or 'wanna-be' designers.
The amount of empty space between letter pairs 'wants' to be equal, and that's the goal of
hand kerning your type. Your mind reads the words your eyes see. When there is visual and spatial

Recent Blog Posts

continuity between all the objects (letters) it's easier to read, the better things look, and the more you
can concentrate on the meaning of the words, rather than the minute 'visual hitches' that are created by
poor kerning.

What is Responsive Web Design?

2014-04-16

20 Fantastic Adobe Illustrator Tutorials

The fonts you use have information about spacing between letter pairs embedded in them normally. If

2014-03-21

they don't have that info, the graphics program handles the spacing between letter pairs. Sometimes the

20 Free Photoshop Tools, Actions and

Scripts to Speed Your Work

graphics program and the letter pair spacing data both fail you, and it's up to you to fix that.

2014-03-21

Let's get moving before we lose consciousness!

25 Helpful CSS Code Snippets for

Developers

A letter pair is two letters, like 'go' or 'th', or 'si', etc. No hidden meaning.

2013-12-26

26 Reasons To Get Jetpack Plug-in for

WordPress Free
2013-12-26

Second, are you the most anal designer ever? Is kerning some

Free Premium UI Kit from Pixelkit

kind of joke?

2013-10-29

Are you kidding me? Gosh no. It almost sounds like a joke if you're not yet

7 Days of Free Access to

GraphicStock.com For CoolHomepages
Users

tuned-in to what good and bad kerning looks like, but once you get it, you'll

2013-10-09

http://coolhomepages.com/What-is-Kerning-in-Web-Design/blog-10.html

1/6

5/13/2014
What Is Kerning : The importance of space between letter pairs
50 Must-Have Web Designer Cheat Sheets
be appalled at all the bad kerning that you see everyday. And it's not just
designers who see this -- the average untrained person can tell the difference intuitively and

2013-09-11

subconsciously, even if they can't tell you why one set of letters looks better to them. So you're not just

Insider Secrets to Designing Phenomenal

Logos

making these adjustments for your designer-weenie friends. You're doing what the high-paid and
serious professionals do.
Most of the time, the spacing between letters is fairly good. But about 15% of the time, it's not so good
and there's too much or too little space between letter pairs, and this is what we need to adjust.
Some letter pairs have too much space
between them, while others don't have
enough.

2013-09-07

20 Free Display Fonts for Exquisite Text

Styling
2013-08-13

35 Great Looking Attractive Free Website

Templates
2013-07-12

Infographic: 30 Classic Dr. Seuss Quotes

That Can Change Your Life
2013-05-16

12 New Responsive Web Design Tools

The how's and why's of Kerning:
The basic idea is to look at the dead space, or empty space between each pair. If that space had
volume, then the amount of volume between every pair should be about the same -- which is to say that
the amount of empty space should be about the same.
Some letters naturally create more or less empty between themselves and their neighbors due to their
shape. The letter pair "Ci" has more space than the letter pair "Ce" because the "e" is rounded and fills
in that empty space more. Same with "oo" versus "lo" for instance. So we need to adjust the spacing
using the TRACKING or KERNING setting in our graphics program.

2013-03-27

Free Fonts Of The Week - Ready To

Download
2013-02-04

Freepik - Over 1.4 Million Free Vectors,

PSDs, Photos
2013-01-15

Killer Free Giveaway - Learn To Design

Bundle from StackSocial
2012-12-04

9 Cool & Free New Fonts To Download

Now
2012-12-04

Adjusting kerning in Photoshop and Fireworks

Photoshop and Fireworks allow you to use keyboard
commands to adjust the kerning which is very
helpful -- I suggest you get used to doing it this way.

How To Determine Breakpoint Widths For

Responsive Web Designs
2012-10-10

10 Great and Useful HTML5 Infographics

from SixRevisions
2012-09-19

Killer Inspirational Typographic Designs

In Photoshop the command is "Option-left/right

2012-08-27

arrow" and in Fireworks, the command is "Command-left/right arrow" (these are for Mac --- PC people,

Google To Start Punishing Sites With Too

Many DMCA Takedown Notices

you can figure it out I'm sure).

2012-08-11

Set the cursor BETWEEN the two letter pairs you wish to adjust -- or in some programs you select or
highlight the two letter pairs and then make the adjustment.

Free WordPress Theme from Theme

Junkie
2012-08-08

Note: Capital letter forms are the biggest offenders -- pay extra close attention to kerning
your caps.

12 Fresh and Free UI PSD Freebies from

Web Design Ledger
2012-08-08

8 Cool Free Tattoo Fonts

2012-08-03

Good Vs. Bad Photography In Web Design

2012-07-07

Use "Option + right/left arrow" in

Photoshop to adjust letter pairs.

25 Websites With Muted Color Palette

Designs
2012-06-28

Learn To Be A Visionary Like Steve Jobs

Use "Command + right/left arrow" in Fireworks.

2012-06-25

40 Of The Best Looking Music Websites

2012-06-20

25 Gorgeous Single Page Web Designs

Examples: Good and Bad Kerning

2012-06-16

Top DO's and DONTs of Stock

http://coolhomepages.com/What-is-Kerning-in-Web-Design/blog-10.html

2/6

5/13/2014

What Is Kerning : The importance of space between letter pairs

Photography in Web Design

Here are some examples of poorly kerned

2012-06-13

type, and nicely kerned type below. Now

go out and find those kerning errors kids!

Find A Designer >>

Your eye will naturally see these errors

Locate the designer of your dreams in our

Designer Portfolio area.

without close scrutiny after a little while -it doesn't take long once you get used to

Submit Your Site >>

looking at kerning.

Submit your website designs to our

moderated Design Gallery.

Some general rules for good

typesetting:

Get A Site Design >>

1. Some font faces are intended for larger

Over 25,000 incredible designs to choose

from, instant download.

display type. Don't use them for body

copy.
2. Don't mix too many type faces on one

Design Downloads >>

page. 1 or 2 is good. Maybe 3. 4 is really

Tons of downloadable templates, logos,

and design components - free and paid.

pushing it.
3. Don't use heavy tracking on lowercase
words. It's OK for effect on uppercase
letters, as in:

c o o l h o m e p a g e s

C O O L H O M E P A G E S

doesn't look too good,

looks reasonable. Ask Roger Black about this.

4. Some font faces fall apart and look terrible at sizes lower than 10 or 12 points. Use fonts that scale
well below about 10 points.
5. Make sure there's enough contrast between the type color and the color the type is sitting on (the
background color) and that these two colors don't 'fight' with each other, the way overly saturated colors
do sometimes, like bright red and bright green.
6. When setting bitmapped type, avoid 'widows'. A widow is a word that wraps to the next line and ends
up alone on the line.
7. Use a type face that is appropriate to the information you're conveying or the subject matter. If you're
running a Nine-Inch Nails site, Helvetica is a bad choice for your big Nine Inch Nails heading.
Conversely, if you're running a mass-consumer portal, a heavy English script would be a poor choice.
...and some more tips from About.com's site:

http://coolhomepages.com/What-is-Kerning-in-Web-Design/blog-10.html

3/6

5/13/2014

What Is Kerning : The importance of space between letter pairs

Choosing Fonts #1 When in doubt, pair a serif font for body text and a sans serif font for headlines.
Choosing Fonts #2 Avoid mixing two very similar typefaces, such as two scripts or two sans serifs. There
is not enough contrast and the small differences will cause a visual clash.
Choosing Fonts #3 Limit the number of different typefaces used in a single document to no more than
three or four.
Choosing Fonts #4 Avoid monospaced typefaces for body copy. They draw too much attention to the
individual letters distracting the reader from the message.
Setting Type #1 Avoid setting type in lines of more than sixty-five characters. Longer lines cause the
reader to "double," or read the same line twice.
Setting Type #2 Avoid setting type in lines of less than thirty-five characters. Shorter lines cause
sentences to be broken and hard to understand.
Setting Type #3 Apply the alphabet-and-a-half rule to your text. This would place ideal line length at 39
characters regardless of type size.
Setting Type #4 Apply the points-times-two rule to your text. Take the type size and multiply it by two.
The result is your ideal line length in picas. That is, 12 point type would have an ideal line length of 12x2
or 24 picas (approx. 4 inches).
Setting Type #5 Avoid setting type in all capital letters. Capital letters slow reading speed and take 30
percent more space than lowercase letters.
Type Size #1 For a predominantly older readership of 65 and over or for audiences with known visual
handicaps, set body text in sizes from 14 to 18 points.
Type Size #2 Use 11 to 12 point type for readers in the 40-65 age range. Type Size #3 For most
general audiences, body copy set at 10 or 11 points is good.
Type Size #4 For beginning readers of any age, a larger type size around 14 points is good.
Type Size #5 Keep headlines between 14 and 30 points in most cases, keeping in mind that the closer
in size to the body text, the harder it is to distinguish headlines from other text.
Type Size #6 When you're choosing slides for a presentation, spread them on a light table and toss out
any that have type too small to read with the unaided eye. Initial Caps Avoid placing initial caps in the
lower one-third of the page. Kerning Round characters can be kerned more than straight characters.

About the author:

Tim Donahue has been involved in web development and graphic design for 'oodles' of time, to be
exact. Tim runs CoolHomepages.com and WebProsNow, and has been employed as VP of Creative
Production, Creative Director, Art Director and Senior Designer for a variety of startups.

Tags: kerning, spacing, typography, design, how to kern

Comments

http://coolhomepages.com/What-is-Kerning-in-Web-Design/blog-10.html

4/6

5/13/2014

What Is Kerning : The importance of space between letter pairs

Add New Comment

Log In

Featured Web Templates For Sale

View All >

123456789

Price $75

Details

Price $69

Details

Price $69

Details

Price $75

Details

Price $69

Details

Price $75

Details

Price $67

Details

Price $69

Details

Price $69

Details

Price $69

Details

Price $67

Details

Price $69

Details

Price $75

Details

Price $69

Details

Price $69

Details

Price $75

Details
Next page>>>

Find On CoolHomepages
http://coolhomepages.com/What-is-Kerning-in-Web-Design/blog-10.html

CoolHomepages Friends
5/6

5/13/2014

What Is Kerning : The importance of space between letter pairs

Inspiration Gallery

Find A Designer

Design Blogs Roundup

Six Revisions

Designrfix

Inspiration Feed

Design Tips & Tricks

List Your Company

Wordpress Themes

DesignMag

Wix.com

Designer Daily

CHP Members

Submit Your Site

Submit Articles

Vecteezy

InspiredMag

The Design Work

DesignModo

CrazyLeaf Blog

Wordpress Themes Shock

Onextrapixel

Web design

Vector backgrounds

Technology.am

Stock Photos

Buy Web Designs

Help / FAQ
About Us

Buy Logos

Design Award
Contact Us

Free Downloads

Sign up/Login

Submit |

Website Builder
Expert

Terms Of Service

| Privacy | Logout | Feedback on the new site? Let us know >

CoolHomepages.com 1997-2014

http://coolhomepages.com/What-is-Kerning-in-Web-Design/blog-10.html

6/6