「カーニング」について、みなさんは説明できますでしょうか?知らない方はもちろんのこと、知っている人でも「なんとなくは理解しているけど、いざ説明しようとすると難しい…。」そんな人も多いと思います。カーニングを知らないビギナーデザイナーも、後輩に教えたい先輩デザイナーも改めて振り返りましょう!1.そもそも「カーニング」とは?こちらは特に何も考えず、打った文字です。ベタ打ちと言ったりもします。何の変哲もないですが、よく見ると…なんと!文字同士の距離がバラバラです!そう言われると、なんだかバランスが悪いですよね。「カーニング」とは、そんなバラバラの文字と文字の間隔を、調整することです!実際に例を見てみましょう。2.カーニング あり・なし比較上段が、先ほど見た文字同士の間隔がバラバラの状態。下段が、カーニングを設定したものです。下段の特徴「イ」 と 「ン」の間が広すぎない「ベン」 と 「キョウ」の間が少し広い全体的に文字の間隔が均一で3.文字ごとに間隔が違う理由 ~ボディ~そもそもなぜ文字同士の間隔がバラバラなのでしょうか。その理由は、文字には「ボディ」があるからです。ボディとは文字にはひとつひとつ、実は見えない透明のボックスが存在します。そのボックスを「仮想ボディ」と言います。この仮想ボディ内で 「り」 は文字自体の形が細いので、オレンジの丸くらい隙間が空いています。そしてテキストは特に調整せずベタ打ちすると、仮想ボディにあわせてブロックのように並びます。なので、文字自体の形が太いか細いか、先ほどの太い「あ」か細い「り」かで、文字同士の間隔が変わってしまいます。このバラつきを、カーニングで整える必要があります。【豆知識】なぜボディは存在するのかなぜ仮想ボディなんてものが存在するのか。実は活字印刷のなごりなんです。15世紀頃の日本では金属活字での印刷が主流でした。活字は判子と似ていて、文字を反転してつくられおり、活字を原稿に沿って組み合わせ、インクをつけ、印刷していました。金属活字の外側をボディ、そのさらに内側の文字が実際に収まる四角を字面と呼びます。この2つの要素で文字は成り立っており、それがデジタルになっても残っているから仮想ボディが存在するんですね。ちなみに活字印刷は金属の「ボディ」があったのに対し、デジタルは実態のボディがないので「仮想ボディ」と呼び分けています。4.カーニングとトラッキングの違いカーニングについては理解できたかと思います。しかし!混同されやすい似たような言葉、トラッキングがあります。この2つは何が違うのでしょうか?カーニング単体の文字間での間隔を調整するこちらは手動で文字間隔を調整しております。頭のKは、カーニングの値が60に設定してあります。そして後ろのNの所は、カーニングの値が40に設定してあります。このように、各文字ごとに間隔を調整できるのが「カーニング」です。トラッキングテキスト全体(または指定した範囲)の余白を調整すること「TRACKING」が2つ並んでおります。トラッキングはテキスト全体の文字間を調整してくれる機能です。左:文字同士の間隔が広い右:ギュッとしているトラッキングの数値が大きいほど、間隔が広くなります。2つを併用した例カーニング・トラキングの2つを併用することで、きれいな文字組が完成します。デザインの雰囲気に合わせた文字間隔をトラッキングで設定。特定の文字と文字の間隔が狭すぎる、または広すぎる時にカーニング個別に調整してあげる。トラッキングの数値を大きく設定すると、どこの文字が詰まりすぎているかがわかりにくいときもあります。そんな時は一度トラッキングを小さくするとわかりやすいです。まとめカーニングとは文字と文字の間隔を整えること文字には仮想ボディがあるからカーニングが必要カーニングは単体の文字間を、トラッキングは全体の文字間を調整するカーニングやトラッキングを理解して、きれいな文字組をしましょう!パート2もぜひぜひ ↓メトリクスとオプティカルってどっち使うの!?【カーニングマスター】 Part2https://service.gigno.co.jp/blog/14-2