ブログ
こんにちは。最近「ソイレント」という飲み物が気になっているデザイナーの松田です。 今回はカーニング(文字詰め)についてお話したいと思います。 デザインの基本であり、私たちデザイナーにとってはとても大切な作業です。この工程をするとしないとではデザインに大きな差がでてきます。ただ非常に地味な作業ですので、ふだんあまり表立って話題になりません。 そこで今回はこの作業にスポットを当て、企業のWEB担当の皆さんに少しでも苦労をわかっていただく...いや、ノンデザイナーの方が社内で作業しなければならない時などの参考にしていただければと思います。作業環境はPhotoshopです。
■目次■
■カーニングとは
カーニング(文字詰め)とは、見た目にスペースが空きすぎていたり、狭くなりすぎていたり 違和感のある文字間隔を改善・調整することを技法のことを指します。 illustratorやphotoshopなどで通常文字を打っただけでは「ベタ組み」と呼ばれ、理想的な文字組みとは言えず、基本的に文字と文字の間が空きすぎています。それをカーニングでデザインのバランスを調整します。
■文字の特徴を知りましょう。
文字は1文字1文、字形が違うのでカーニングするにも注意が必要です。 文字の配列で気をつけなければならない組み合わせも出てきます。 例えば「W」「A」など斜めのラインが特徴の文字や、細い縦長の「I」など。 少し多く詰めてあげると、バランスが良くなります。
■photoshopでのカーニング方法
カーニングについて長くなりましたが、ここからがphotoshopで実際にどのようにカーニングしていくか説明していきます。 主に使っていくのが「カーニング設定」と「トラッキング設定」です。
■カーニング設定とトラッキング設定について
文字の固まり全体に間隔のアキを調整と「トラッキング設定」と 特定の文字の組み合わせに対して文字間のアキをを調整する「カーニング設定」があります。 カーニング・トラッキングともに、数値を増減させることで、文字間隔のアキ・詰めが調整できます。
■カーニングの自動設定
さらに、便利な機能としてカーニングのオプションにある「メトリクス」と「オプティカル」というものがあります。どちらも文字組みに対して、自動で文字間を調整してくれる設定なのです。
【二つの違い】
メトリクス:英文フォントのほとんどに含まれているペアカーニング情報に基づいて調整されます。 オプティカル:隣り合った文字間のアキを文字の形に基づいて調節することができます。
■カーニングの練習ができるサイト
カーニングのことはわかったけど、何が正しいかわからないという方もいらっしゃると思います。 そこで練習するサイトがあるのはご存知でしょうか。 ここである程度の感覚を覚えられるのではないでしょうか。 初心者でない方でも、カーニングの大切さを再認識できるゲームです。 とても楽しいので是非、やってみてください。 カーニングゲーム『Kern Type, the kerning game』はこちら
<関連記事>
■デザインの前に入れておきたいPhotoshopプラグイン/第1回:GuideGuide
■デザインの前に入れておきたいPhotoshopプラグイン/第2回:Ink
■WEBデザイン作業の前にやっておきたいPhotoshop初期設定
■Webデザイン作業で 覚えておきたいPhotoshop/画像の切り抜き