커닝
시각적 조화를 위해 특정 문자 쌍(예: AV, To, LT) 사이의 간격을 조정하는 것. 유니코드 개념이 아닌 폰트 기능이지만 유니코드 텍스트 렌더링에 영향을 줍니다.
What is Kerning?
Kerning is the typographic process of adjusting the horizontal spacing between specific pairs of characters to achieve visually consistent spacing. Unlike tracking (which adjusts spacing uniformly across all characters) or word spacing, kerning is targeted — it corrects for the optical illusion that certain character combinations appear to have more or less space between them than they actually do.
The classic example is "AV": the diagonal strokes of A and V create a large visual gap when they sit at their default spacing, even though no extra space was added. Kerning pulls them closer together so the gap looks similar to the spacing between, say, "nn."
Why Kerning is Necessary
Characters are designed in isolation but read in combination. A letter's bounding box (the rectangle enclosing its glyph) doesn't account for the white space created by its specific shape. Pairs that frequently require kerning include:
| Pair | Problem | Solution |
|---|---|---|
| AV | A's right diagonal + V's left diagonal create gap | Reduce space |
| To | T's horizontal arm overhangs lowercase letters | Reduce space |
| LT | L's wide base + T's serif/stem create gap | Reduce space |
| ff | f hooks can collide | Increase or use ligature |
| r. | r's arm leaves gap before period | Reduce space |
Font Kerning Tables
Professional fonts include kern tables (or the more modern GPOS table in OpenType) that specify adjustments for hundreds or thousands of character pairs. A typical professional typeface might contain 5,000–20,000 kern pairs.
The adjustment is measured in font units (usually 1/1000 or 1/2048 of an em). Negative values bring characters closer; positive values push them apart.
Kerning vs. Tracking vs. Leading
| Term | Scope | Purpose |
|---|---|---|
| Kerning | Between specific character pairs | Correct optical unevenness |
| Tracking (letter-spacing) | Uniform across all characters | Stylistic spacing adjustment |
| Word spacing | Between words | Justify text, improve readability |
| Leading (line-height) | Between lines | Vertical rhythm and readability |
Kerning in Practice
CSS provides two mechanisms:
/* Enable font's built-in kerning tables (recommended) */
p {
font-kerning: normal; /* default in modern browsers */
}
/* Disable kerning */
p {
font-kerning: none;
}
/* Manual letter-spacing (tracking, not true kerning) */
h1 {
letter-spacing: 0.05em;
}
Manual kerning in design tools like Adobe Illustrator or InDesign: place the cursor between two characters, then use Alt/Option + Arrow keys to adjust. InDesign shows the kern value in the Character panel.
Optical vs. Metric Kerning
Most professional design software offers two kerning modes: - Metric kerning: uses the kern pairs built into the font file (fastest, most consistent) - Optical kerning: software analyzes the actual glyph shapes and calculates spacing algorithmically (better for fonts with sparse kern tables, especially display sizes)
Quick Facts
| Property | Value |
|---|---|
| Definition | Spacing adjustment between specific character pairs |
| Measured in | Font units (per-em fractions) or points |
| OpenType table | GPOS (newer), kern (legacy) |
| CSS property | font-kerning: normal / none / auto |
| Common bad kern pairs | AV, AW, AT, WA, To, Tr, Ta, Ve, Vo, LT, PA |
| Design tool shortcut (Mac) | Option + Left/Right Arrow |
| Design tool shortcut (Win) | Alt + Left/Right Arrow |
관련 용어
타이포그래피의 더 많은 용어
CSS @font-face descriptor specifying which Unicode code points a font should cover. …
Em: 폰트 크기와 같은 너비. En: Em의 절반. 엠 대시 너비, 엠 …
The mechanism by which a rendering engine substitutes glyphs from a secondary …
Modern font format developed by Microsoft and Adobe supporting up to 65,535 …
문자가 오른쪽에서 왼쪽으로 흐르는 텍스트 방향. 아랍어, 히브리어, 타아나 문자 등에서 사용되며, …
Fonts downloaded by the browser to render text, declared via CSS @font-face. …
앞의 기본 문자에 붙어 수정하는 문자. 일반 범주: Mn(비공백), Mc(공백 결합), Me(둘러싸기). …
가로 또는 세로 공간을 표현하지만 눈에 보이는 글리프가 없는 문자. 유니코드는 서로 …
폰트가 렌더링하는 문자의 시각적 표현. 하나의 문자가 여러 글리프를 가질 수 있고(합자, …
전진 너비가 0인 문자 — 렌더링에서 보이지 않지만 텍스트 동작에 영향을 줍니다. …