カーニングの重要性について（＋楽しく学べる学習サイト）
前回の勉強会でカーニング（字詰め）について少しだけお話させていただきました。
今回はカーニングの重要性について、もう少し掘り下げてご紹介させてください。
下記参考サイトがとてもわかりやすかったです。
要点をまとめてご紹介させてください。
和文書体の「仮想ボディ」問題
主役級の文字は、目視でカーニングすべし！
フォントには「仮想ボディ」という概念が存在します。
文字が入っている箱のようなものをイメージしてください。
欧文書体は個々の字幅に合った箱に入っているのですが
和文書体はすべての文字が同じ幅の箱に入っています。
そのため、ひらがなの「く」や「、」等
箱に対して密度の低い文字はスカスカに見えたり左右に余白が多く見えてしまいます。
逆に、箱に対して密度の高い漢字は箱いっぱいに見えます。
ざっくりまとめると
というようなイメージです。
デザインソフト等で文字を入力し、
デフォルト設定のままなにも調節していない状態を「ベタ打ち」と言います。
カーニングしてないとどうなるの？
上記ではわかりやすい和文書体を例に上げて説明しましたが
個々の字幅に合った箱に入っている欧文書体もカーニングが必要です。
記事冒頭の画像をご参照ください。
よくよく観察すると「T」と「o」の間が開いているように見えたり
「2」と「0」の間が詰まっているように見えませんか？
「T」と「o」の間が開いているように見える原因は
「T」という文字は左下と右下がスカスカで
「o」という文字は反対に下側の密度が高いため
並んでいると間が開いているように見えてしまいます。
「2」と「0」の間が詰まっているように見えるのは
箱に対しての接地の位置が近いことが原因です。
ベタ打ちのままの文字はいわゆる「なんか素人っぽい」の原因のひとつでもあります。
それを目視で整えていくのがカーニングという作業になります。
カーニングの実例
ここまでの内容をご理解いただいたところで
カーニングサンプル集めました
上記の箇所をご覧ください。
よりBeforeとAfterの見え方の違いが鮮明になると思います。
カーニングってどうやるの？
フォント大手モリサワの下記記事がわかりやすかったです。
オプティカル？メトリクス？Adobeソフトの文字詰め機能・入門編！
ショートカットキーで楽々カーニング
Illustrator、Photoshopのショートカットは
「Alt」＋「左右入力」ですが
Fireworksのみ「Alt」ではなく「Ctrl」なのでご注意ください。
実際にやってみましょう！
そうは言ってもカーニングはかなり感覚的なところもあり
慣れるにはやはり実際に手を動かして見るのが一番の近道だと思います。
大昔にデザイナーSkypeでご紹介したこともありますが
下記サイトでブラウザ上でカーニングの練習をすることが出来る上、
なんと採点までしてくれます！
お手すきの際にぜひ挑戦してみてください。
おまけ：ブラウザ上で楽しく学べるサイト
Kern Typeをご紹介した流れで、
ブラウザ上で楽しく学習出来るサイトを紹介させていただきます。
Flexbox Froggy
flexboxについて学べます。
Grid Garden
gridについて学べます。
他にもおすすめのサイトがあればぜひ教えてください！
Discussion