Practice
Kerning Game
Practice kerning 10 common letter pairs. Drag the slider to adjust the space between the two letters, submit your answer, and get instant feedback on how close you came to the optimal kerning. The scoring is deterministic: the closer your kerning is to the designer-set optimal value, the higher your score.
Drag the slider to set the kerning (letter spacing) between the two letters. The goal is to make the gap look visually even. Submit when you are happy with the result.
- Kerning adjusts the space between two specific letters. Tracking adjusts the space between all letters.
- The goal is visual evenness, not mathematical evenness. The eye perceives space differently depending on the letter shapes.
- Pairs that slant toward each other (AV, YA, Ta) usually need negative kerning.
- Pairs with a straight edge next to a curve (Do, bo) may need slight negative kerning.
- Uppercase combinations almost always need kerning. Lowercase usually needs less.
What Is Kerning
Kerning is the adjustment of space between two specific letters to make the gap look visually even. It is different from tracking, which adjusts the space between all letters uniformly. Kerning targets individual pairs like AV, To, or We that would otherwise look too tight or too loose.
The goal of kerning is visual evenness, not mathematical evenness. The eye perceives space differently depending on the letter shapes. Two letters with slanted sides (like A and V) create a large apparent gap even when the physical distance between them is the same as between two straight-sided letters (like H and I). Kerning closes that apparent gap.
Most fonts include a kerning table that tells the browser which pairs to tighten or loosen. CSS exposes this through the font-kerning property. The OpenType kern feature also controls it. For manual kerning in CSS, use letter-spacing with a negative value.