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

カーニングの歴史は活版印刷の時代にまで遡ります。金属活字では文字の突出部分 (カーン) を隣の活字の上に重ねることで間隔を調整していました。デジタルフォントでは、文字ペアごとの調整値がフォントファイル内に格納されています。格納先は 2 通りあり、古くからある kern テーブルと、OpenType の GPOS テーブルに置かれる kern フィーチャーです。CFF (PostScript) アウトラインを持つ OpenType フォントは仕様上 kern テーブルを使えず、カーニングは GPOS で提供する必要があります。そのため、kern テーブルが見つからないことを根拠に「このフォントはカーニング情報を持たない」と判断すると読み違えます。高品質なフォントほど多くのカーニングペアが定義されており、数千ペアに及ぶこともあります。

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

日本語テキストでは、句読点や括弧の前後にアキ (空き) を調整する「ツメ組み」がカーニングに相当します。日本語の句読点や括弧は全角幅の中に配置されるため、そのまま並べると余白が目立ちます。OpenType フォントの palt (Proportional Alternate Widths) 機能を使うと、全角幅で設計されたグリフを字形に応じた幅へ置き直せます。CSS では font-feature-settings: "palt" で有効化できます。ただし palt の対象は句読点や括弧だけではありません。仕様上は全角幅で設計されたラテン文字・漢字・仮名・記号のすべてが対象で、しかもグリフを別の字形に差し替えるのではなく (差し替えは pwid の役割)、送り幅だけを付け替える仕組みです。つまり palt を有効にすると本文全体の字送りが変わり、全角 1 文字 = 1em という前提で組んだレイアウトの見積もりが崩れます。見出しだけに限定して掛けるか、本文にも掛けたうえで幅の見積もりをやり直すか、どちらかを決めてから適用してください。

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

font-kerning の初期値は auto で、これはカーニングを使うかどうかをブラウザが決めるという意味です。実装によっては小さな文字サイズでカーニングを無効にすることがあり、詰めすぎて可読性が落ちるのを避ける判断としてそうなっています。「Web フォントを読み込めばカーニングは必ず効く」とは言えないわけです。デザイン上どうしても効かせたい箇所には normal を明示し、逆に表示幅を環境間でそろえたい箇所 (文字数から表示幅を逆算する UI など) では none を明示して、ブラウザ任せにしないほうが再現性が上がります。

文字数カウントの観点では、カーニングは文字数自体には影響しませんが、同じ文字数のテキストでも視覚的な幅が変わります。たとえば「WAVE」と「MINI」はどちらも 4 文字ですが、表示幅は一致しません。ただしこの差の大部分は各文字が持つ固有の送り幅の違いによるもので、カーニングはそこにペア単位の増減を上乗せしているだけです。プロポーショナルフォントでは文字数と表示幅が比例しない、という前提のほうが本質です。固定幅のレイアウト (バナー広告やボタン、OG 画像など) にテキストを収めるなら、文字数で上限を決めるのではなく表示幅そのものを測るのが確実です。ブラウザでは Canvas 2D の measureText で同じフォント指定のまま幅を得られ、描画済みの要素であれば getBoundingClientRect で実寸を読めます。文字数の上限は入力欄の目安に留め、はみ出しの判定は幅で行う、という切り分けにしておくと崩れにくくなります。