初心者デザイナー必見。少しの手間で一気に垢抜けるカーニングのコツ

こんにちは。アートピースの西村です。

カーニングとは、文字間のバランスを適切に調整することで、読みやすさとデザインの質を向上させる手法です。特に初心者デザイナーがデザイン作業で最初に躓きがちなのが、この「文字」のデザイン部分です。バナーやWEBサイトを制作する際に、ただ文字を打ち込むだけでなく、カーニングを利用して文字間のバランスを整えることで、文章はぐっと読みやすくなり、デザインも格段に洗練されます。

本記事では、カーニングの基礎について詳しく解説します。

1 カーニングとは
2 なぜカーニングが必要なのか
3 うまくカーニングをするコツ
4 カーニングの具体的な操作方
5 カーニングを楽しみながら学習！『Kern Type, the kerning game』
6 まとめ

カーニングとは

「カーニング」とは、文字と文字の間隔を均等に見えるように詰めたり、広げたりと調整する作業のことです。「文字詰め」や「レタースペーシング」などと呼ばれることもあります。

デザインツール（XD、Illustrator、Figma）で入力した文字をそのままにしておくと、文字同士の余白が均等でないため、全体のバランスが崩れて見えてしまいます。カーニングは、ロゴデザインや見出しタイトルなど、大きく表示される文字テキストで重要になってきます。

カーニングによって、文字同士の間隔のバランスが調整されることで、文章の読みやすさとデザインの美しさが上がります。この僅かな変更は、普段から整ったデザインに慣れている人にとっては大きな違いとなり、カーニングがされていないテキストは一目で違和感を覚えさせ、読みづらく感じさせることもあります。

上記では違いがわかりにくいという人のために次の参考をご覧ください。

「o」の文字が「I」の方に寄っていて、その分「T」から少し離れているように見えませんか？こちらの参考は実は間隔は同じ幅になっています。

カーニングなしの場合、数値的な間隔は同じにもかかわらず違和感を感じると思います。このような違和感を無くすためにカーニングが必要になってきます。

なぜカーニングが必要なのか

なぜそもそも文字間のバランスを調整するカーニングが必要なのでしょうか。

文字はひとつひとつボックスの中に収まるようにデザインされています。英語や日本語を問わず、全ての文字がこの「ボディ」を基にして配置されます。

何も調整をせずに文字を打ち込んだ場合、このボディ同士が隣り合って並べられている状態になります。これを「ベタ組み」といいます。文字によってボディーと字面との余白が異なるため、ベタ組みのままでは不自然な間隔になってしまいます。このことが数値的をもとに均等に配置するだけでは不十分で、目視で均等に見えるよう確認しながら手動でのカーニングが必要になってくる理由になります。