カーニングとトラッキングの違い｜文字詰めの基本と設定方法

公開日：2023-07-01（2026-09-14 更新）

「カーニング」と「トラッキング」、どちらも文字の間隔を調整する機能ですが、その違いを正確に説明できるでしょうか。文字組みを美しく仕上げるためには、この2つの機能を正しく使い分けることが欠かせません。本記事では、カーニングとトラッキングの違い、Illustrator・Photoshopでの設定方法、CSSでの実装方法を解説します。

カーニングとトラッキングの違いとは

カーニングは「隣り合う2つの文字の間隔」を個別に調整する機能で、トラッキングは「選択した範囲全体の文字間隔」を均等に調整する機能とされています。似たような機能に見えますが、調整する対象の範囲が異なる点が大きな違いです。

この2つの機能を組み合わせて行う作業は「文字組み」と呼ばれます。何も手を加えていない「ベタ組み」の状態は文字間のバランスが悪く、読みにくく見えてしまうことが多いため、デザイナーはカーニングとトラッキングを使い分けながら、文字を美しく、また読みやすく調整していきます。

特にロゴやタイトルのように、少ない文字数を大きく見せるデザインでは、文字同士の間隔のわずかな差が仕上がりの印象を大きく左右します。逆に、長い文章を読みやすく見せたい場合は、一文字ずつの調整よりも、全体を通した均一な間隔の方が重要になります。このように、扱う文字数や目的によってカーニングとトラッキングのどちらを優先すべきかが変わってくる点を理解しておくことが、文字組みの第一歩といえるでしょう。

カーニングとは

カーニングとは、隣り合う2つの文字の組み合わせごとに間隔を個別に調整する機能とされています。同じフォント・同じサイズであっても、文字の形状によっては組み合わせによって間隔が不自然に広く（または狭く）見えてしまうことがあります。

例えば、アルファベットの「A」と「V」のように、斜めの線を持つ文字同士が並ぶと、間隔が空きすぎているように見えることがあります。こうした特定の文字ペアの見た目のバランスを個別に整えるのがカーニングの役割です。日本語であっても、約物（句読点やカギ括弧など）と文字が隣り合う箇所で間隔の調整が必要になる場面があるとされています。

見出しやロゴ、タイトルなど、少ない文字数を美しく見せたい場面で特に重要になる調整といえるでしょう。

カーニングの調整は、文字のフォルム（形）に対する感覚が求められる作業でもあります。同じ間隔の数値であっても、文字の組み合わせによって見た目の印象は異なるため、実際に画面上で確認しながら微調整を繰り返すことが基本になります。最初のうちは違いがわかりにくいかもしれませんが、意識して見比べる習慣をつけることで、少しずつ「間隔の違和感」に気づけるようになっていくとされています。

トラッキング（字送り）とは

トラッキングとは、選択したテキスト全体に対して均等にアキを調整する機能のことです。日本語では「字送り」と呼ばれています。

カーニングが文字ペアごとの個別調整であるのに対し、トラッキングは選択範囲全体に同じ量の間隔を一律に加える（または詰める）点が特徴です。見出しの一文字一文字を個別に調整するというよりも、段落やブロック単位でまとまった読みやすさ・見た目の印象を整えたい場合に使われることが多いとされています。

例えば、長めのキャッチコピーや説明文を配置する際、文字がぎゅっと詰まって窮屈に見える場合はトラッキングの数値を少し広げることで、全体の印象がゆったりと読みやすくなることがあります。逆に、限られたスペースに文章を収めたい場合は、トラッキングを狭めることで文字数を調整できる場合もあります。個々の文字の形状を意識するカーニングとは異なり、トラッキングはレイアウト全体のバランスを整える道具として使われる場面が多いといえるでしょう。

カーニングとトラッキングの比較表

カーニングとトラッキングの違いを整理すると、以下のようになります。

実務での使い分けの目安としては、タイトルやロゴなど目立つ箇所で特定の文字の間隔が気になる場合はカーニングで個別調整を行い、長文の段落全体の印象を整えたい場合はトラッキングで一律に調整する、という考え方が基本になります。両方を組み合わせて使うことも多く、まずトラッキングで全体のバランスを整えたうえで、気になる箇所だけカーニングで微調整する、という進め方もよく用いられるとされています。

初心者のうちは、この2つの機能を混同してしまい、「なぜか思い通りの見た目にならない」と感じることも少なくありません。そうした場合は、まず調整したい範囲がテキスト全体なのか、それとも特定の1箇所（文字と文字の間）なのかを意識するだけでも、どちらの機能を使うべきかを判断しやすくなります。慣れてくると、画面を見ただけでどちらの調整が必要かを直感的に判断できるようになるとされています。

Illustrator・Photoshopでの設定方法

Illustrator・Photoshopの文字パネルでは、カーニング・トラッキングともに数値で調整します。デフォルトの数値は「0」で、文字パネル上では「-100」〜「200」までの範囲でプルダウンから選択できるとされています。数値が大きくなるほどアキが広がり、小さくなる（マイナスになる）ほど間隔が詰まります。手入力すればプルダウンにない細かい数値や、より大きな・小さな数値を指定することも可能です。

文字パネル上の数値調整に加えて、自動的にカーニングを適用してくれる機能が用意されている場合もあるとされています。まずはこうした自動調整を活用したうえで、気になる箇所だけ手動で追加調整する、という進め方も実務ではよく行われています。数値の正確な仕様は使用しているソフトのバージョンによって異なる場合があるため、詳細は各ソフトの公式ヘルプで確認することをおすすめします。

作業を効率化するショートカットも用意されているとされています。Macの場合、テキストの上で1回クリックしたうえで「command + a」を押すと文章全体を選択でき、この状態で「option + 矢印（← / →）」（縦組みの場合は「↑ / ↓」）を押すとトラッキングの数値を変更できるとされています。一方、文字を選択せず、文字と文字の間にカーソルを置いた状態で同じショートカットを使うと、カーニングの調整になるとされています。

1回の操作で増減する数値は、Illustratorの場合は「環境設定→テキスト」からカスタマイズでき、Photoshopの場合は20刻みで増減するとされています。「option + 矢印」に「command」を同時に押すと、一度により大きな数値変化をつけることもできます。

数値を調整する際は、いきなり大きな値を入力するのではなく、少しずつ変化させながら画面上で見え方を確認していくのがおすすめです。特にカーニングは文字の組み合わせごとに最適な数値が異なるため、一律の数値を機械的に当てはめるのではなく、実際の見た目を確認しながら微調整を重ねる作業が欠かせません。慣れないうちは、比較的大きな文字サイズで作業し、間隔の違いを目で確認しやすい状態にしておくと調整がしやすくなります。

Webでの表現方法｜letter-spacingとfont-kerning

Web上でトラッキングに相当する表現をするには、CSSの「letter-spacing」プロパティを使用します。単位には「px」または「em」を使いますが、フォントサイズに応じて相対的に計算できるemの方が扱いやすいとされています。目安となる計算式は「デザインソフトのトラッキング数値 ÷ 1000（em）」とされており、例えばトラッキングの数値が「100」であれば「100 ÷ 1000 = 0.1em」となり、CSSでは「letter-spacing: 0.1em;」のように指定します。

一方、カーニングに相当するCSSプロパティが「font-kerning」です。値には「auto」（既定・ブラウザの判断に委ねる）、「normal」（カーニングを適用する）、「none」（カーニングを適用しない）があり、フォントに内蔵された文字ペアごとの間隔情報を活かすかどうかを制御できるとされています。letter-spacingが一律の間隔調整であるのに対し、font-kerningはフォント側が持つ個別の文字ペア情報を利用する点が異なります。

デザインソフト側の「カーニング／トラッキング」という概念が、Web実装では「font-kerning／letter-spacing」というそれぞれ別のCSSプロパティに対応している、と理解しておくと、デザインとコーディングの橋渡しがしやすくなるでしょう。

なお、font-kerningの効果は使用しているフォント自体にカーニング情報が組み込まれているかどうかに左右されます。フォントによってはカーニング情報が十分に用意されていない場合もあり、指定しても見た目にほとんど変化が出ないケースもあるとされています。一方letter-spacingは、フォントの種類にかかわらず一律に間隔を加減できるため、狙った見た目を再現しやすい点が特徴です。デザインカンプ通りの見た目をWeb上で再現したい場合は、両方のプロパティの特性を理解した上で、必要に応じて組み合わせて使うとよいでしょう。

まとめ｜タイポグラフィを体系的に学ぶなら

カーニングは隣り合う文字ペアの個別調整、トラッキングは選択範囲全体の均等調整という違いがあり、両者を適切に使い分けることで、文字組みの美しさと読みやすさを両立できます。Illustrator・Photoshopでの数値調整、CSSでのletter-spacing・font-kerningによる実装まで、目的に応じて使い分けていきましょう。デザインの現場だけでなく、Webサイトのコーディングに関わる方にとっても、両者の違いを理解しておくことは、デザインカンプの意図を正確に再現するうえで役立つ知識といえます。

こうしたタイポグラフィの基本は、独学だけでは体系的に身につけにくい部分でもあります。数値の目安やショートカットは覚えられても、「どのくらいの間隔が適切か」という感覚は、実際に多くの制作物を見比べ、手を動かしながら少しずつ養われていくものです。実際の制作物を通じて感覚を磨いていきたい方は、グラフィックデザイン系講座の詳細を確認してみることをおすすめします。