Help needed with an html5 kerning game

[Member mar…]

This topic was imported from the Typophile platform

Hi there,

I created an html5 kerning game, works great on Chrome, Firefox 3+, Safari, Opera, IE9. I'm a designer with some front-end skills, but I must admit my typography expertise might not be up to par with what I'm trying to achieve here.

What I need from you: perform the kerning, compare it to my version, and if you think that your version is better than mine, click on the yellow link and a popup will be displayed with a code that will help me correct it. Post it here and I will be eternally grateful. Using the keyboard is the fastest way of getting the job done, if you are short on time.

Note to type designers: I'd be honored to showcase your work. Just send me an .ai file with your properly kerned word converted to curves. Just send me an e-mail to [email protected] with the file and the name, author, year of release and the corresponding links.

The link is:
http://type.method.ac

Sidenote: I'm not sure KernType is the right name, perhaps TrackType would be a more appropriate term?

[Member old…]

Tracking and kerning are two different things. A game ought to have a more playful name: Kern of the Realm, perhaps?

[Member Té…]

A Kern of Truth, I'd think.

[Member old…]

KernL Klink.

[Member Ind…]

The game is about spacing rather than kerning or tracking, no? So maybe SpaceType is more appropriate.

[Member Vic…]

What a coincidence, I came on here just to post a topic about your new game and see if others had tried it, seems you beat me to it. When I played it there were a few instances where I thought the "solution" wasn't entirely appropriate. Here is an example:

Screen: 6, tracking: 121,252,377,475

[Member pop…]

However, I should admit, the game is fun! Thanks!

[Member Ste…]

It's beautifully made, Mark. Well done.

Kerning is a measure of the space between a specific pair of letters.
Tracking is a measure of the overall tightness or looseness of a word, line, or paragraph.

Like others have said, this is more aptly named SpaceType or FitType because the player adjusts the sidebearings of each letter to get an evenly spaced word.

[Member mar…]

Hey, thanks for the replies. I never expected it to go viral in just a few hours, so now I'm hesitating changing the name. I've been getting a lot of conflicting advice on the spacing, but #6 was consistently pointed out so I implemented a suggestion that is very close to Vicke's.

[Member Ste…]

If not a name change, you could explain the terminology somewhere, like an "About" page.

[Member dtw…]

How about other score-sharing options at the end besides Twitter (Facebook, etc.)?

[Member Typ…]

yeah, facebook should be an option for sharing the score.

[Member Wil…]

I've been playing with this and enjoying it. The one issue I have as far as what is ideal concerns kerning the caps to lower case. Because caps are bigger and have more internal white space, I feel that it is better to give a little more white space between the caps and lower case than between two lower case letters. The game seems to go more toward equalizing all the spaces, so that the caps to lower case is tighter than what I would do. I realize that this is debatable, but I remember noting that Igino Marini of iKern also mentioned that he came to the same conclusion, and modified his program in this respect.

I'd be interested in what others think about this issue.

I realize there also might be a difference on what is ideal, depending on whether one is dealing with a one or two word title, or the goal is caps with lower case for running text.

[Member Nic…]

I agree with you Bill, with regards to the built-in kerning ("metrics") of fonts, which is optimized for small ("text") size settings.

But if one is going to concentrate this hard on kerning a word of display type, then manual kerning is the order of the day, and there are several different aesthetic models which one may follow, including the classic "tight but not touching":

Rather than one button for "correct" kerning, it would be interesting to have several buttons, showing different kerning methods, or how particular typographers would kern the word in question.

Furthermore, without reference to a specific document, it's really not possible to be precise about what kind of kerning is appropriate, because there are very few one word documents. For this document (the game page), the tracking, or letterspacing, is way too open, making it impossible to do proper kerning. For the one word "Type" in this layout, I would space the word as shown above.

BTW, this is Adobe Garamond, redesigned by Robert Slimbach, published in 1988, if I'm not mistaken. So it would be better to credit the original publisher and the redesigner, as in the FontBook.

[Member Ste…]

I feel that it is better to give a little more white space between the caps and lower case than between two lower case letters

I've never understood that approach. It seems like a relic of metal type and it has always bothered me that it continues in contemporary fonts. The goal of proper spacing is an even tone. To me, this method distracts.

[Member Wil…]

Stephen, the concept is indeed to get even color, an even density of gray.

However, when you test kerning of caps and lowercase in extended text, it becomes clear that it is not possible to get the same density of gray with caps and lower case. The caps have more open space in them, and also a different structure as they are more closed above the x-height.

Color is not only the space between letters, but also within letters. So you can shove a cap next to a lower case latter, with the same space as between two lower case letters, but you still aren't going to have even color. In fact, the color between the cap and lower case is going to be more uneven, compared to the cap itself if you kern it tighter. So it makes sense to do something between what you'd do for an all caps setting, and what you'd do between two lower case letters.

The reality is that you can't completely cover up the origin of caps and lower case as different alphabets, with different structure and color. And in facing this you realize that in fact that there is an advantage to caps to be a little different in color to serve their function of marking sentence beginnings, proper names, and so on. So it is not a matter of being stuck with metal standards, it is a matter of being stuck with—or taking advantage of—a script that mixes two different alphabets.

The history that created this problem was pre-printing, in the humanist scribes of the early 15th century. You had people like Bayer who wanted to revert to unicase, which would enable you to get more even color. But it never caught on, probably because the signaling function of caps is in fact useful for communication. So the reality is that you either have to go the direction of Bayer, or accept the fact that kerning will always involve compromise.

Now this question is complicated by the fact that if you have smaller, narrower, lighter caps, you can kern them closer, and get more overall even color. But you also lose something in having the caps not so prominent, as they become a little less functional as markers. So the question of how best to kern is bound up with the overall design concept of the typeface.

In any case, you really only get very similar color from caps and lower case when they are small caps. In fact, sameness of color is one of the purposes of making small caps in the first place. That reality of the function of small caps I think clinches the case that you just aren't going to be able to get the same color in words that mix full caps and lower case.

So I would say that noticeable caps are, within limits (it can be overdone, like everything), not "distracting," but usefully signaling information to the reader.

Now as Nick, who agrees with me on kerning for running text, points out, what you do in display is a different question. There it becomes a question of what works with that combination of letters, in that font, in that situation on the page. And there are different ways you can go.

This brings up another issue, but related, which is that you can't kern for every situation when designing a font. Essentially, all you can do is kern for all caps, and caps to lower case for extended text. I think the sensitive typographer is always going to need to kern titles for best effect—and redraw the letters for a wordmark, as Doyald Young was a master of. It just can't be built into the font.

To illustrate the futility of trying to get completely even color in kerning caps to lower case, consider trying to get the whole of the following sentence to have even color:

In the early 20th century, P. G. Woodhouse and W. Somerset Maughm were successful playwrights.

See what I mean?

[Member Nic…]

A bit off topic, but that should be Wodehouse and Maugham.