kerning type

Kerning is the process of adjusting the spacing between characters in a proportional font, usually to achieve a visually pleasing result. Kerning adjusts the space between individual letter forms, while tracking (letter-spacing) adjusts spacing uniformly over a range of characters. In a well-kerned font, the two-dimensional blank spaces between each pair of characters all have a visually similar area.

Kerning is a typesetting word from the old world of printing – it’s the spacing between letters or characters in a piece of text to be printed. In web language, we’d say letter-spacing. But that doesn’t necessarily mean between individual letters. It usually means all letters equally the same.

Kerning is a typographic nuance usually unnoticed by readers.

It’s invisible just as no one notices a fast website. They only notice slow sites. People don’t notice good character kerning.

The reader knows when it’s “not right” but can’t tell when it “is right.” Transparency.

There are a couple of special characters: the “en dash” and
“apostrophe”. Small obsessive typography details I can’t let go of. I mention them only because most people never notice those consciously.

Watch the reverse type. It is not really “white”. It’s #dbdbdb on
#1c1c1c. This improves readability drastically onscreen. Try it and
compare to white-on-black for small type. Another subtly. Don’t use it on your navigation. You need pure white contrast there because the gradient background isn’t “solid color”.

Serif is usually a screen default – it was defaulted-in for browsers for the wrong reasons way back decades ago. There was a reason but it proved to be a bad choice with time. It’s not nearly as screen-readable as sans serif faces like the ubiquitous Verdana and Arial. Those fonts have interesting stories and histories but I won’t go into it now. I’m not anti-serif. It just needs to be used properly and in the right places. Some other day I’ll deliberate on all this “web typography”. I’ve used Verdana here, a Humanist font. The fallback stack would be Verdana, Arial, Helvetica, then sans serif. (That is not the ideal stack.) Verdana is on 99% of browsers. Linux not so good but still high 67%. And iOS 100%. Bonus.

There rarely is a benefit from images with baked-in built-type. I’ve learned that the hard way after spending too much of my work life in Photoshop building headlines. – a letter-spacing game.

Kern each letter individually. Yes, seriously.

Sure, Illustrator, Photoshop, InDesign – they all have automatic kerning settings. So why bother to manually adjust the spaces between letters one by one? There is no denying the fact that the human eye is a better judge than a computer’s mind. After all, actual human beings will be looking at your design, not computers. So it is more important to consider what humans will see instead of what computers think.

Yes, it’s hard work, but it’s going to get better as you get used to this practice. After all, when you end up with a huge kerning disaster, you can’t blame Illustrator, Photoshop, or InDesign for it. It’s all going to come down to what you did, instead of what those programs failed to see.

Return to Top ▲Return to Top ▲