ロゴやページのタイトルをつくっているとき、文字と文字の間隔がなんとなくバラバラに見えることはありませんか？
それはカーニングが行われていないことが原因かもしれません。
カーニングとは何かをゲーム感覚で体感できる「KERN TYPE」というサイトがあるので、当記事ではその遊び方と結果を紹介します。
カーニングとは？
カーニングとは、文字と文字の間隔を調整することです。文章全体の間隔を均一に広げる「字送り」とは違い、文字のペアごとに間隔を微調整するのがポイントです。
たとえば「WA」のように、文字の形の組み合わせによっては、同じ数値幅で並べても隙間が不自然に見えることがあります。実際にカーニングを行うと、以下のように文字同士が自然に馴染みます。
調整後は、Wの内側にAが入り込んで余白が詰まっている
カーニングの基本は、物理的な等間隔ではなく「目で見て均等に感じられること」を目指す調整です。フォントや文字の組み合わせによって最適な間隔は変わるため、都度目で見て判断する必要があります。
KERN TYPEの遊び方とプレイ結果
文字間調整（カーニング）の感覚を、気軽に体感できるのが「KERN TYPE」というサイトです。
KERN TYPE
遊び方
やり方はシンプルです。
- 表示された文字のうち、動かしたい文字にホバーすると操作可能に
- ベストだと思う位置までドラッグして調整して「Done」を押す
- お手本の間隔と比較して1問ごとに採点される
全10問、1問1答形式で進みます。全て終わるとトータルスコアが表示されます。
実際にプレイしてみた
実際に10問プレイしてみたところ、筆者のトータルスコアは74点でした。
KERN TYPEのスコア
10問は毎回同じ単語・同じ書体で出題されるので、繰り返しプレイしてカーニングの精度を上げていくタイプのゲームです。
「Quijote」や「Xylophone」のような見慣れない単語は特に難しく、直感で詰めた間隔とお手本とのズレが大きく出ました。
やってみて気づいたのは、書体の特性を知らないと難しいという点です。
たとえば筆記体は、文字が次の文字の領域まで入り込むようにデザインされていることがあり、直線的な書体と同じ感覚で間隔をとると隙間が空きすぎてしまいます。
「I」のような幅の狭い文字は間隔を広めに、「W」や「O」のような幅の広い文字は間隔を狭めにとると、バランスが整いやすいと感じました。
まとめ
ロゴや見出しなど、文字を大きく扱うデザインほど、文字間隔の違和感は目立ちます。
KERN TYPEで感覚を体感しておくと、そうした場面での違和感に気づきやすくなるはずです。デザイナーはもちろん、非デザイナーの方でも、コーヒーブレイク感覚で試してみると発見があると思います。
気になった方は、ぜひ一度プレイしてみてください。
WordPressテーマ集
コメント