カーニングとは

公開日:2023-07-01

「カーニング(英:Kerning)」とは、「Adobe Illustrator(アドビ イラストレーター)」「Adobe Photoshop(アドビ フォトショップ)」などのソフトウェアで文字を入力した後、特定の2文字の間隔を調整すること、もしくはその機能を指し、デザイナーにとって欠かせない用語です。
そのまま文字を入力すると活字と余白の間隔にバラツキがあり、文章が散漫に見えてしまうため、デザイナーは文章が読みやすく、美しくなるように必ず文字間の余白を細かく調整し、字詰めを行っていきます。きちんと字詰めを行った文章では余白が均一に調整され、読みやすさと美しさが向上します。

カーニングとトラッキング

カーニングと一緒に「トラッキング(Tracking)」がありますが、この2つは似ていますが意味は全く異なります。カーニングは隣り合う2つの文字の間を調整する機能ですが、トラッキングは文章全体、もしくは複数の文字全体の空きの調整を行います。
デザイナーはこの2つを組み合わせて使い、トラッキングで文字のゆとりを調整し、カーニングで文字の間の余白を整えて美しく読みやすい「文字組み」をします。

紙とWeb上での取り扱い方の違い

名刺やロゴのように、紙媒体など印刷物として使用するデザインの場合は、カーニングとトラッキングを使い美しく文字を組み印刷などを行いますが、Web上(ブラウザ)でHTMLとCSSで表現される文字の場合はカーニングを行うことが難しいため、主にトラッキングを使って文字の読みやすさを調整します。しかし、バナーのように画像として書き出されるものに関してはカーニングも使い美しい文字組みを行います。

カーニングのやり方

カーニングは、IllustratorやPhotoshopの文字パネルにあるカーニング機能を使って行いますが、ソフトウェア上の数値や自動調整機能だけに頼るのではなく、人間の視覚的に均等な余白感になるよう、隣接する活字の形状を見て1文字ずつ余白を調整していきます。カーニングにはショートカットもあるため、覚えておくと作業が早くなります。

カーニングのショートカット(Macの場合)

  1. カーニングをしたい2つの文字の間をクリックします。
  2. 横組みの場合は『option + 矢印(← / →)』、縦組みの場合は『option + 矢印(↑ / ↓)』を押し数値の変更をして余白を調整します。

1回に増減する数値に関しては、Illustratorの場合は『環境設定 → テキスト』からカスタマイズができます。Photoshopの場合は20ずつ増減します。
加えて『option + 矢印(← / →)』と同時に『command』を押すことで、一度により多くの数値調整ができます。なお、同じショートカットでも複数の文字や文章全体を選択した状態で行うとトラッキングになります。

著者:デジタルハリウッド スクール 編集部