カーニング

定義

カーニングは、特定の文字ペアのすき間をひとつずつ調整して、行全体が均一に見えるように整える作業です。 文字はそれぞれ形が違うので、ただ並べただけだと、あるペアはやけに離れて見え、別のペアはくっついて見えます。 たとえば A と V、T と o のように、斜めの線どうしや曲線がかみ合うペアは、間にぽっかり穴が空いたように離れて見えます。 こうしたペアのすき間だけを少し詰めてあげると、行全体の密度がそろってきます。 文字間をまるごと同じ量だけ動かすトラッキング(字間)とは違い、カーニングは問題のあるペアだけを選んで手を入れる、きめ細かい調整だという点が違います。

なぜ重要か

人の目は、文字と文字のあいだの余白の広さがバラバラだと、それを違和感として感じ取ります。 特定のペアだけ妙に離れていると、その場所で単語が一瞬途切れて見え、読む流れがわずかに引っかかります。 カーニングはこうしたムラを埋めて、文字がひとつの単語としてなめらかにつながって見えるようにします。 この差は文字が大きいほどはっきり出るので、大きな見出しやロゴ、ボタンのラベルのように、ぱっと目に入る場所でとくに目立ちます。 さいわい、たいていのフォントにはペアごとのカーニング情報がすでに入っているので、 カーニングをオンにしておくだけでブラウザが自動で処理してくれます。 逆にこの機能を切ると、特定のペアが不自然に離れて、よくできたフォントでもどこか雑に見えてしまいます。

よくある間違い

• カーニングとトラッキング(字間)を同じものだと思い込むケースです。 トラッキングは、すべての文字間を同じだけ広げたり詰めたりする均一な調整で、カーニングは特定のペアだけを手直しする個別の調整です。 行全体が窮屈ならトラッキングを、特定のペアだけ不自然ならカーニングを見るのが基本です。
• 大きな見出しやロゴでカーニングを切ったまま放置するケースです。 本文サイズでは気づきにくかったペアのすき間のムラも、大きな文字になるとはっきり出るので、 目立つ大きなテキストほどカーニングをオンにしておくと締まって見えます。
• ペアのすき間の不自然さを、カーニングではなくトラッキングで解決しようとするケースです。 全体の字間を広げたり詰めたりすると、問題だった一つのペアだけでなく、もともと問題なかった残りのペアまで一緒に崩れて、 かえって行全体がより不ぞろいに見えてしまうことがあります。

実務のヒント

• カーニングはたいていフォントが自動で処理してくれるので、font-kerning の設定をオンにして、そのまま任せるのが基本です。 トラッキングのように全体を均一に動かすものとは目的が違うので、この二つの値を混同しないようにしましょう。
• 大きな見出しやロゴのように文字が大きく出る場所は、自動カーニングの結果を一度目で確認しておきましょう。 特定のペアがまだ離れて見えるなら、その部分だけを微調整してバランスを取ると、印象が大きく変わります。
• 本文のような小さな文字では、カーニングに手をかけすぎる必要はありません。 小さいサイズでは差がほとんど見えないので、自動処理に任せ、目立つ大きな文字のほうに時間を使うほうが得策です。 限られた時間をどこに割くかを見きわめるのも、実務では大事な感覚です。

関連概念