Digital Defiant Studios

Published: 2010-09-24 00:00:00 -0700

Kerning + tracking letterforms for logos; the definitive thesis (or why I obsess over typography)

This has long been an interesting topic of discussion. Most people usually don’t notice the intricacies that have gone into a logo once it hits the public eye. Most cannot tell the difference between substantial kerning and no kerning at all.

Conversely, I have had (and heard of) clients who convince themselves of discrepancies in even the most minute details. For example, I have had on some occasions, done nothing to change a logo, and after several revisions of these no change situations, the client is firmly pleased with the result. See the below example to see what I mean:

kerning client insanity

You might know this to be true, or you might be shaking your head in complete disbelief. But go ahead—give it a shot on one of your projects.

This phenomenon is by-and-large responsible to psychological biases inherent in our own perception—something I explain in detail on my article about something I call “Client Expectation Bias (CEB)”

Now you can finally learn to track & kern

So what is kerning and tracking anyway? Just in case you aren’t sure, here’s a little step-by-step guide about all this stuff.

Kerning

Kerning is simply the space between each individual letter. It is mostly used in small chunks of text and especially logos and heavy type treatments.

kerning what

Tracking

Similar to kerning, tracking is the space in between characters. The difference is kerning uses selective kerning pairs, whereas tracking is just the overall spacing.

tracking what

Word adjustment

You can also adjust the space between words themselves, which is part of tracking.

word space

Both kerning and tracking have their roots in metal typesetting, but that’s the basic gist of each. If you want to learn in more detail, check out the wikipedia articles about kerning and tracking.

Real life kerning examples

Here are some logos you’ve probably seen from various companies, and the spacing adjustments for each. You might be surprised or gain some insight!

Letter spacing adjustments of a script logo

Cartier has what might appear to be spacing, but as a script logo, the spacing here doesn’t count for much. Most of these margins are faux, because the measurements are not truly accurate, since they are all connected.

cartier script spacing

Letter spacing adjustments of a slab serif logo

Honda is very tightly and evenly spaced. The margins are nearly identical on all the letters, except of course A, where the angle creates extra whitespace and requires some negative margins. The O is surprisingly wider and without negative margins. This is because the letterforms are very wide and their x-height is not proportional at all—a common feature among slab serifs (this one in particular is an egyptian style serif.)

honda slab spacing

Letter spacing adjustments of a blackletter logo

The New York Times logo is very tightly spaced. Most all the characters have an extreme negative margin as you can  see in red. This is usually typical of blackletter fonts and their usage. I would not be surprised to find this same average of spacing on many newspaper logos, which are almost always set in a blackletter font.

kerning new-york-times

Letter spacing adjustments of a serif logo

Wikipedia’s logo is pretty evenly spaced with your average tightening on angled edges. Only the “Wi” have a negative margin in terms of space.

wikipedia serif spacing

Letter spacing adjustments of a sans serif logo

The Ubuntu logo looks perfectly even at first glance, but as you can see, there are some decent variance in the margins, but it looks quite nicely spaced overall.

kerning ubuntu

Ligatures and kerning

A ligature is sort of pre-adjusted set of characters. Sometimes two characters will run into each other, making kerning adjustments hard. For this reason, typographers made ligatures, which are individual characters that stylistically combine two characters into one. Some example ligatures include: fl, fi, and ae (among others.)

ligatures vs kerning pairs

You can access ligatures by going to a fonts extended library of glyphs.

Autokerning - Optica Maxima

Autokernicus metricus

Autokerning is something done exclusively by software. Most often, autokerning is set to “metrics.” You might have seen this before as “auto"—but what does it mean? Well, I’m glad you ask.

As we talked about above, every font has what’s called a kerning pair. Kerning pairs are great ways to adjust a fonts spacing in a generalized format. Well, when you create a font, some of this metadata is embedded in that font file. Kerning pairs are pieces of metadata that software will read when importing a font. Metrics kerning is just using that existing data.

Autokernicus opticus

Optical kerning is the other form of autokerning. Optical kerning is great for fonts that have no metadata for kerning pairs, or have not many kerning pairs included. Most freeware fonts will fall into this category, because let’s face it—freeware fonts are usually inferior to paid fonts, whose type designers have spent more time and love on crafting them. (Obviously there are many wonderful exceptions to that rule.)

Here’s an example of optical, metrics and hand-kerning:

kerning metrics vs optical vs hand

Practicing kerning adjustments is a fun way to learn through experience and I encourage you to do these on your own, with various fonts as well!

Here’s a fun little practice with a rather long word—just for kicks.

supercali ultra kerning practice

Kerning and ink traps - strictly utilitarian

Ink traps are another interesting phenomenon created during the metal typesetting age. During printing, ink spreads out on paper and often “blobs” up in the wedge areas of a character which is undesirable. Ink traps are adjustments to the these wedges, which allow ink to fill in the space during printing, removing the excess buildup. Kerning pairs play a role in ink traps because of how close or far apart they may be.

ink traps bleeding paper

Why do I bring this up? This of course affects printing of letters and the optical perception of space, based on ink spread. If you are tightening your kerning pretty heavily, be aware of what type of paper you’re printing on and the font you’re using, because tight kerning on a fibrous paper can produce a lot of bleeding of ink.

Spacing concavities: "The Big O"

There are what you might consider oddities in kerning, but they are simply optical illusions that must be accounted for. You see, certain letters are more rounded than others, and when a round character and a straight letter are combined, they tend to create large chunks of white space around each other. This is why O’s tend to be shorter in height than other letters. Seriously, check out the baselines around an O and see for yourself! Anyway, kerning concavities are something you’ll encounter while adjusting space, especially when doing major fine tuning of something like a logo.

Check out this example showing some various concavities and the gaps they create

kerning concavities

Concavity Tips & Tricks

So you might recognize some interesting anomalies that exist when you uncover the myriad effects of concavities and straight lines in a fonts kerning pairs. Here are things I’ve found:

  • When adjusting letterforms for serif characters, always align the spaces based on the outermost serifs or edges, not the innermost (see below.)kerning concavities outermost innermost
  • When adjusting concavities, make a bit more negative margins for them (see below.)concavity adjustments

Getting nitty gritty: a formulaic approach to typography

So is there a way to make this into a mathematical science? Can we make it even less subjective? I am always looking for ways to take out the murky aspect of design and make things more methodical. Fortunately, kerning and tracking are fairly objective in terms of results, because its primarily based on readability.

So is there a formula, ratio or number system we can use to devise a universal scheme for producing beautifully spaced words?

Some work has actually be done in this field, by italian engineer Igino Marini at Ikern. Unfortunately it is offered only as a service and does not give a complete description as to how the metrics algorithms are devised. However, the description page does give some pretty good detail: The core engine for Ikern is considered a “white space modeler” and uses functions of both proximity and reading rhythm. These two functions help the core engine arrive at its optimal metrics by understanding fundamental geometrics of standard letterforms. These fundamental geometrics have many parameters itself, but it requires some user input to fine-tune the engine for its desired use.

Back to the drawing board?

So, I think Igino Marini is on to something pretty amazing here. But I wonder if there is simply a formula we can use (and possibly model software under)? Perhaps we can examine some raw data from fonts themselves, like the embedded metrics for kerning pairs. So can we average those metrics out across a spectrum of fonts? It might be better (and certainly easier) to start by font type. As we studied the different kerning practices and techniques for different font types, we’ll probably need to limit these datasets to only each font type (e.g. serif, sans-serif). Later we can take every dataset and see if there are some universal correlations (I’m sure concavities will be one of them.)

Search for an automation program: reverse engineering

I’ve also compiled a few parameters that would probably be necessary for a fully automated program.

Parameter 1: Lowercase concavities

These are the concavities created by rounded letterforms. They are: a,b,c,d,e,g,m,n,o,p,q,r,s,u,w,y—note w and y will sometimes have exceptions, depending on the fonts design style (angled or rounded.)

Parameter 2: Uppercase angles

These are the angled letterforms that create large gaps of whitespace at the tops or bottoms. They are: A,K,V,W,Y,Z.

Parameter 3: Completely vertical or horizontal

These are letterforms that don’t play any tricks, just keep it simple. They are: E,F,f,H,I,i,L,l,T,t.

Parameter 4: Exceptions to the rule—whitespace angles

As discussed above, there are some exceptions. We need to figure out what those are for every font, and each case. The case angle exceptions are: A,K,V,v,W,w,X,x, Y,y and possibly Z,z

So far these are all the parameters I’ve come up with. If you have any other ideas, let me know!

Using existing data to find patterns and universal traits

So, like I said above, it is likely we can create some large datasets about kerning pair spacing (and other traits) and use that to find a correlation. If not for all fonts, I’m sure we can at least find a correlation for specific styles, weights, anatomies and font types.

From there we can find a “spacing ratio”, which would be numbers based on different proportions between letterforms. To do this, we would need a way to read font kerning pair metrics. Software such as Fontographer does this, but most people may not a copy (I don’t). Anyone know of a freeware version, or something that does the same thing? I tried using Microsoft's font properties extension tool, but it doesn’t help with that metadata.

Last but not least—some good typographical adjustment resources

If you want to get good at kerning and tracking, you’ve got to practice. Experience is a boon to skill, especially in the dark arts of typography. Seriously though. Just start making words up and kerning them at random. Do a small word; then do a big one. Do two words. Do a sentence. Do a paragraph, and then stop and reflect. Good job grasshopper, you’ve done well. You are well on your way to joining the leagues of conscientious typesetters.

Here are some great websites to help you along the way.

Typophile: A great community for exemplary help and examples of typography (free to join)

10 Kerning and tracking tutorials: Pretty self-exaplanatory.