The tricky art of letter-spacing

The art of spacing is one of the most difficult aspects of working with letters. But anyone who works with letters extensively knows that good spacing is often more important than good letters. In “Lettering as a Work of Art,” the essay that prefaces "Treasury of Alphabets and Lettering" (1966 but originally Meisterbuch der Schrift, 1952), Jan Tschichold says, “Good lettering demands three things: -- (1) Good letters. A beautiful letter form must be selected which is appropriate to the purpose it is to serve and to the lettering technique to be used. -- (2) Good design in all details. This calls for well balanced and sensitive letter spacing and word spacing which takes the letter spacing into account. -- (3) A good layout. An harmonious and logical arrangement of lines is essential. None of these three demands can be neglected. Good lettering requires as much skill as good painting or good sculpture.” He goes on to demonstrate “good and bad letters” and how to properly space capitals and lowercase letters. “Letter spacing should not be mechanically equal but must achieve equal optical space. The letters must be separated by even and adequate white areas,” he writes. Easier said than done. Some of the samples of “unsatisfactory” spacing that he shows fit this criteria but do not balance the space between letters with the space inside letters. And it is that balance of the inner and outer that makes for ideal letter-spacing.

[caption id="attachment_228969" align="aligncenter" width="460" caption="Life in Shakespeare’s England (Pelican Books, 1944). Book cover by Jan Tschichold. Set in Gill Sans."][/caption]

[caption id="attachment_228970" align="aligncenter" width="460" caption="Science News 14 (Penguin Books, 1945). Set in Perpetua. These two covers by Tschichold exemplify his view that capitals should be spaced with “even and adequate white areas” between letters that match the space inside them."][/caption]

But, as Tschichold shows, the letters of the Roman alphabet pose problems for anyone hoping to achieve such perfection. They are not only variable structurally but they differ greatly from style to style, from typeface to typeface. Thus, there are letter combinations that are inherently awkward if not fiendishly difficult to space properly. Especially in metal type where letters are constrained by their bodies. But this age-old limitation disappeared years ago with the advent of phototype and its successor digital type. Today, the only restriction on good spacing in type is the design of the letter itself.

Whereas hand-letterers can alter and manipulate individual letters to improve the spacing of a word or line, designers working with type have to make do with forms they are given -- unless they want to become like Herb Lubalin and his colleagues, subtly cutting off parts of letters, redrawing them, butting letters together and doing whatever it took to achieve good spacing, even in an era that stressed “tight but not touching” spacing.

[caption id="attachment_228971" align="aligncenter" width="460" caption="Bücher aus dem Insel-Verlag. Poster by Jan Tschichold for Insel-Verlag (1926). Hand-lettered."][/caption]

[caption id="attachment_228972" align="aligncenter" width="460" caption="Catalogue cover for Uhertype (a phototypesetting company) by Jan Tschichold (1933). Set in Tschichold’s sans serif that mimicked Gill Sans. These two early designs by Tschichold show a different attitude toward the letterspacing of capitals. One reason is that these are advertising items, not books."][/caption]

However, what Lubalin would have considered good spacing would not have passed muster with Tschichold since his work focused on the space between letters not a balance between that and counters. The difference between Tschichold and Lubalin is that the former’s view of good letter-spacing was influenced by calligraphy and book typography and the latter’s was determined by the demands of advertising design. For text typography the balance between inner and outer space is essential to achieving an even color to a page of text which, in turn, makes the experience of reading smoother. Although Tschichold addressed lettering for display in "Treasury of Alphabets and Lettering," his notion of display was colored by classical inscriptions on monuments and architecture. Lubalin accepted holes created by counters in his work because he was more interested in the massing of text to provide a visual punch that would attract viewers and turn them into readers. The holes created patterns that enlivened the headlines or short blocks of text found in advertising and graphic design. Lubalin’s design philosophy did not translate well to books and other lengthy texts, but it worked well for advertisements, posters, book jackets and packaging.

[caption id="attachment_228973" align="aligncenter" width="460" caption="Avant Garde 13. Magazine cover design by Herb Lubalin (1971). Set in ITC Avant-Garde Gothic, which was an outgrowth of the magazine’s logo. This is the epitome of “tight not touching” typography. It is made possible by the use of alternate characters and ligatures as well as some alterations to letters. (See the L in PORTFOLIO and the H in PHOTOGRAPHS.)"][/caption]

All of this discussion about differing philosophies of letter-spacing is a prelude to an analysis of a KernType: A game to practice your kerning that Mark MacKay, an interaction designer, has created for Method of Action, a company that says it is devoted to “peer-to-peer education for people who want to get things done.” KernType is apparently part of their online course Design for Programmers. I learned about KernType a few days when a fellow typography teacher at Parsons School of Design sent me the link. As a lettering artist I figured that the test would be a relative snap, but I discovered otherwise once I tried it out.

The first time I tried KernType I didn’t realize what the “rules” were until I had failed at several of the test words. But even after that my scores were often pathetic. I think I only got four of the ten test words right. However, when I looked at the solutions that MacKay proposed I didn’t feel so bad. I disagreed, sometimes violently, with them. My failed scores began to look like a badge of honor. To see if that really was the case I played the game a second time, paying more attention and trying to achieve perfect scores for each test word. But I failed. This time I only got three right. So I decided to write this blog post to explain the reasoning both behind my kerning decisions and behind my criticism of those made by MacKay. (I also clicked on the button that allows one to share one’s solutions with the world. I will probably regret this since, upon further reflection, some of my solutions are not the best even if I believe them to be better than the those of KernType.)

kern me
This is the opening test phrase intended to introduce the player to how the game is to be played. The player simply drags one or more letters left or right until it looks right. (Or the adjustment can be done by clicking on left and right arrow keys.) What is not explained is that the left and right letters in each word or phrase are fixed in place. The player discovers this once an attempt is made to move either of these letters and a barred circle pops up onscreen. These fixed letters, as will be seen below, are a big problem with KernType.

I moved the e in kern me to keep it from smashing into the r as it appears when one begins the game. Although the game said my solution was fine, it did not match its solution. The player’s solution appears in blue and underneath it can be seen the game’s solution in white. My e was closer to the k than the game’s solution.

If the goal of good letter-spacing is equal space (area not distance) between letters then I believe my solution is better. This notion of what constitutes good kerning is crucial to assessing the quality of the solutions proposed by MacKay and, above all, the value of KernType as a learning tool. This is the extent of KernType’s instructions: “Your mission is simple: achieve pleasant and readable text by distributing the space between letters. Typographers call this activity kerning. Your solution will be compared to typographer's solution, and you will be given a score depending on how close you nailed it. Good luck!” The game does not provide any criteria for how to recognize good kerning nor does it explain how it arrives at its scores. The only way to compare oneself to it is to look at both solutions simultaneously and see where the white and the blue letters diverge.

1. WAVE
Set in Gotham Black, this is the first test word. (KernType identifies the typeface used, its designer and its date of release. Some of the material is at best problematic and some flat-out wrong.) My score was a below-average 48. The task here is to balance three normally difficult letters (A V and W with diagonal strokes) with a simple one (E). Letters with diagonal strokes are a recurring theme in KernType. Such letters are difficult to space because they are close to their neighbors at the top and very far away at the bottom or vice versa. When opposing diagonals are next to each other it is the worst possible scenario, but when parallel diagonals are neighbors they are easy to space in digital type (though not in metal type). So, WAVE is not as hard as it would seem at first glance. WAV can be spaced well with little trouble but then it has to work with VE.

My solution may be too tight for VE but I contend the game’s solution is too loose―and worse. The standard method of checking even spacing of a word is to isolate three letters at a time and see if the middle one fits comfortably without leaning one way or the other. Where diagonal letters are concerned, though, balancing letters in this manner may not lead to optimum results. In fact, Tschichold’s examples of bad spacing of capitals includes PLANE where he feels LA “feel glued together” because the left leg of A is so close to the L. My kerning probably suffers from the same problem, this time the right stroke of V is visually too close to E since we read across the tops of letters and don’t notice the gap below as much.

There are several ways to isolate triplets to check their spacing. One is to simply squint and focus one’s eyes on three letters at a time. Another is to mask off the surrounding letters with one’s hands or pieces of paper. A more complicated but better approach is to cut out a window in a piece of cardboard or bristol board and place it over the text, moving it as needed to check different triplet sets.

[caption id="attachment_228975" align="aligncenter" width="460" caption="My third solution with a score of 77."][/caption]

[caption id="attachment_228976" align="aligncenter" width="460" caption="Kern Type’s solution. The space between VE is too large and the A seems to favor the W more than the V."][/caption]

2. Type
This is set in Garamond, but which Garamond is not specified. It looks like Adobe Garamond to me. KernType says the type was designed by Claude Garamond and released c.1540. This is misleading. The typeface we are kerning is a digital design and was not created by Garamond a half century ago. Adobe Garamond was designed by Robert Slimbach and released by Adobe in 1989. Slimbach based his design on the types of Garamond as seen in printed books and in some surviving matrices at the Plantin-Moretus Museum in Antwerp. But he made subtle changes to adapt Garamond’s type to both digital technology and contemporary design expectations.

I scored a mediocre 59 on this word. The challenge lies in Ty. Not only is there another diagonal stroke letter but T is historically a kerning nightmare due to the space under its arms. In metal type-founders and typographers became used to larger-than-desired spaces between T and following letters, especially h in English words. The only solution for the type-founder was to cast an alternate kerned letter, one which overhangs its body and rests on that of an adjacent letter. For the typographer there was always the option of sawing the offending letters to create a better fit―but that ruined them for other situations. Today, with digital type, there is no longer any reason to accept this situation. Adobe has recognized this and has been including Th ligatures in their Pro fonts.

The kerning solution proposed by MacKay, unlike mine, does not take full advantage of the ability in digital type to maneuver the y under the right arm of the T. His word has too much space between T y and y p (or, it could be argued, they are fine and there is not enough space between p e). But even if my version is better spaced the word looks terrible. This is because the fixed positions of the T and e are too far apart, insuring that the word will be loosely spaced. In this instance―and several others in KernType―the inability to move the rightmost letter means that players are essentially justifying single words and that is not good typography.

[caption id="attachment_228977" align="aligncenter" width="460" caption="My solution. I find it too loose despite the evenness of spacing. This is because the T and e are immovable. I scored 73 on my third attempt as I left more space under the T than before."][/caption]

[caption id="attachment_228978" align="aligncenter" width="460" caption="Kern Type’s solution. The te combination is too close."][/caption]

3. holly
This word, set in FF Zine Slab Black Italic (Ole Schäfer, 2001), is the first for which I scored a perfect 100, though my solution did not exactly match that of MacKay. In my version oll are slightly further to the right. I did that to close up the ly space. This space is not as devilish as in most fonts because it is visually “closed up” by the short tail of y that curls to the left just below the baseline.

Heavy letters need to be spaced more tightly than lighter ones. This is because they have smaller counters. As Erik Spiekermann says in "Rhyme and Reason," “Narrow typefaces need less air (or rather, paper) between words than wide ones, bold typefaces less than light. And this―we’ve already seen it in relation to character fit and letter-spacing―is due to the spaces inside letters.” His maxim is, “The bolder the typeface, the closer the letter-spacing and line spacing.”

[caption id="attachment_228979" align="aligncenter" width="460" caption="My kern of holly. On this third try I only scored 68."][/caption]

[caption id="attachment_228980" align="aligncenter" width="460" caption="Kern Type’s solution. Note the excess space between ll and ly."][/caption]

4. Await
Rotis Semi Serif Bold, the hybrid typeface used here, is problematic because its occasional serifs (as in w and i) increase the number of uneven spaces to solve. (I think the font is actually the regular weight of Rotis Semi Serif.) Thus, Aw and ai which would normally be fairly easy to space are now more complicated. I scored 77. MacKay’s solution has wa farther to the right than I do. The result is a tight Aw―partially due to that errant serif―and possibly a loose wa.

[caption id="attachment_228981" align="aligncenter" width="460" caption="My third solution with a score of 92."][/caption]

[caption id="attachment_228982" align="aligncenter" width="460" caption="Kern Type’s solution. The w is too close to the A."][/caption]

5. YVESS [cap and small caps]
I am not sure if this is a word or a possessive proper name missing an apostrophe. It is set in Sabon. The release date is incorrectly listed as 1966. Sabon was issued as foundry type by Stempel in 1964 and as both Linotype and Monotype in 1967. This is the only word in the test that is set in caps and small caps. But that makes the problem diagonal letters harder to solve than if it was upper- and lowercase. On the other hand, the loose spacing that is inevitable is appropriate.

I totally bombed out on this one with a score of 2 followed by a score of 17 on another attempt. The trick with this word is to make the YV blend with the ESS. My solutions had the V further under the Y than the one from MacKay. I think the YV was too tight in my first attempt but only because we read across the tops of letters since the space was still overly large. My second attempt increased that space but reduced the sense that, to use Tschichold’s phrase, YV look glued together. KernType’s solution, though, is even more open. Ideally, the second S would not be fixed, allowing the entire word to be stretched out a bit more. That would help the two halves mesh together better.

[caption id="attachment_228983" align="aligncenter" width="460" caption="My third attempt with a score of 37."][/caption]

[caption id="attachment_228984" align="aligncenter" width="460" caption="Kern Type’s solution with uneven spacing at the left."][/caption]

6. Roissy
The word is set in Frutiger 55. Frutiger was derived from Roissy, a typeface that Adrian Frutiger designed for signage at Roissy Airport outside of Paris. Roissy was designed in 1974. Frutiger, intended for use in print, was released in 1976. KernType has a release date of 1975, the year the airport opened. Although the date is wrong the choice of Roissy as a test word is a nice nod to Frutiger’s heritage.

The only problem letter is the ubiquitous y. Often R with a diagonal leg is troublesome, but Frutiger has a short one that minimizes any spacing issues, especially with o following it. Despite this I scored a weak 57 on this word. However, MacKay’s solution is inadequate: there is a little too much space between Ro and betweem ss, and way too much between sy.

[caption id="attachment_228985" align="aligncenter" width="460" caption="My third attempt with a score of 50. There may be a hair too much space between ss."][/caption]

[caption id="attachment_228986" align="aligncenter" width="460" caption="Kern Type’s solution has too much space between sy."][/caption]

7. Quijote
This is set in Baskerville Italic but which Baskerville is not specified. I have not been able to identify the cut. The link provided leads to Bitstream Baskerville Italic but that face does not look like the one used by KernType. (Look at the Q and e: the former is narrower and has a different juncture for its tail; the latter has a smaller eye.) The release year of 1757 is, as with Garamond, misleading when talking about a digital typeface. This is the only word set in italic in the KernType test. The key to good kerning with such a typeface is to watch the pothooks. If the typeface is too tightly spaced the pothooks will get tangled up. Spacing italic too loosely, on the other hand, negates its cursive quality.

I scored a resounding 100 on this one. But my solution did not match that of KernType’s exactly. We especially differed over the positioning of the t. I think that the game’s kerning leaves too much space between te and too little between ot. This is where looking at triplets (ote) is helpful.

[caption id="attachment_228988" align="aligncenter" width="445" caption="My solution was scored a 100 but does not match that of Kern Type."][/caption]

[caption id="attachment_228989" align="aligncenter" width="445" caption="Kern Type’s solution has a poor ote triplet."][/caption]

8. gargantuan
Set in FF Meta Black, this is the first word to have a repetitive letter pair: ga. Actually, from a spacing perspective, gar and gan, count as a repeated triplet. This should make kerning easier, yet this is where I scored an abysmal 0! And lost respect for KernType.

MacKay’s solution is just plain awful. It has huge holes for ga and rg, and overly tight spacing for ar, ant, and uan. It looks like a bad dental job. The problem lies in the ga combination―and that friendly ear on the g. MacKay seems afraid to get let the two letters get too close to each other, yet, given the fixed measure of the word, they have to almost touch if not actually do so. I tried not to crash the two letters together as Lubalin and his cohorts probably would have. (Or, more likely, they would have partially amputated that ear.) Thus my final kerning―even on a second attempt―is not ideal.

The ga space in my solutions is too large, but sometimes smashing letters together is worse. Letters that overlap one another may distract the reader by being read as a unit or clump. And this can be as bad as uneven spacing. In the end the whole point of even spacing is not to please designers but to make reading smoother. So, pick your poison: clumps or holes.

[caption id="attachment_228990" align="aligncenter" width="445" caption="My third solution scored a zero like the others. A badge of honor."][/caption]

[caption id="attachment_228991" align="aligncenter" width="445" caption="Kern Type’s solution. A disaster."][/caption]

9. Toronto
KernType says the city is set in Didot but doesn't say which version. Clicking on the name provides a link to MyFonts and reveals that it is Adrian Frutiger’s Linotype Didot. Its release date was 1991 not 1784 as indicated here. KernType”s date is presumably based on the date that Firmin Didot―who is listed as the typeface’s designer―created the first “modern style” face in the opinion of type historians. But that is not the typeface that Frutiger used as a model for his digital Didot. He used a later design that had a stronger thick/thin contrast and finer hairlines.

T, the old metal type bugaboo, appears here but it is easily solved since the following letter is o. The other tough letter is r. However, there is a repetitive “pair”: or and on. Whoa! Another score of 100!. But my solution, once again, is not exactly that of KernType. My first o is further to the left under the arm of T; second o closer to r; and third o closer to t. MacKay’s ro spacing is more open, but this is a debatable point. Which is more important: reducing the space under T and r or keeping To and ro from visually merging? Even if one accepts KernType on these points, its to looks too open―or maybe, its or, on and nt are too tight. There are always two perspectives on what is wrong with a trio of letters that are not evenly kerned.

10. Xylophone
This word―a mainstay of children’s alphabets―is allegedly set in Syntax. But clicking on its name indicates that it is actually Linotype Syntax, Hans Eduard Meier’s 2000 redesign of his 1968 metal face. The release date in KernType does have the proper date but the name of the typeface should match.

With this word we return to the annoying diagonal stroke letters. They are countered by several similar letter combinations in which round strokes meet vertical ones: lo nearly equals ho and ne, while op does equal on and ph. Given these advantages my score was an embarrassing 53. But I think it was better than KernType’s solution. It was not perfect―a little nudging was still needed to make the round/straight combinations look identical. I tried again, this time working from right to left instead of left to right, and hit the jackpot: a perfect score of 100. But my second solution still does not match that of KernType. In my opinion, KernType has too much space between Xy and yl―and ne seems a tad looser than its round/straight counterparts.

KernType is a wonderful idea for teaching typography students and others about good letter-spacing, but in practice it needs much work. It is not just that some of its solutions are faulty or are open to debate. There are no explanations for its solutions, no discussion about the problems that each word and its letter combinations pose, and no overall notion of what constitutes good spacing. Adding these would make KernType a useful product instead of just a bar game for type geeks.

[caption id="attachment_228992" align="aligncenter" width="460" caption="My solution scored 100 but, again, I believe it is better than that of Kern Type."][/caption]

[caption id="attachment_228993" align="aligncenter" width="460" caption="Kern Type’s solution is weak for the triplet Xyl."][/caption]

KernType is a wonderful idea for teaching typography students and others about good letterspacing, but in practice it needs much work. It is not just that some of its solutions are faulty or are open to debate. There are no explanations for its solutions, no discussion about the problems that each word and its letter combinations pose, and no overall notion of what constitutes good spacing. Adding these would make KernType a useful product instead of just a bar game for type geeks.

Copyright F+W Media Inc. 2011.

Salon is proud to feature content from Imprint, the fastest-growing design community on the web. Brought to you by Print magazine, America's oldest and most trusted design voice, Imprint features some of the biggest names in the industry covering visual culture from every angle. Imprint advances and expands the design conversation, providing fresh daily content to the community (and now to salon.com!), sparking conversation, competition, criticism, and passion among its members.