この文字間や行間、どっちが正解？文字の余白のセンスを磨いておこう

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

先ほど、文字の間隔を調整するのに「トラッキング」という機能を使ったと言いました。

第一回のクイズチャレンジで「カーニング」ということばが出てきましたが、このトラッキングは、カーニングとセットで使われやすいことばです。

参考：この文字詰め、どっちが正解？文字間調整（カーニング）のセンスを磨いておこう


「カーニング」「トラッキング」、どちらも文字の間隔を調整することを指しますが、以下のように違いがあります。

• カーニング・・・文字と文字の間の余白を個別に調整する
• トラッキング・・・文章や段落の「全体の文字の間隔」を調整する

IllustratorやPhotoshopの「文字」パネルでは、この二つを変更できるようになっています。

このようにIllustratorやPhotoshopは、文字の間隔を細かく調整できるのが強み。

妥協のない仕上がりを追求する、プロの仕事を支えてくれる重要な機能です。

行間と行送りって何が違うの？

先ほど、行の間の余白について、行間と行送り、二つのことばを使いました。

実はこの二つのことばには、以下のような明確な違いがあります。

• 行間・・・行と行の間のこと
• 行送り・・・一行目の上端から二行目の上端までのこと

IllustratorやPhotoshopで設定できるのは「行送り」で、文字パネルから変更します。

また、IllustratorやPhotoshopでは、行送りを変更するときに数値入力だけでなく四則演算も使えるので便利です。

例えば、文字サイズの150％の行送りにしたい場合、「文字サイズ」「*（アスタリスク）」「1.5」と入力して、Macは「return」、WIndowsは「Enter」を押せば計算された結果が入力されます。

（「*」は掛け算、「+」は足し算、「-」は引き算、「/」は割り算になります）

こういったかゆいところに手が届く仕様になっているのが、IllustratorやPhotoshopが選ばれる理由ともいえます。

ちなみに、読みやすい行送りには目安があり、文字サイズの150%〜200％といわれています。
しかしこの目安は、フォントの種類や大きさ、テキストの内容や量によって変わってきますので、あくまで目安として覚えておくとよいでしょう。

行送りだけでなく行長にも注目しよう

読みやすい文章をデザインするうえでは「行長（ぎょうちょう）」の調整も重要です。

行長とは「一行の長さ」で、段落テキストの横幅や文字数のことを指します。

例えばとても長い文章を、A4サイズの紙に左から右までびっしり入れてしまうと以下のような問題が起きてしまいます。

• 一行の情報量が多すぎて理解が大変
• 目線の動きが大きく次の行を見失いやすい

このような問題を「行長が長すぎる」と言います。

行長は行送りと異なり、「読みやすい行長は何文字程度」と決めることは難しいですが、「一行の文章量は適切か？」「次の行への視線誘導はスムーズか？」という視点でデザインを確認するとよいでしょう。

3．トラッキングを広げる前にカーニングを調整し、洗練さを高める

3問目の作例は高級感のあるフランス料理のメニューです。

パッと見ただけでは、AとB、どこが違うのか気がつかないかもしれません。

注目してほしいのは、「蜂蜜」と「コンフィ」の部分です。

拡大して並べてみると、Aの作例は、漢字とカタカナの文字間がバラバラになっているのがわかります。

実はAとBの違いは、「トラッキングを広げる前にカーニングを調整しているかどうか」です。

トラッキングとカーニングの違いをあらためて解説しておきましょう。

• トラッキング・・・文章や段落の「全体の文字の間隔」を調整する
• カーニング・・・文字の前後の余白を調整する

1問目はトラッキングが解答の軸でしたが、3問目はカーニングが軸となります。

カーニングを調整する方法は「メトリクス」と「オプティカル」の二つがある

カーニングの調整は、IllustratorやPhotoshopを使うのがオススメです。

IllustratorやPhotoshopのカーニング機能には、「メトリクス」「オプティカル」という二つの設定があります。

まず、この二つの設定の違いを知っておきましょう。

• メトリクス・・・フォントに元から含まれているカーニング情報を使用する機能
• オプティカル・・・IllustratorやPhotoshopなどツール独自の機能

どちらの設定を使うかは、実際に適用してみた際、イメージに合っているかどうかで決めます。

メトリクスはフォントに元から含まれているカーニング情報を使用する機能ですが、フォントによってはカーニング情報が入っていない場合があります。

メトリクスを選んでも変化が見られない場合は、そのフォントにカーニング情報が含まれていないため、メトリクス設定は機能しません。

メトリクスが使えない場合は、オプティカルを使用するか、手動で調整しましょう。

ただし、オプティカルは縦書きのフォントでは使用できないため注意が必要です。

ちなみに以下の記事では、カーニングの基本とPhotoshopでの調整方法を詳しく解説しています。

カーニングとは？やり方とポイントをはじめからわかりやすく解説

2．カーニングとトラッキングを使い分けよう

• 文字の前後の余白を調整するのはカーニング
• 文章や段落の「全体の文字の間隔」を調整するのはトラッキング
• IllustratorやPhotoshopを使ったカーニングの設定には、メトリクスとオプティカルがある