タイポグラフィ

カーニング

視覚的な調和のために特定の文字ペア(例:AV・To・LT)間のスペーシングを調整すること。Unicodeの概念ではなくフォント機能ですが、Unicodeテキストのレンダリングに影響します。

· Updated

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 unicode-range

CSS @font-face descriptor specifying which Unicode code points a font should cover. …

Em / En(タイポグラフィ単位)

Em:フォントサイズと等しい幅。En:Emの半分。エムダッシュ幅・エムスペース・エンスペース・CSSユニット(1em・0.5em)の定義に使われます。

Font Fallback

The mechanism by which a rendering engine substitutes glyphs from a secondary …

OpenType

Modern font format developed by Microsoft and Adobe supporting up to 65,535 …

RTL(右から左)

文字が右から左に流れるテキスト方向。アラビア語・ヘブライ語・ターナ文字などで使われ、正しい表示のために双方向アルゴリズムが必要です。

Web Fonts

Fonts downloaded by the browser to render text, declared via CSS @font-face. …

グリフ

フォントによってレンダリングされる文字の視覚的表現。1つの文字が複数のグリフを持つ場合があり(合字・文脈形態)、1つのグリフが複数の文字を表す場合もあります。

スモールキャップス

小文字の高さの大文字字形。CSS:font-variant: small-caps。Unicodeにはラテン拡張(ᴀ〜ᴢ)に実際のスモールキャップス文字があります。

ゼロ幅文字

前進幅がゼロの文字 — レンダリングでは見えませんがテキスト動作に影響します。ZWSP(単語区切り)・ZWJ(結合)・ZWNJ(結合防止)・WJ(改行防止)などがあります。

ダッシュ

文の一部を区切ったり範囲を示したりする句読記号。Unicodeはハイフン(‐)・エンダッシュ(–)・エムダッシュ(—)・図表ダッシュ(‒)などを定義しています。