Kerning is the process of adjusting the space between two specific characters in a proportional font. Unlike tracking (which adjusts spacing uniformly across a range of text), kerning targets individual character pairs to achieve visually balanced spacing. For example, the letters "A" and "V" naturally create a wedge-shaped gap when placed side by side — kerning reduces this gap so the spacing looks consistent with other letter pairs.

Kerning adjusts the space between two specific characters (a "kerning pair"), while tracking (also called letter-spacing) applies uniform spacing across a whole word or block of text. Think of kerning as a scalpel — precise, pair-specific adjustments — and tracking as a broad brush that affects every character equally. In CSS, kerning is controlled via font-kerning, while tracking is controlled via letter-spacing.

The CSS font-kerning property accepts three values: auto (browser decides), normal (use the font's kerning data), and none (disable kerning entirely). Modern browsers default to auto, which typically enables kerning for fonts that include OpenType kerning tables. You can also use font-feature-settings: "kern" 1 for finer control in OpenType fonts. Our tool lets you toggle between normal and none to visualize the difference.

Kerning quality depends on the font designer's work. Professional typefaces (like Georgia, Helvetica, or Garamond) often include hundreds or even thousands of hand-tuned kerning pairs built into the OpenType kern table. Free or hastily-made fonts may have few or no kerning pairs, resulting in awkward spacing in combinations like "AV", "To", or "WA". System fonts like Georgia and Arial generally have excellent kerning data.

The most common kerning pairs typically involve characters with slanted or open shapes: AV, AT, AW, AY, VA, WA, To, Te, Ty, Ye, Yo, LT, LV, LY, PA, Ta, We, Wi, Wo, fi, fl, ff. These combinations create visually awkward gaps that need correction. Uppercase-uppercase pairs (like AV) and uppercase-lowercase pairs (like To) are the most frequent candidates. Explore our preset tags above to see these in action.

Use this tool! Enter common kerning pairs like AV, To, or WA and toggle between Kerning ON and OFF. If you see a noticeable difference — especially the gap shrinking when kerning is ON — the font has active kerning data. You can also inspect a font's OpenType features using tools like FontDrop or FontForge to check the number of kerning pairs defined in the GPOS table.

Yes! While CSS doesn't allow editing a font's internal kerning table, you can simulate manual kerning using letter-spacing on specific character pairs wrapped in <span> tags. For fine-tuning logos or headings, designers often wrap problematic letter pairs and apply custom letter-spacing values. Use our Custom Letter-Spacing slider above to experiment with this technique.

The font-kerning property is supported in all modern browsers, including Chrome 33+, Firefox 34+, Safari 9+, and Edge 79+. It has excellent global coverage (over 96% of users). For older browsers, you can use the OpenType feature syntax font-feature-settings: "kern" 1 as a fallback, though this is rarely needed today.

No. Kerning only affects character pairs that are explicitly defined in the font's kerning table. Most character combinations have zero kerning (no adjustment needed). A quality font may define 500–3,000+ kerning pairs out of tens of thousands of possible two-character combinations. Pairs like "HH", "OO", or "nn" rarely need kerning because their vertical stems create naturally consistent spacing.

Font designers use specialized software (like Glyphs, FontLab, or RoboFont) to visually assess each potential kerning pair and manually set adjustment values in font units (often 1/1000 of an em). This is painstaking work — a typeface with 500 glyphs has 250,000 potential pairs, though most designers focus on the few thousand most common combinations. The kerning data is stored in the font's GPOS (Glyph Positioning) OpenType table.

A classic example is the word "CLICK" — without proper kerning, the "C" and "L" can appear too close while "L" and "I" may have an awkward gap. Another infamous case: when "fl" in "flag" has no kerning, the 'f' overhang crashes into the 'l'. These issues are especially visible in large headings and logos. Always check kerning at display sizes (like 72px+), where spacing problems become obvious.

Absolutely. While body text at 14–18px may not show kerning issues dramatically, headings, logos, hero text, and display typography at 32px+ can reveal awkward spacing that undermines a polished design. With the rise of variable fonts and high-quality web typography (via Google Fonts, Adobe Fonts, etc.), enabling kerning via font-kerning: normal is a one-line CSS improvement that costs nothing but makes a visible difference.