【デザインの基本】フォントの字間( カーニング )センスをテスト出来るサイト『KernType』

2019年1月9日2019年4月7日

フォントの字間( カーニング )センスをテスト出来るサイト『KernType』です。

カーニング とは

カーニングとは文字と文字の間のスペースを埋めてバランスをとる作業の事。
カーニングは文字を使ってデザインを行う上で基本的な事です。

カーニング例

上：カーニング前。ベタ組みともいいます。
下：カーニング後。

カーニング前

カーニング前はTとoの間に広い隙間があります。
また、kyの間は詰まっているのに比べ、yoの間は少し空きがあるように感じます。

カーニング後

これらを調整したのが下のカーニング後です。
どの文字も大体同じ位のすき間が空いているような印象になりました。

このように、カーニングは文字全体のバランスを良くする為の作業です。
恐らく、DTPやWeb関連の分野であれば、多くの方はご存知かと思います。

普段目にする、ロゴ、キャッチコピー、タイトルなどもこういったカーニングが行われています。
小生が学生の頃は映画のスタッフロールの名前もカーニングされていると教えられました。

『KernType』は、そんなカーニングセンスをテスト出来るサイトです。

『KernType』はこんな感じのテストです

表示された文字を移動し、文字のバランスを調整してください。
調整後、『Compare』ボタンを押すと、採点が始まります。
全問解凍後、総合得点が表示されます。

小生の総合得点は93点でした。

どうやって カーニング するのか

Adobe製品での説明になりますが、文字を打った後、文字と文字の間にカーソルを置き、Altキー + →キー、Altキー + ←キーでカーニングをする事が出来ます。
Photoshop、Illustrator、AfterEffectsも同様の操作になります。

自動で カーニング を行う方法。

自動でカーニングを行う方法もあります。

皆さんもテストしてみましょう

フォントの字間( カーニング )センスをテスト出来るサイト『KernType』