サイトマップ

お問い合わせ

このサイトについて

ホーム

WEB制作支援

WEBデザイン

WEB運営

特集・トピックス

リンク集

Home >> Webデザインテクニック >> カーニング（文字詰め）

カーニング（文字詰め）

カーニングについて

タイトルなどの文字を画像で作成する場合、その文字をより美しく見せるためのテクニックとしてカーニングというものがあります。
これは、フォントを用いた時にできた文字と文字の間の余白を詰めるもので、特に等幅フォントに有効です。

→ カーニング前

例えば、上のフォントの場合、小さい「ェ」の間が大きく開いてしまい、少し見栄えが悪くなっています。そこで、カーニングを行います。

→ カーニング後

詰める間隔は、１文字ずつの余白を確かめつつ、全体のバランスを考えて決めます。「デ」と「ザ」のように間が詰まっている時などは少し間隔を広げてみるのもいいでしょう。

カーニングの例

文字間の●は特に注意してカーニングを行って欲しいところです。

→ カーニング前

→ カーニング後

小さい文字にだけ注目するのではなく、細い文字同士の余白にも注意しましょう。

→ カーニング前

→ カーニング後

英語の場合も日本語と同様です。特に大文字と小文字の間や、「i」の間は余白が大きくなってしまいがちです。

→ カーニング前

→ カーニング後

余白は太い文字ほど目立ちにくく、細い文字ほど目立ちやすくなっています。
漢字やひらがなが続く場合は、それに見合った余白を設定しましょう。

← Webデザインテクニックに戻る

eWeb