Free

Free coded apps to suit all. No sign up, no email, usable offline, updates when I can, feedback welcome. Send feedback

Thinking

What is kerning, and how do you do it?

Kerning adjusts the space between particular letter pairs, such as AV. Font by Zaweba auto-kerns common pairs and lets you set and lock your own values.

What is kerning, and how do you do it?

Kerning is the adjustment of space between two particular letters so they look as evenly spaced as the rest of the text. Without it, pairs like AV, To and LT leave awkward gaps, because their shapes don't fill their sides. Font by Zaweba auto-kerns common problem pairs and gives you a pair editor to set, adjust and lock your own.

Here's what kerning is, why it's needed and how to do it.

Spacing versus kerning

Every letter in a font carries a set amount of space on its left and right, called its sidebearings. That's spacing, and it applies wherever the letter appears. Good spacing makes most combinations look even.

Some combinations can't be fixed by spacing alone. Take A followed by V. The two diagonals lean away from each other at the bottom and towards each other at the top, leaving a big triangle of white space between them. Reduce the sidebearings of A and V to fix that, and every other pair involving those letters becomes too tight. Kerning solves it by changing the space for that one pair only.

Why kerning matters

Readers don't notice good kerning. They notice bad kerning, especially in headings and logos, where letters are large and gaps become obvious. A word like "WAVE" in capitals, or "Today" at the start of a heading, can look broken without it. In a business name or a poster title, one badly kerned pair can make the whole thing look amateur.

How Font by Zaweba does it

Font auto-kerns common problem pairs. AV, To, LT and pairs with P are typical examples. The auto-kerning runs again after every change in the style stack, so when you make the letters heavier, wider or slanted, the kerning follows.

When you want a different result, use the pair editor. Type the two letters, then drag them closer or further apart, or enter a value. When the pair looks right, lock it. A locked pair keeps your setting even when you later change the weight or width. If you'd like Font to take over again, set the pair back to auto.

The spacing sliders sit alongside the editor: straight, round, diagonal and open sides, extra room for capitals, overall letter spacing and word space. Use them for patterns across the alphabet and the pair editor for exceptions.

Doing it well

Kern last. Finish the style and the general spacing first; otherwise you'll redo the work.

Look at the space, not the letters. Try squinting at a word, or turning it upside down in your head. You're aiming for the white areas between letters to look roughly equal.

Kern what you'll use. A font has thousands of possible pairs, and nobody kerns them all. Concentrate on capitals followed by lowercase, all capital headings, and the particular words the font is for.

Check at several sizes in the live preview. Kerning that looks right at 200 may be slightly too tight at 12.

Lock the pairs you care about, so they survive later tweaks, and save the project as a .zfont file so your work is kept.

The short version

Spacing is the general space around each letter; kerning fixes the few pairs that spacing can't. Font by Zaweba handles the common cases for you, and the pair editor lets you make the final calls yourself.