カーニング

隣接する文字間の間隔を調整する技法。文字の組み合わせに応じて視覚的に均等な間隔を実現する。

カーニングとは、隣接する文字間の間隔を個別に調整するタイポグラフィの技法です。文字にはそれぞれ固有の形状があり、機械的に等間隔で並べると視覚的に不均等に見える組み合わせが生じます。たとえば「AV」「To」「WA」のようなペアでは、デフォルトの間隔だと文字間が広く見えるため、間隔を詰めて視覚的なバランスを整えます。

カーニングの歴史は活版印刷の時代にまで遡ります。金属活字では文字の突出部分 (カーン) を隣の活字の上に重ねることで間隔を調整していました。デジタルフォントでは、フォントファイル内にカーニングテーブル (kern テーブル) として文字ペアごとの調整値が格納されています。高品質なフォントほど多くのカーニングペアが定義されており、プロフェッショナルなフォントでは数千ペアに及ぶこともあります。タイポグラフィ実践の書籍でカーニングの原則を学べます。

CSS では font-kerning プロパティでフォント内蔵のカーニング情報を制御できます。値は auto (ブラウザ判断)、normal (有効)、none (無効) の 3 つです。一方、letter-spacing プロパティは全文字に一律の間隔を追加するもので、カーニングとは異なる概念です。カーニングは特定の文字ペアに対する個別調整であるのに対し、letter-spacing は全体的な文字間隔の調整です。

日本語テキストでは、句読点や括弧の前後にアキ (空き) を調整する「ツメ組み」がカーニングに相当します。日本語の句読点や括弧は全角幅の中に配置されるため、そのまま並べると余白が目立ちます。OpenType フォントの palt (Proportional Alternate Widths) 機能を使うと、これらの文字の前後のアキを自動的に詰めることができます。CSS では font-feature-settings: "palt" で有効化できます。

カーニングとトラッキングはよく混同されますが、別の概念です。カーニングは特定の文字ペア間の間隔調整であるのに対し、トラッキングは選択したテキスト全体の文字間隔を均一に調整する操作です。見出しでは文字間を広げるトラッキングが効果的な場合があり、本文ではカーニングによる微調整が読みやすさに貢献します。Web フォント最適化の書籍ではカーニングとパフォーマンスのバランスが解説されています。

Web フォントではカーニングがデフォルトで有効な場合が多いですが、大量のテキストを表示するページではパフォーマンスへの影響を考慮して無効にすることもあります。特にモバイル環境では、カーニング処理がレンダリング速度に影響する場合があります。

文字数カウントの観点では、カーニングは文字数自体には影響しませんが、同じ文字数のテキストでも視覚的な幅が変わります。たとえば「WAVE」と「MINI」は同じ 4 文字ですが、カーニング適用後の表示幅は異なります。固定幅のレイアウト (バナー広告やボタンなど) にテキストを収める際には、文字数だけでなくカーニング後の実際の表示幅も考慮する必要があります。