この文字詰め、どっちが正解？文字間調整（カーニング）のセンスを磨いておこう

現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。

グラフィックデザイナーの鷹野 雅弘です。

今回、私は「文字間の調整（カーニング）」についてのクイズを3問出題します。

早速ですが、クイズです。

以下の3つの作例を見て、AとB、あなたはどちらの「文字の間隔」がよいと感じますか？

1問目「FAT WAVE」（難易度★）

2問目「ディレクション」（難易度★★）

3問目「ワーケーション」（難易度★★★）

いかがでしたか？

私が考える答えは・・・

1問目の答え：B

2問目の答え：A

3問目の答え：B

1．欧文の場合、ペアカーニングの視点で文字間を詰める

1問目では欧文（アルファベットの文）が用いられていました。

欧文において美しい文字間を実現するためには、「ペアカーニング」という視点が必要です。

ペアカーニングとは、親密な恋人同士がベンチに隣り合わせで座るときのように、「この文字とこの文字との間は、これくらいの文字間がちょうどよい」と決められている黄金のルール。

このルールを知らずに自己流で文字間を調整してしまうと、不格好な文字間になってしまいます。

たとえば以下のような文字は、文字間隔に気をつけないといけません。

• AV / AW・・・Aの斜線とV・Wの斜線が離れすぎると不自然になる
• To / Ta・・・Tの横棒の下に小文字が入り込みすぎると不自然になる
• LT / LY・・・Lの右上のスペースが空きすぎると不自然になる
• Yo / Ya・・・Yの下部のスペースが空きすぎると不自然になる

では、先ほどの1問目を振り返ってみましょう。

実は、Aは等間隔に並べただけのもの、Bはペアカーニングを効かせたものでした。

いかがでしょうか。

Bのほうが美しいと感じませんか？

このペアカーニングのルールを知っているかどうかで、文字間へのこだわりが変わってきます。

よりプロフェッショナルなデザインを実現したい場合は、ぜひ知っておいてください。

ペアカーニングをIllustratorで手軽に実現する

では、このペアカーニングを実現するにはどうすればよいのでしょうか？

実は多くのフォントにはペアカーニングの情報が組み込まれており、アプリケーションによっては、その情報をもとにペアカーニングをカンタンに実現できます。

たとえば、IllustratorやAdobe Photoshop、Adobe InDesignといったツールなら、すぐにペアカーニングを反映できます。

初心者向けのデザインツールやビジネス向けのアプリケーションの多くは、文字間の細かな調整機能をもっておらず、ペアカーニングを手軽に適用することができません。

そういったアプリケーションで適用しようとすると、テキストを1文字ずつに分解し、まるでブロックを積むかのように、手作業で一つひとつの位置を決めていくことになります。

そこでオススメなのが、Illustratorを使うことです。

Illustrator上でペアカーニングを効かせたい場合は、【文字】パネルの【文字間のカーニング】（V/Aアイコン）から「メトリクス」または「和文等幅」を選択するだけです。

そうすれば、フォントに組み込まれているペアカーニング情報を反映できます。

（「和文等幅」は、和文では等幅を使うという意味です）

ペアカーニングは目視でも実現できる

もちろん、ペアカーニングは目視でも実現できます。

文字の形状さえ頭の中に入れておけば、隣に並ぶ文字との間隔をどう詰めればよいかがわかります。

たとえば以下のように、文字の形状ごとの特徴を把握しておけばよいのです。

• A・・・左右が斜めに開いているため、隣接する文字との空きが目立つ
• O・・・丸い字形で周囲に空きが発生しやすい
• V / W / Y・・・左右の下が開いているため、隙間が生まれやすい
• T・・・上部の横棒の下にスペースができやすい
• F / P・・・右側にスペースができる

文字間を詰める場合は、文字と文字の間にカーソルを置き、キーボードの【optionキー（Altキー）】＋【←もしくは→】で調整しましょう。

ゆったりと組みたい「アケ組み」の場合も、ペアカーニングを意識する

文字間は詰めるだけでなく、あえて、ゆったりとさせたい場合もあります。

（文字間をゆったり組むことを「アケ組み（あけぐみ）」と呼びます）

その場合も、まずはペアカーニングを効かせた状態にするのがオススメです。

ペアカーニングを効かせてから、細かく微調整しましょう。

以下の作例を見てください。

Aはペアカーニングをせず、目視で文字間を調整したもの。

B’はペアカーニングを効かせたのちに微調整したものです。

B’のほうがAよりもまとまって見えませんか？

2．和文の場合、「小書き」や「句読点」の文字間を詰める

和文（日本語）においても、ペアカーニングのように文字間を詰めることがあります。

和文には「ペアカーニング」という考え方はありませんが、「ィ」や「ョ」のような「小書き」のかな文字は、詰めたほうがよいケースが多くあります。

2問目を振り返ってみましょう。

前半の「ディレ」という文字に注目して見ると、Aのほうが文字間が詰められていて、バランスがまとまっていることがわかります。

この文字列の場合、元々「デ」と「ィ」の間のスペースが広く、文字が離れすぎていました。

そのため、Aでは「デ」と「ィ」の間を詰めています。


また、「小書き」のかな文字と同様に、「句読点」も文字間に注意したほうがよい文字です。

以下の作例を見てください。

AとBでは句読点の位置が微妙に異なっているのですが、あなたはどちらが美しく見えますか？

私の考える正解は「B」です。

「B」は「、（読点）」を「り」のほうに詰めていて、その結果、全体が上手くまとまっています。

3．和文の「ー（音引き）」の長さや「小書き」の大きさを調整する

最後は、和文の「ー（音引き）」の長さと、「小書き」のかな文字のフォントサイズを変えるというテクニックです。

3問目を振り返ってみましょう。

AとBを見比べると、Bのほうが「ワー」や「ケー」で使われている「ー」が少し短かったり、「ション」の「ョ」のフォントサイズが少し小さいことがわかります。

Bのほうの「ー」の長さが、Aの90％となっています。

音引きの長さは、Illustratorの【文字パネル】の水平比率を触ることで調整しています。

また、作例では「ション」の「ョ」のフォントサイズを小さくしていました。

その理由は、文字間を整えたいということもありますが、実はもうひとつの理由がありました。

それは、「シヨン」なのか「ション」なのかをわかりやすく明示するためです。

実はデジタルフォントの場合、「小書き」のかな文字のフォントサイズがあえて大きめにデザインされていることがあります。

たとえば以下は今回の作例で使ったフォント「FOT-ラグラン Std UB」を用いて、大文字の「ヨ」と小文字の「ョ」を並べたものです。

パッと見だと、あまり大きさが変わらないことがわかると思います。

このような仕様になっている理由は、印刷物のなかで「小書き」のかな文字が小さく表示された際、文字がつぶれてしまわないようにと、フォントメーカーさんが配慮してデザインしてくれているためです。

よって、このようなフォントの場合は、「小書き」のかな文字のフォントをあえて小さくしたほうが読みやすくなることがあります。

Illustratorで部分的にフォントサイズを調整したい場合は「垂直比率」と「水平比率」を使う

ちなみにこれはちょっとしたテクニックですが、Illustrator上で特定の文字のフォントサイズを変更する場合は、「垂直比率」と「水平比率」の値を変更するテクニックを知っておきましょう。

なぜこのようなテクニックを用いる必要があるかというと、Illustrator上でテキスト全体を選択すると【文字】パネルの【フォントサイズ】が空白で表示されることがあるからです。

これは異なるフォントサイズが混在していることが原因です。

その場合は、「垂直比率」と「水平比率」を同じ値にして変更することで、フォントサイズをそのままに、見かけ上の大きさを縮小できます。

便利な方法なので覚えておいてください。