「IllustratorやPhotoshopを使ってデザインを作ってみたけれど、何か締まらない……」と悩んだことはありませんか？作品が思うように洗練されない……。そんな悩みを抱えているデザイナーは少なくないでしょう。その原因の一つが、「カーニング」の調整不足かもしれません。カーニングとは、文字間の間隔を微調整することで、タイポグラフィの見栄えを向上させるテクニックです。本記事では、カーニングの定義や具体的な方法について解説します。正しいカーニングを習得して、デザインの品質を高めましょう！

カーニングとは？

カーニング（Kerning）とは、主に欧文の組版において、プロポーショナルフォントの文字同士の間隔を調整する技法のことです。

「文字を打ち込んだだけだと、文字同士の感覚が均等ではない・・・」

「ベタ組み」（＝字間をあけない組み方）だと字間が広くなりすぎてしまったり、詰まりすぎてしまう場合があります。

特にプロポーショナルフォント＝文字ごとに文字幅を個別設定されているフォントを使用している場合に顕著です。（日本語では可変幅フォント）プロポーショナルフォントは、それぞれの文字が異なる幅を持つため、均等に並べてしまうと、字間が不自然に見えてしまいます。そこで、カーニングによって文字間を調整することで、視覚的にバランスの良い文字組みを実現します。

例えば、「i」や「l」などの細い文字は幅を狭く、「m」や「w」などの広い文字は幅を広く設定することで、文字間の視覚的なバランスを取ります。このような場合、カーニングというテクニックを用いて、文字間を調整することができます。

代表的なプロポーショナルフォント

欧文フォントと日本語フォントに分けて、代表的なプロポーショナルフォントをご紹介します。

欧文プロポーショナルフォント：

1. Times New Roman（タイムズ・ニュー・ローマン）：セリフ体のフォントで、読みやすさと美しさを兼ね備えています。
2. Helvetica（ヘルベチカ）：スイス生まれのサンセリフ体フォントで、シンプルで読みやすいデザインが特徴です。
3. Arial（アリアル）：Helveticaに似たサンセリフ体フォントで、幅広い用途に使用されています。
4. Verdana（ヴェルダナ）：低解像度の画面でも読みやすいように設計されたサンセリフ体フォントです。
5. Georgia（ジョージア）：画面上で読みやすいセリフ体フォントで、大きめの字形が特徴です。

日本語プロポーショナルフォント：

1. MS P明朝・MS Pゴシック：Windowsに標準搭載されているプロポーショナルな明朝体とゴシック体フォントです。
2. 源ノ明朝・源ノゴシック：Adobeが提供するオープンソースの日本語フォントで、読みやすさと美しさを追求しています。
3. 游明朝・游ゴシック：Adobeが提供する日本語フォントで、現代的でスタイリッシュなデザインが特徴です。
4. ヒラギノ明朝 Pro・ヒラギノ角ゴ Pro：Appleが提供する高品質な日本語フォントで、印刷物からWebまで幅広く使用されています。
5. IPA明朝・IPAゴシック：独立行政法人情報処理推進機構（IPA）が提供するオープンソースの日本語フォントです。

カーニングは特にどういうときに意識した方がいいの？

1. 見出しなどの大きな文字サイズを使用する場合

見出しやタイトル、ロゴタイプなど、大きな文字サイズを使用する際は、カーニングの調整が不可欠です。文字サイズが大きいほど、文字間の隙間が目立ちやすくなるからです。適切にカーニングを行うことで、より洗練された印象を与えることができます。

2.特殊な文字の組み合わせがある場合

特定の文字の組み合わせ（例：「WA」「Vo」「Te」など）では、デフォルトの字間では間隔が空きすぎたり、詰まりすぎたりすることがあります。このような場合、カーニングで微調整を行うことで、バランスの取れた文字組みを実現できます。

3. 欧文の組版

欧文は、日本語と比べて文字の形状や大きさが多様です。そのため、カーニングによる調整の効果がより顕著に現れます。特に、見出しやタイトル、ロゴタイプなど、大きな文字サイズを使用する場合は、カーニングが重要です。適切なカーニングを行うことで、欧文の美しさを最大限に引き出すことができます。

4. ゴシック体よりも明朝体

明朝体は、ゴシック体と比べて、文字の線が細く、字形が複雑です。そのため、明朝体では字間が広くなる傾向があり、カーニングによる調整が必要なことが多いです。特に、小さな文字サイズで明朝体を使用する場合は、カーニングが重要です。適切なカーニングを行うことで、明朝体の美しさと読みやすさを両立することができます。

5.複数のフォントを組み合わせる場合

複数のフォントを組み合わせて使用する際、フォント間の字間のバランスが悪くなることがあります。カーニングを適用することで、フォント間の字間を調整し、統一感のあるデザインを実現できます。

トラッキングと字詰めの違いとは？

簡単にいうと以下の通りです。

• カーニング：特定の文字ペアの間隔を調整
• トラッキング：選択した文章全体の間隔を調整
• 字詰め：行長に合わせて文字間を調整

	トラッキング	字詰め	カーニング
対象	文章全体、複数の文字	行	特定の文字ペア
調整方法	文字間を全体的に開く/詰める	行長を固定した上で文字間を調整	個別に文字間を調整
目的	文字列の印象をコントロール	行揃えを行う	視覚的に美しい文字組みを実現
考慮事項	文字間	行長	文字の形状、組み合わせ

トラッキングは、文章全体、もしくは複数の文字全体の空きの調整を行います。文字間を全体的に開き、あるいは詰めることで、文字列の印象をコントロールします。

例えば、見出しの文字列を全体的に詰めて引き締まった印象を与えたり、本文の文字列を全体的に開けて読みやすくしたりするのがトラッキングです。トラッキングは文字列全体に一律に適用されるため、個々の文字の形状は考慮されません。

字詰め（字詰め）は、行長を固定した上で、その行に収まるように文字間隔を調整することを指します。新聞や雑誌などの印刷物では、行の両端を揃えるために字詰めが用いられます。字詰めも文字列全体に適用されるもので、個々の文字の形状は考慮されません。

一方、カーニング（カーニング）は、特定の文字ペアに対して個別に文字間隔を調整することを指します。例えば、「WA」という組み合わせでは、Wの右側とAの左側の間に大きな隙間ができてしまいます。この隙間を詰めることで、より自然で読みやすい文字組みになるのです。カーニングは個々の文字の形状を考慮して行われる点が、トラッキングや字詰めとの大きな違いと言えます。

つまり、トラッキングと字詰めは文字列全体の間隔を調整するのに対し、カーニングは特定の文字ペアの間隔を調整するものだと言えます。

理想的なのは、カーニング→トラッキング

トラッキングは文字列全体に一律に適用されるため、個々の文字の形状は考慮されません。そのため、カーニングで個別の文字ペアの間隔を調整しないと、不均衡なまま全体が調整されてしまいます。

ですから、まずカーニングで個々の文字ペアの間隔を1文字ずつ調整し、文字組み全体のバランスを整えること。その上で、トラッキングを行って文字列全体の印象を調整するのが一般的です。

カーニングのコツは？

伝えたいキーワードを

カーニングとフォントサイズの調整を組み合わせて、要度別に文字の大きさを変え、メリハリのある文字組みにできます例えば、見出しで重要なキーワードのフォントサイズを、その見出しの中で最も大きなフォントに設定するような形です。

でもフォントサイズを大きくするだけでは、文字間のバランスが崩れてしまうことがあります。特に大きなサイズでは、文字間の間隔が不自然に広がってしまい、読みづらくなる恐れがあります。

そこで、カーニングを使用して文字間のバランスを調整します。フォントサイズを変更した後、カーニングで文字間の間隔を最適化することで、より洗練された印象を与えることができます。

例えば、見出しで重要なキーワードのフォントサイズを大きくした場合、そのキーワードの文字間をカーニングで詰めます。逆に、副次的な情報のフォントサイズを小さくした場合、カーニングで文字間を少し開けることで、読みやすさを確保できます。

助詞の場合

助詞は視覚的には目立たせる必要のない要素です。だから、助詞のカーニングを広げ、サイズを小さくすることで、文章の中で助詞を目立たなくさせる手法がよく用いられます。また助詞のサイズを小さくし、間隔を広げることで、文章全体の密度が適度に下がり、読みやすさが向上します。

とはいえ助詞の間隔を広げすぎると、逆に不自然な見た目になってしまいます。文章全体のバランスを見ながら、適度な広さに調整することが大切です。

記号の場合

記号は、文字と比べて形状が単純であることが多く、また字形のバランスが取りにくいという特徴があります。そのため、記号を他の文字と組み合わせる際、字間が極端に狭まったり広がったりしやすい傾向にあります。

例えば開きのある記号（例：「、【）と文字の組み合わせは記号の開き部分と文字の間に隙間ができやすく、字間が広がって見えてしまいます。丸みを帯びた記号（例：。、）と直線的な文字（例：し、く）の組み合わせは記号の丸みと文字の直線の間に大きな隙間ができやすく、字間が広がって見えてしまいます。

そんなときに記号と文字の間に適度な隙間を設けることで、字間の極端な広がりを防ぐこともできます。

文字のフォルムと組み合わせを理解する

すべての文字ペアが同じようにカーニングするわけではありません。それぞれの文字の形状や組み合わせを理解し、適切な間隔を調整することが重要です。

均等感覚ではなく、視覚的なバランスを

文字間をすべて同じ幅にするのではなく、視覚的にバランスが良く見えるように調整することが重要です。そのためには、全体のデザインを意識しながら、微調整を行う必要があります。

• 特に、AとOのような丸みを帯びた文字の組み合わせは、注意が必要です。
• IとLのような縦長の文字の組み合わせは、間隔を広くするとバランスが取りやすくなります。

フォントスタイルやサイズによって調整方法を変える

フォントスタイルやサイズによって、適切なカーニングの幅は異なります。太字や小文字、細いフォントなどは、標準的なフォントよりもカーニングが必要になる場合があります。

• 太字は、標準的なフォントよりも間隔を広くする必要があります。
• 小文字は、標準的なフォントよりも間隔を狭くする必要があります。
• 細いフォントは、太字よりもカーニングが必要になります。

例えば、太字のゴシック体は、標準的なゴシック体よりも間隔を広くする必要があります。

自動カーニングを活用しつつ、手動での微調整も行う

Illustratorやfigmaには、自動カーニング機能があります。でもデザインのコンセプトや文字組みの特性によっては、自動カーニングがうまくいかないことがあります。また、見出しやロゴタイプなど、大きなサイズで使用される文字組みでは、自動カーニングだけでは不十分なことが多いです。

自動カーニングで大まかな調整を行った後、細部を手動で調整することで、より精度の高いカーニングを実現できます。特に見出しやロゴタイプなど、大きなサイズで使用される文字組みでは、手動での微調整が欠かせません。

自動カーニングの2種類

自動カーニング機能には「メトリクスカーニング」と「オプティカルカーニング」の主に2種類があります。

メトリクスカーニングは、フォントファイルに組み込まれたカーニング情報を使用して、自動的に字間を調整する方法です。フォントデザイナーがあらかじめ設定した文字ペアの間隔情報を基に、カーニングが適用されます。メトリクスカーニングは、フォントの特性を反映した調整ができる反面、想定外の文字の組み合わせでは適切に機能しない場合があります。

一方で オプティカルカーニングは、文字の形状を解析して、視覚的に均等になるように字間を調整する方法です。フォントに組み込まれたカーニング情報は使用せず、文字のアウトラインを基に調整を行います。オプティカルカーニングは、メトリクスカーニングでは対応できない文字の組み合わせにも対応できる反面、文字の形状によっては望ましくない調整になることもあります。

どちらを選ぶかというと、デザイナーが設定した情報に基づいた高い精度を求める場合は、メトリクスカーニングがおすすめ。 想定外の文字の組み合わせや、すべてのフォントで利用できる環境が必要な場合は、オプティカルカーニングがおすすめです。