欧文の「見出し」の左揃えの基本

欧文のの左揃えの基本

欧文で見出しをデザインしたり、アルファベットを組む時には、「ベタ組み」ですと左に揃って見えない事が時々あります。書体の種類や先頭に使用するアルファベットの種類にもよるのですが、特に文字のサイズ（級数）を大きくすればする程、揃ってないように見えてしまいます。ポスターのデザインや、フライヤーのデザインやWebデザインにおいても、大きく文字をグラフィックの要素として配置する際にも注意すべきポイントとなります。プロのグラフィックデザイナー・Webデザイナーさんも、意外と見過ごしているポイントでもあるので、今回は具体例を通して、文字組みにおいて「左に揃える事の重要性」を紹介していきます。

べた組みの例

書体は「Adobe Garamond Pro Regular」です。何も設定していない状態のべた組みです。文字のサイズは「120Q」行送りは「125H」でサンプルを作っています。最初に左に揃っているか確認してみて下さい。

1行目を基準にずれているかチェック！

最初の「T」の行を基準に見ていくと、「F」「C」で始まる行が右に入り込んでいるように見え、さらに「C」で始まる行はさらに右に入っているように見えます。「J」で始まる最後の行は左に飛び出ているように見えます。4行目の「P」は、1行目の「T」に揃っているように見えますが、視覚的に他の行の影響も受けますので、微調整しながら「P」の文字もしっかりケアしていきましょう。

行間もチェックして下さい！

欧文の場合は「大文字」「小文字」様々なフォルムでデザインされていますので、行間に大きな影響を与えます。1行目の「y」と2行目の「F」の間隔が近くなっています。又、2行目の「g」と、3行目の「l」が近すぎてぶつかりそうな間隔に見えます。

綺麗に組む為には、左に揃える作業だけでなく、行送りの調整も行う必要があります。特に「l」と「g」の間隔は調整する必要があります。

カーニングで調整します

よく観察して、ずれている間隔を感じたら、調整作業に入ります。1行目を基準に考えましたので「1行目」の調整はとりあえず行わず、他の行から調整を行っていきます。

最初に感じた通りカーニングを調整

最初にずれいている感じた通りに修正していきます。基準のラインがないと調整ができませんので、Illustrator・Photoshopで１本「ガイド」を引いておきましょう。

べた組みにガイドを引いた例

Illustrator・Photoshopでガイドを引いたサンプル画面

先頭の行の「T」に合わせて、ガイドを引くと先程感じた「ずれ」が見てとれますが、注意すべきポイントがあります。それは全ての文字をガイドに揃えれば、綺麗に左に揃うわけではないのです。視覚的にお互いに影響を及ぼしますので、例えば2行目はガイドより左に出てる。3行目は少しだけ右によってるといった様に、微調整が必要になってきます。人間の視覚は完璧ではないので、お互いの行が影響しあい錯覚もおこす事が原因です。デザイナーとしてはこの事を頭にいれてから調整作業を行う必要があります。

左に揃えた例

上の例が左に揃ってみえるように先頭の文字のカーニング量を調整したものです。ガイドは非表示にしてカーニングを調整していきます。ガイドがあるとかえってカーニング量を調整しずらくなりますので注意して下さい。調整中に、時々、揃っているかどうか分からなくなりますので、そのときはモニターから目を外し他のモノを見てから、時間をおいて作業すると客観視しやすくなります。