デザインの基本: フォントのカーニングとは、カーニングの基本的なやり方

Webでも紙でも文字のデザイン、タイポグラフィは非常に大きな存在です。
文字のデザインで基本となるカーニングについて、基礎知識から基本的なやり方、CSSでのカーニングのやり方までを紹介します。

The Ultimate Guide to Kerning

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• この画像のどこがおかしいか
• カーニングとは
• カーニングの基本的なやり方
• カーニングはいつ必要なのか
• カーニングではないもの
• CSSでカーニング
• 終わりに

この画像のどこがおかしいか

この画像のどこがおかしいのか、経験の浅いデザイナーは頭をひねるかもしれません。

このテキストは、ロゴに近すぎます。
テキストとロゴの間にスペースを加えると、ぐっと良くなります。

経験豊かなデザイナーであれば、もう一つ問題があることに気がつくでしょう。

カーニング（Kerning）

プロポーショナルフォントで文字間の間隔を調整して、視覚的に心地よい結果を達成するプロセス。

カーニングとは

テキストをじっと見つめると、違和感を感じることがありませんか？
その違和感の1つの要因は文字間の間隔、フォントのカーニングです。

カーニング前とカーニング後

カーニングで大切なキーワードは「認知」です。
すべての文字間に同じ大きさの空白スペースを設定するだけであれば、このテクニックに意味はありません。下記の例を見てみてください。

同じスペースと異なるスペースを与えた例

文字ごとに適切なカーニングを適用すると、幾何学的に言えば文字間のスペースが不均等に分散されているにもかかわらず、文字はよりバランスの取れた読みやすいものとして認識されます。
これは、タイポグラフィにおいて「水平のリズム」と呼ばれています。

すべてのフォントには独自のリズムがあり、リズムの主要な要素は下記の通りです。

• 文字（letter）

  すべての文字に独自の視覚的必要面積があります。

• 要素（elements）

  セリフ、線の太さ・長さは、同じ文字のサイズでも大きく変わる可能性があります。

• ペア（pairs）

  2つの隣接する文字間の相互作用はすべてのフォントで固有です。

文字（letter）

文字には、5種類のタイプがあります。

• 長方形: M、H、N のように両側に垂直要素を持つ文字
• 円: O
• 半円: B、D
• 半開き: L、E、C、K、J
• 開き: X、T、W

もしすべての文字が長方形であれば、文字間をすべて同じにする方法が使用できます。

すべての文字が長方形の場合

しかし、異なるタイプの文字を組み合わせる場合は、いくつかの微調整を行う必要があります。

異なるタイプの文字の場合

通常、長方形の文字間のスペースは最も広くなり、開きの文字はそれよりも狭くなります。

長方形とそれ以外の場合

要素（elements）

すべての書体には、文字をユニークにする無数の要素があります。それらはすべて、名前があります。ディセンダ、ヘアライン、ループ、セリフ、ターミナル、文字の角度や線の太さなど、わたし達がそれらすべてを認識することができます。

異なるフォントで同じ文字列を比較してみます。

異なるフォントで同じ文字列を比較

最初の2文字「I」と「n」の間は、全く異なります。上のフォントではセリフと全体的な角度のために、文字間を狭くします。視覚的知覚と可読性を向上させたい場合、それをもっと近づける必要があります。

「I」と「n」の文字間を狭く

ペア（pairs）

すぐに使えるフォントとは、何千もの文字の組み合わせやカーニングの集合体です。フォントデザイナーはすべてのペアを可能な限り予想しています。ほとんどの場合、それだけで十分です。

しかし、Webフォントやエディタなどでは特定のペアで、特に大きなサイズで厄介です。特定のペアとは、下記のような組み合わせです。

厄介な組み合わせ

カーニングの基本的なやり方

カーニングには非常に多くの幾何学的がありますが、それはフォントのデザイナーに任せます。ここでは、3文字をセットにしたカーニングの基本的なテクニックを紹介します。

「EMULATION」の文字列を使用してみましょう。

ベースとなる文字列

Step 1

最も複雑な文字のペアを見つけて、それらの間隔を調整します。

複雑な文字のペアをみつける

「A」と「T」の文字間は平打ちでは広がりすぎで、それを狭くします。しかし狭くしすぎるのはよくありません。

「A」と「T」の文字間を調整

このペアのカーニングで、残りの水平リズムが決定されます。
このペアは複雑なものの1つで、通常2つの文字間は他のペアと比較して最小のスペースになります。

Step 2

次に、ATペアの隣の文字に注目してください。「I」を調整します。
この3文字でバランスを見て、調整してください。

「ATI」の3文字で調整

Step 3

一つ隣に移動し、次の3文字「TIO」で調整します。

次の3文字で調整

Step 4

3文字ごとの調整を繰り返すと、最終的に文字全体がカーニングされます。

カーニングの完了

カーニングはいつ必要なのか

カーニングを必要としない状況があるかもしれません。

しかし、多くの場合はカーニングを必要とします。なぜなら、カーニングが読みやすさと認識の両方に影響を与えるからです。

適切なカーニングは適切なインターフェイスデザインと似ています。うまく適用されていれば、あなたは気付かないこともあるでしょう。
しかし、カーニングされていないと、、、

文字の並びが不穏な雰囲気を出している

これはジョークではなく、カーニングがひどいテキストを読むことは、拷問のように感じるかもしれません

カーニングがひどいテキスト

カーニングがひどい本は、レビューもひどくなるかもしれません。

カーニングがひどい本

ただし、意図的に異常なカーニングを適用することはあります。
特にロゴのデザインです。

Continentalのロゴを見てましょう。

Continentalのロゴ

適切なカーニングにすると、ロゴとしての魅力が欠けてしまいます。

カーニングを適切にした例

カーニングではないもの

タイポグラフィでは、カーニングに非常に密接に関連した別のコンセプトがあります。それはトラッキング（Tracking）と呼ばれています。
トラッキングは、しばしば人々はそれらを混乱させます。下記はトラッキングです。

大文字のテキストは通常、トラッキングを増やします

トラッキングは文字間の個々のスペースを調整した後、それらのスペースを一様に増やしたり、単語全体で減らしたりすることができます。適切にカーニングがされていれば、視覚的な認識は依然として好ましいでしょう。

しかし、トラッキングは単語がどのように認識されるかに大きな役割を果たします。

Nikeのロゴ

これらの2つのロゴは、ネット上で見つけました。フォントには若干の違いがありますが、注目すべき違いはスペースにあります。2番目の例では一様に広がっています。
同じ会社からの2つの異なるメッセージのように感じます。

これはカーニングではありません、トラッキングです。
この2つの違いがよく分かる資料があります。

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

CSSでカーニング

Webページでカーニングを制御するのは、デザインのモックアップで制御するよりも困難です。その理由の一つは、ビジターはあなたが望むフォントではなく、ブラウザで設定されたフォントを使うことを好むからです。

ありがたいことに、Webページのタイポグラフィを制御するために、CSSでカーニング用のプロパティが用意されています。

• font-kerning: auto;
• font-kerning: normal;
• font-kerning: none;

font-kerningプロパティは、カーニングのペアを使用するかどうかを制御します。

場合によっては、テキストの特定の部分に対してCSSを使ってフォントのカーニングを無効にすると便利かもしれません。

AV

「normal」を定義すると、下記のようになります。

AV

もう一つ、letter-spacingプロパティも使用できます。

• letter-spacing

このプロパティはカーニングではなくトラッキングを制御します。トラッキングなので、文字間のスペースを均一に増やします

letter-spacing

値を少なくすると、スペースが減ります。

letter-spacing

Webページでカーニングやトラッキングを緻密に制御したい場合は、下記のスクリプトが役立つでしょう。

• Kerning.js
• LetteringJS

Lettering.jsは単語内の各文字を識別し、単語の余白を設定することができます。

Kerning.jsはフォントのカーニングに関するさらに多くの機能があります。例えば、特定のカーニングのペアの動作を設定できます。

終わりに

あなたのカーニングは練習すればするほど、よくなります。
気軽に、ゲーム感覚でカーニングを練習するのも一つの手です。

Kern Game

学ぶのにあまり時間を費やしてはいけません。数年後には、おそらくAIによって自動で行われるでしょう。しかし、わたし達はまだそこに達していないので、あなたのロゴが美しく見えるように手作業で調整してください。