Learn How To Kern Like A Pro With KernType

There really should be more games like this. This weekend a tweet by designer, author, teacher, and wayfinding and typography expert Ralf Hermann led me to KernType. The website – brilliant in its simplicity – teaches what kerning is in an interactive and intuitive way. KernType is part of Method of Action, an online course to help programmers learn design.

Typeface:ARS Maquette Pro

How does KernType work? The user is presented with ten consecutive words with kerning mistakes. The goal of the game is to achieve pleasant and readable text by moving the letters within each word, until the space between the letters is judiciously distributed. This can be done with either the cursor or the left and right arrow buttons, but the website can also be opened on the iPad for a multi-touch experience. Each time the solution is compared to a typographer's solution. The score depends on how close you nailed it. Neat detail: as the game looks at both the absolute and relative position of the letters, a single kerning mistake has less impact on the score if all the other letters are correctly positioned in relation to each other.

The ten words are each set in a different typeface, and each design presents the user with very specific problems. The very heavy outstrokes in FF Zine Slab Black Italic intrude in each consecutive letter's white space; the top of Rotis Semi Serif Bold has serifs while the bottom of its letters don't; what influence does the loose spacing of Sabon Small Caps have; the long swashy tail of the Baskerville Italic capital Q extends under the next letters; how much do the hairline serifs of Linotype Didot Regular play a role in the kerning? Other typefaces featured in KernType are Gotham Black, Adobe Garamond Regular, Frutiger 55, FF Meta Black, and Syntax Regular.

Typeface:FF Spinoza

Method of Action – which still is in its early stages – is a project by interaction designer Mark MacKay. It is inspired by the actual mechanics of design education: students submit their work to someone with more experience (usually the teacher), who goes around asking for opinions and commenting himself. The basic premise is to replicate this experience online. Some exercises will involve actual human reviewers, but others (such as KernType) will be automated.

Mark MacKay grew up and studied Information Design in Mexico, where he developed his interest in typography.

Mexico is a very colourful country with lots of delicious manual lettering, so rational typefaces such as Frutiger were actually fresh and new to me. I guess the opposite might happen in Germany, youngsters might fall in love with hand lettering.

When I went to university I had a scholarship which required me to work a couple of hours per day in the wayfinding and signage shop. When I had to install new signage I always struggled getting the 3M vinyl off the transfer sheet, so often I'd have to grab the letters one by one and kern them by eye. The first couple of times my supervisors would notice, but eventually I became proficient enough that it looked a lot like what came out of the plotter.

The idea for KernType generated some months ago when Mark had a conversation with a friend from work.

My friend is an awesome programmer but terrible at design. He told me the usual story that all design is subjective, and that it obeys the whims of fashion. I countered that design is not subjective, it's just that a visual problem has multiple solutions, some better than others. "So how do I know my solution is the best one?" he asked. And that's when it dawned to me: there are certain types of design problems that are very systematic, but to excel you still need some good judgement. So you compare it with someone with more experience and boom, you get a kerning game.

Header image:Typeface: FF Tundra