カーニング、追跡、およびリード：効果的なタイプフェーシングの簡単なガイド
公開: 2019-04-14Web用に設計するときは、常に1つのことを覚えておく必要があります。それは読みやすさです。 デザインがどれほど素晴らしいか、レイアウトがどれほどゴージャスか、色の使い方がどれほど天才かは関係ありません。 人々が画面上の単語を読むことができない場合（そしてこれはもちろん画面上に単語があることを前提としています）、ウェブサイトはその機能を果たすことができません。 テキストの読みやすさの最も重要な要素の3つは、カーニング、追跡、およびリードですが、多くの人はそれらを混乱させるか、単にそれらを効果的に使用する方法を理解していません。 今日はそれを修正するつもりです。
カーニング、追跡、および指導
これらの3つを絶対的な基本に要約すると、X軸とY軸の両方の文字間の間隔を確認していることになります。 掘り下げてみると、それ以上のものがあることがわかりますが、本質的には、テキスト文字間の関係を見ています。 これらの3つの属性の関係を理解することは重要です。優れたデザインと読みやすさは、それらを最大限に活用するかどうかにかかっているからです。
そして、それは時間と練習を伴います。 しかし、それらに注意を向け始めると、カーニング、追跡、およびリードが、日常的に読んだり見たりするすべてのもので効果的および不十分に使用されていることに気付くでしょう。 掘り下げてみましょう。
カーニング、リーディング、トラッキングの調整（およびその他！）
実際、掘り下げる前に、これらの設定をどのように変更および調整するかを見ていきましょう。 ほとんどのワードプロセッシングプログラムにはそれらを調整するためのオプションがありますが、ほとんどの人はコピーや典型的なテキストを書くときにそうする必要はありません。 テキストをデザインするときに問題になるので、PhotoshopやIllustratorなどのプログラムに最も必要なオプションがあります。
アドビ製品では、テキストレイヤーの文字パネルを開くだけで、必要なものがすべて揃っています。 V / Aはカーニングであり、ボックス内のVAは追跡しており、下線が引かれた垂直Aが先頭になっています。 このパネルでは、取り消し線、太さ、サイズ、上付き/下付き文字などを調整することもできます。 これを開いたままにしておくことは、慣れる価値があります。
間隔を調整する必要がある場所にカーソルを置いて移動するだけです。
カーニングとは何ですか？
カーニングから始めましょう。 カーニングは、実際には3つの中で最も単純です。 これは、2つの並んだ文字の間のスペースです。 つまり、最初の2文字間のスペースが、最後の2文字間のスペースとは異なる場合があるため（以下同様）、可変カーニングを使用できます。
等幅フォントでは、各文字はまったく同じ量の水平方向のスペースを占め、重なりはありません。 AはBと同じ幅で、JはKと同じです。これらの文字間のカーニングの調整は、文字が重なったり、異なる幅で印刷されたりする可変間隔のフォントよりも簡単な傾向があります。
上記の例では、等幅フォントCourierNewを使用してコピーして貼り付けた3行があります。 一番上の行のカーニングは0に設定されています。これはデフォルトであり、フォントデザイナーが選択した間隔を使用します。 2番目の行は200の文字（およびスペース）間で均等に設定されます。ご覧のとおり、スペースは行全体の文字間で均一です。 最後に、3行目は、個々の単語内に正と負の両方の間隔を空けてランダムにカーニングされました。 ご覧のとおり、各キャラクターはそれぞれの側で異なるカーニングを持つことができます。
追跡とは何ですか？
追跡はカーニングに似ていますが、カーニングではありません。 カーニングが2つの個々の文字間のスペースである場合、トラッキングは個々の単語または行間の均一なスペースです。 カーニングのように文字ごとに物事がどのようにまとめられるかを心配する代わりに、行全体が等間隔に配置されていることを確認します。 前のサンプル画像を振り返ると、2行目ははるかに簡単な方法で実行できたはずです。
カーニングのために私がしたことは、個々のキャラクターの間にカーソルを置き、200に調整することでした。私は基本的に行全体を追跡しました。 それはあなたがすべきことです。 キャラクターパネルで追跡する必要があるものを強調表示して調整するだけです。
ただし、トラッキングを調整すると、一部のフォントやスクリプトが読み取れなくなる可能性があることに注意してください。
手書きフォントと筆記体の書体は特定のカーニングで設定されており、トラッキングを調整すると、他の点では途切れのない線にギャップが生じます。 または、行を圧縮するために別の方向に進むと、単にスクリプトを読み取れなくする可能性があります。
リーディングとは何ですか？
Leadingを使用すると、文字間の間隔を扱う必要がなくなります。 先頭は行間のスペースです。
リーディングを効果的に利用することで、デザインの空白を効果的に活用できます。 窮屈な線は、正しくてよくできたカーニング/追跡を使用しても、読者にとって悲惨な体験になる可能性があります。
いくつかの場所では、行の高さと呼ばれる先頭が表示される場合がありますが、それらはほぼ同じものです。 経験則の1つは、キャラクターの上下に少なくとも少しスペースを空けるようにすることです。 上の例でわかるように、40pxのフォントの行の高さは48pxです。 つまり、何があっても、文字の間に間隔ができます。 フォントサイズ以下に設定すると、文字が重なってしまいます。
さらに、これはキャラクターが座っている線の高さです。 これは文字の高さではありません。 カーニングとトラッキングによってキャラクターが太くなったり薄くなったりしないのと同じように、トラッキングによってキャラクターが短くなったり高くなったりすることもありません。 それは単に彼らの周りの空間です。
ただし、ご覧のとおり、Photoshopの文字パネルのカーニング/トラッキングの下にあるオプションは、カーニング、トラッキング、およびリーディングとは関係なく、文字の幅/高さを調整します。
Photoshop / Illustratorのキーボードショートカット
キャラクターパネルの唯一の欠点は、微調整が必要なときにかなり煩わしくなることです。 ありがたいことに、カーニング、トラッキング、およびリードを非常に簡単に使用できるキーボードショートカットがあります。
これらのショートカットはAdobeCreative Cloudスイート用であるため、Gimp、Paint.NET、または別のプログラムでは異なる場合があります。
- カーニング– 2つの文字の間にカーソルを置き、ALT（またはMacの場合はOption）を押したまま、左/右矢印を使用してカーニングを調整します
- 追跡–単語/行が強調表示された状態で、ALT（またはMacの場合はOption）を押したまま、右/左矢印を使用して強調表示されたテキストの追跡を調整します
- 先頭–調整する行を強調表示し、ALT（またはMacの場合はOption）を押したまま、上下の矢印を使用して行間のスペースを調整します
カーソルを置いたり、テキストを強調表示して文字パネルに値を入力したりできますが、キーボードショートカットを使用すると、プロセス全体の面倒で時間がかかりません。 さらに、よりきめ細かい制御が可能になるため、その方法でより優れたデザインを作成することもできます。
（余談ですが、Photoshop / Illustrator / Premierなどのキーボードショートカットを定期的に使用していない場合は、ワークフローがよりスムーズに、より楽しく、より生産的になるため、学習することを強くお勧めします。）
まとめ
カーニング、追跡、およびリードは、Webデザイン（および一般的なデザイン）における読み取り可能なテキストの基本です。 違いとそれぞれを効果的に使用する方法を学ぶことは、あなたをはるかに優れたデザイナーにするでしょう。 文字と行の間隔のような単純なものがこれほど大きな影響を与える可能性があるのは少し奇妙に思えるかもしれませんが、少しでもそれを扱うと、Webサイト、広告、ロゴ、または看板を見ることはありません。再び同じように。
デザインを完璧に追跡、カーニング、またはリードするためのヒントとコツは何ですか？
BarsRsind /shutterstock.comによる記事特集画像