カーニングとトラッキングの教科書：文字間隔の調整・・・「神は細部に宿る」

カーニングとトラッキングの基本

まずは字間とは何かを確認したうえで、トラッキングとカーニングがそれぞれ何を調整するものなのかを押さえましょう。

字間とは:文字と文字の間の空き

字間とは、隣り合う文字と文字の間にある空きのことです。

パソコンで文字を入力しただけの、字間を何も調整していない状態を「ベタ打ち」や「ベタ組み」と呼びます。

フォントは1文字ずつ丁寧に設計されていますが、どの文字とどの文字が隣り合うかまでは、ベタ打ちの状態では見た目どおりに整うとは限りません。

そこで、数値上の等間隔ではなく、目で見て等間隔に感じられる字間に整えるのが、トラッキングとカーニングの役割です。

トラッキングとは:全体の字間をまとめて調整する

トラッキングとは、選んだ文字列全体の字間を、同じ量だけまとめて広げたり詰めたりする調整のことです。

字間の広さは文字の「密度」を変えるため、トラッキングだけで文章全体の雰囲気を大きく変えられます。

左のように字間を詰めると文字がひと固まりに見え、セールの告知のような力強さやスピード感が出ます。

右のように字間を広げると余白が増え、高級感や落ち着き、清潔感のある印象になります。

カーニングとは:特定の2文字の間を個別に調整する

カーニングとは、特定の2文字の組み合わせでできる不自然な隙間や詰まりを、その文字の間だけ個別に調整することです。

文字はそれぞれ形が違うため、同じ間隔で機械的に並べても、組み合わせによっては隙間が空いて見えるからです。

例えば「H」や「M」のように縦の線がまっすぐな文字は並べても間隔が安定しますが、「A」「V」「W」のように斜めの線がある文字や、「T」「L」「P」のように上下どちらかが大きく空いている文字は、隣の文字との間に大きな空白ができやすくなります。

※表示されるフォントや差の大きさは、閲覧している端末によって変わります

左のカーニングなしでは「AV」「TA」「To」の間が空いて、単語の途中に穴があいたように見えます。

右ではフォントに組み込まれたカーニング情報が使われ、斜めの線や「T」の横棒の下に隣の文字が少し入り込むことで、字間が均一に見えます。

特に、次のような組み合わせは隙間が目立ちやすいので重点的に確認しましょう。

• AV / VA / AW(斜めの線同士の間の空き)
• To / Te / Ty(「T」の横棒の下の空き)
• LT / LY / L’(「L」の右上の空き)

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

2つの違いは、調整する範囲が「全体」か「特定の2文字の間」かという点です。

項目	トラッキング	カーニング
調整する範囲	選んだ文字列全体	特定の2文字の間
主な目的	全体の密度や雰囲気を決める	部分的な隙間のムラをなくす
作業の順番	先に行う	後から仕上げとして行う
よく使う場面	見出し、キャッチコピー、本文全体	ロゴ、タイトル、大きく表示する短い文字

トラッキングは「集団全体の距離感」、カーニングは「隣の人との相性」を整える作業だと考えると覚えやすいでしょう。

まずトラッキングで全体の雰囲気を決め、そのあとカーニングで目立つ隙間を一つずつ直す、という順番が基本です。

カーニングとトラッキングのやり方

ここでは、どこを直せばよいかの見つけ方と、Illustrator・Figma・CSSでの具体的な設定方法を紹介します。

直すべき字間の見つけ方

字間の調整は数値で測るのではなく、文字と文字の間にある空白の面積が、どこも同じくらいに見えるように整えるのがコツです。

とはいえ慣れないうちは違和感に気づきにくいので、次の3つの見方を試してみてください。

• 逆さまにして見る
  文字を「意味」として読めなくすることで、形と空白のバランスだけに集中できます。
• 目を細めて見る
  細部がぼやけると、文字列全体の濃淡が見えてきます。
  一か所だけ白っぽく見えるところが、字間が空きすぎている場所です。
• 3文字ずつ見る
  「ABCDE」なら、まず「ABC」、次に「BCD」というように3文字ずつ区切ってバランスを比べると、ムラを見つけやすくなります。

Adobe Illustratorでの設定

Illustratorでは、「文字」パネルにあるカーニングとトラッキングの欄で字間を調整します(Photoshop・InDesignの文字パネルにも同じ項目があります)。

• トラッキング:「VA」の下に左右の矢印が付いたアイコンの欄です。
  文字を範囲選択してから数値を入れると、選んだ範囲全体の字間が変わります。
• カーニング:「V」と「A」の間に線が入ったアイコンの欄です。
  調整したい文字の間にカーソルを置いてから数値を入れると、その2文字の間だけが変わります。

どちらも単位は1/1000em(文字の大きさの1000分の1)で、1000を入れると全角1文字分の空きが加わります。

「em(エム)」は、今使っている文字の大きさ1個分を表す単位です。
たとえば20pxの文字なら1emは20pxなので、トラッキングに「100」(=0.1em)を入れると、字間が2pxずつ広がります。
pxのような決まった長さではなく、文字を大きくすれば空きも同じ割合で大きくなる「文字サイズに合わせて伸び縮みする目盛り」だと考えると分かりやすいでしょう。

カーニングの欄では、数値のほかに次の自動調整も選べます(Illustratorの初期設定は「和文等幅」です)。

設定	しくみ
和文等幅	和文は正方形の枠どおりに並べ、欧文にはフォントのカーニング情報を使う
メトリクス	フォントに組み込まれた文字ごとの幅や、特定の文字の組み合わせ用の調整値(ペアカーニング)を使って並べる
オプティカル	アドビ独自の計算で、隣り合う文字の形とサイズをもとに字間を自動調整する(主に欧文向け)

メトリクスは、フォントの作り手があらかじめ用意した「この組み合わせはこれだけ詰める」という調整値を使う設定です。
オプティカルは、フォントの調整値ではなく、ソフトが文字の形を見て字間を計算する設定です。

迷ったら、欧文はまずメトリクスを試しましょう。
カーニングの情報が少ないフォントや、異なる書体・サイズを混ぜた文字で字間が不ぞろいに見えるときは、オプティカルに切り替えて見比べてみてください。

キーボードで調整するときは、次のショートカットが便利です。

• カーニング:文字の間にカーソルを置いてOption(Mac)/Alt(Windows)+←/→
• トラッキング:文字を範囲選択して同じくOption/Alt+←/→

1回あたりの調整量は、環境設定の「テキスト」にある「トラッキング」の値で決まり、Command(Mac)/Ctrl(Windows)キーも一緒に押すと5倍の量で動きます。

詳しい仕様は、アドビ公式のAdobe Illustrator 文字組みの手引き(PDF)で確認できます。

Figmaでの設定

Figmaでは、テキストを選んだときに右側のパネルに表示される「Letter spacing」(文字間隔)で字間を調整します。

• トラッキング:テキスト全体を選んで「Letter spacing」に値を入れます。
  単位はパーセント(%)かピクセル(px)です。
• カーニング:Illustratorのように2文字の間を選んで数値を入れる専用の欄はありません。
  直したい文字だけを選択して「Letter spacing」を変えることで、部分的に字間を調整します。
  たとえば「AVATAR」の「A」と「V」の間を詰めたいときは、左側の「A」の1文字だけをドラッグして選び、Letter spacingをマイナスにします。
  Letter spacingは選んだ文字の右側の空きに効くので、「A」と右隣の「V」の間だけが詰まります。

キーボードでは、文字を選択してOption(Mac)/Alt(Windows)+</>で文字間隔を変えられます(キーボードの配列によっては、別のキーに割り当てられている場合があります)。

フォントに組み込まれたカーニングなどのOpenType機能(フォントが持つ追加の文字設定)は、文字設定メニューの「Details」タブで確認できます(Figmaヘルプ:OpenType機能(英語))。

CSSでの設定

Webページでは、CSS(Webページの見た目を指定する言語)の次のプロパティで字間を扱います。

• トラッキング:letter-spacingで、字間に追加する空きを指定します。
  文字サイズに合わせて変わるよう、0.05emのようにem単位で書くのが一般的です(MDN:letter-spacing)。
• カーニング:font-kerningで、フォントに組み込まれたカーニング情報を使うかどうかを指定します。
  初期値のautoはブラウザに判断を任せる設定で、normalにするとカーニング情報が適用されます(MDN:font-kerning)。

例えば、見出しのカーニングを有効にして少しだけ字間を詰めるには、次のように書きます。

.heading {
  font-kerning: normal;     /* フォントのカーニング情報を使う */
  letter-spacing: -0.02em;  /* 全体を少しだけ詰める */
}

Illustratorの1/1000em単位の値は、1000で割るとCSSのemの値になります(トラッキング「50」ならletter-spacing: 0.05em)。

ツールの使い分け

ツールごとに得意な調整が違うため、作るものに合わせて使い分けましょう。

ツール	向いている用途	字間調整の特徴
Illustrator	ロゴ、キャッチコピー、印刷物	2文字の間を数値で細かく調整しやすい
Figma	Webサイト・アプリのデザイン	Letter spacingで全体の字間を管理するのが中心
CSS	Webページの実装	全体の字間と、フォントのカーニング情報の活用が中心

日本語のカーニングとトラッキング

日本語の文字はアルファベットと作りが違うため、字間の詰め方にも日本語ならではのポイントがあります。

日本語は正方形の枠で作られている

日本語のフォントは、1文字ずつが「仮想ボディ」と呼ばれる同じ大きさの正方形の枠に収まるように作られています。

漢字は枠いっぱいに近い大きさですが、ひらがなやカタカナ、句読点やカッコは枠の中で小さめに収まっているため、ベタ打ちのままだとその周りがスカスカに見えがちです。

原稿用紙のマスに、1文字ずつハンコを押している様子をイメージすると分かりやすいでしょう。
「国」のような漢字はマスいっぱいに近い大きさで押されますが、「っ」や「、」はマスの中に小さく押されるので、そのまま並べると周りに使われていないマスの余白が残ります。
このマスをそのまま並べた状態が、記事の最初に紹介した「ベタ打ち」です。

そこで役立つのが、文字ごとの本来の幅に合わせて自動で字間を詰める「プロポーショナルメトリクス」という機能です。

Illustratorでは「OpenType」パネルの「プロポーショナルメトリクス」で有効にでき、CSSではfont-feature-settings: "palt";で同じ機能(OpenTypeの「palt」)を使えます(MDN:font-feature-settings)。

※paltの情報を持たないフォントで表示されている場合、左右の見た目は変わりません

左のベタ打ちではカッコや「ィ」の周りに余分な空きがありますが、右では文字ごとの幅に合わせて詰まり、ひとまとまりの言葉として読みやすくなっています。

なお、この機能はフォント側に「palt」の情報が入っている場合にだけ効きます。

プロポーショナルメトリクスは、ひと言でいえば「原稿用紙のマスの余分な余白を切り落として、文字の実際の幅に合わせて詰める」機能です。
CSSなら1行書くだけで、カギかっこや句読点の周りの空きが、手作業のカーニングなしでまとめて詰まります。
ただし、本文のような長い文章では詰まりすぎて読みにくく感じることもあるので、まずは見出しなど短い文字で試し、本文に使うときは見比べて判断しましょう。

和文と欧文で変わるトラッキングの目安

同じトラッキングの数値を入れても、アルファベットと日本語では見た目の変わり方が違います。

アルファベットは文字ごとの幅に合わせて並ぶため小さな数値でも印象が大きく変わり、日本語は正方形の枠の中に余白があるため、大きめの数値にしないと変化が分かりにくい傾向があります。
日本語には前の節で見た「原稿用紙のマス」の余白がもともとあるぶん、少し広げただけでは見た目が変わりにくいため、次の表では和文の数値を欧文の倍くらいにしています。

決まった正解はありませんが、筆者が使っている目安は次のとおりです(Illustratorの1/1000em単位)。

目的	欧文	和文	ポイント
高級感・ゆとりを出す	+50〜+100	+100〜+200	短い見出しやロゴ向け。欧文は大文字だけの単語で使うことが多い
本文	0(基本は調整しない)	0〜+50	大きく動かすと読みにくくなるので控えめに
力強い見出し	-20〜-40	-50〜-80	和文はプロポーショナルメトリクスと組み合わせると整えやすい

あくまで出発点として使い、最後は実際の見た目を目で確かめて調整してください。

実践のポイント

カーニングとトラッキングで陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 本文のような長い文章すべてに手動でカーニングをかけようとすると、膨大な作業になってしまいます。
  本文はフォントの自動カーニングやトラッキングに任せ、手動のカーニングはロゴや見出しなど目立つ短い文字に絞りましょう。
• トラッキングをかけすぎると、単語のまとまりが崩れて読みにくくなります。
  特に本文は、変えるとしてもわずかな量にとどめるのが基本です。
  文章を疲れずに読み続けられるか(可読性)の考え方は、視認性・可読性・判読性の違いの記事で解説しています。
• ロゴやタイトルをベタ打ちのまま仕上げると、字間の不ぞろいのせいで「なんとなく素人っぽい」印象になりがちです。
  大きく表示する文字ほど、最後にカーニングを確認しましょう。

よくある質問

• Q. カーニングとトラッキングはどちらを先にやればいい?
  A. 先にトラッキングで全体の字間を決め、そのあとカーニングで気になる箇所を直します。
  先にカーニングをしてからトラッキングを変えると、整えたバランスが崩れてやり直しになりやすいためです。
• Q. Webでも1文字ずつカーニングできる?
  A. 1文字ずつspanタグで囲んでletter-spacingを指定すれば可能ですが、文言を変えるたびに直す必要があり、管理が大変です。
  Webではfont-kerningやpaltでフォントの情報を活かし、全体の字間をletter-spacingで整えるのが現実的です。
• Q. 字間と行間はどう違う?
  A. 字間は横に並ぶ文字と文字の間、行間は上下に並ぶ行と行の間の空きです。
  行間の整え方は行間と行長のルールで解説しています。

まとめ

トラッキングは文字列全体の字間をまとめて調整して雰囲気を決めるもの、カーニングは特定の2文字の間を個別に調整して隙間のムラをなくすものです。

先にトラッキングで全体を整え、最後にカーニングで仕上げること、日本語ではプロポーショナルメトリクス(palt)を活用することが、字間を美しく整えるポイントです。

まずは自分が作ったロゴや見出しを1つ選び、逆さまにして眺めながら、空きすぎて見える文字の間がないか探してみてください。

身の回りのデザインの字間を観察して目を養う方法は、タイポグラフィの観察方法で紹介しています。

タイポグラフィそのものの考え方はタイポグラフィとはで、文字について学ぶ順番はデザイン初心者のためのタイポグラフィ学習ロードマップにまとめています。