커닝 (Kerning)

Kerning is the adjustment of space between specific pairs of letters to create optically consistent spacing. Even when a typeface has well-calibrated general spacing, certain letter combinations create visual gaps or collisions that require correction — the classic examples are 'AV', 'To', 'We', 'Ty', where the shapes of adjacent letters create unequal perceived spacing.

The reason kerning exists at all is geometric: typography is a two-dimensional art trying to simulate evenly distributed space in a medium where letters have wildly different shapes. When a 'T' sits next to an 'o', the overhang of the T's crossbar creates a visual cavity that makes the letters appear further apart than they are. Kerning closes that gap so the pair feels consistent with the surrounding letter spacing.

Modern fonts ship with kern tables — lists of pair-specific adjustments built in by the type designer. This is called metric kerning, and browsers apply it by default. Optical kerning is an alternative where the rendering engine analyzes shapes and calculates adjustments algorithmically, regardless of the font's built-in data.

/* Metric kerning (default) — uses the font's built-in kern tables */
h1 {
  font-kerning: normal; /* This is the browser default */
}

/* Disable kerning — useful for monospaced contexts or specific effects */
.no-kern {
  font-kerning: none;
}

/* Optical kerning isn't a CSS property — it's handled by the font renderer.
   However, you can enable additional OpenType kerning features: */
.enhanced-kerning {
  font-kerning: normal;
  font-feature-settings: "kern" 1; /* Explicitly enable kern feature */
}

/* For logos and display text, manual CSS letter-spacing tweaks per element */
.logo-text {
  letter-spacing: -0.03em; /* Global adjustment — not pair-specific */
}

It's important to distinguish kerning from tracking. Kerning is surgical — a specific adjustment between two specific characters. Tracking (letter-spacing in CSS) is uniform — every character gets the same adjustment. CSS's letter-spacing property is tracking, not kerning. True pair-level kerning comes from the font's kern table data, which browsers apply automatically.

When working with display text, logos, and large headlines, manually reviewing kerning matters enormously. Even high-quality fonts like Playfair Display or Libre Baskerville may need visual inspection at very large sizes where imperfections become apparent. At body text sizes, the built-in kern tables handle everything well and manual intervention is rarely needed.