フォント 文字 行間

デザイナーは文字詰めに命をかけよう　～和文と欧文のフォーマットの違いから考える～

こんにちは。梅雨入りしたのかしてないのか曖昧な天気が続きますが、体調は崩してませんか？比較的嫌われやすい時期ではありますが、私は雨は好きなほうです。「小夜時雨」「涙雨」「白雨」等、雨を含んだ日本語は美しいですよね。

さて、先週は明朝体とゴシック体について書きましたが、今週は和文書体と欧文書体について書こうと思います。

フォントには日本語の漢字、ひらがな、カタカナで構成された「和文書体」と、アルファベットで構成された「欧文書体」があります。二つの書体は、文字の形状の違いから文字のフォーマットも違います。
それぞれのフォーマットから、文字間隔の詰め方について考えてみましょう。

和文書体のフォーマット

和文書体は【仮想ボディ】という正方形のフォーマット内で文字が収まるようにデザインされています。実際は仮想ボディの枠いっぱいではなく、ひとまわり小さい枠（字面枠）の中に文字が作られます。 仮想ボディというのは活版印刷時代の金属活字に由来しています。金属活字では物理的なボディですが、パソコン等で文字組みが出来るようになりボディの概念は消え、仮想ボディと呼ばれるようになりました。漢字、ひらがな、カタカナはすべてこの仮想ボディを元に作られているため、ベタ打ちしてしまうと密度に差がある漢字とひらがなでは、文字間に不自然な空きが出来てしまうのです。

上図のように実際の字面枠はこのようになります。そこで、必要となってくるのが文字詰めです。

タイトル・リード・見出しのような大きなフォントに関しては調整詰め（カーニング・kerning）をします。調整詰めとは、前後の文字にあわせて調整することです。本文では文字を均等に詰める、均等詰め(トラッキング・tracking)をしてあげます。文字数がとんでもなく多い場合は、調整詰めはあまりオススメしません。ですが、Webの場合そこまで長い文章はなかなか出てこないので、調整詰めをしっかりしてあげましょう。

文字詰めに関して、13Q前後の文字サイズである場合はベタ打ちでいいという基本があるそうです。タイトル見出し等よりも気になりにくいというだけであり、きちんと文字詰めをすることは忘れてはいけません。これに関しては紙媒体の話だと思うので、Webに関してはやはり文字詰めをしてあげることが必須だと個人的に思います。

このように適度な文字詰めが必要となってくる和文フォントに対し、ベタ打ちでも読みやすいのが欧文フォントです。

欧文書体のフォーマット

欧文では【ベースライン】という水平のラインがフォーマットになります。

大文字小文字と高さに差がある欧文書体では、ベースラインを軸に「アセンダライン」「キャップライン」「ミーンライン」「ディセンダライン」にそれぞれのパーツが揃うような作りになっています。

●アセンダライン
→hやlなどのアセンダーと呼ばれる上部の垂直な線の高さが基準になるライン
●キャップライン
→大文字などの最も高い位置の基準になるライン
●ミーンライン
→e、mなどの小文字の高さの基準となるライン
●ベースライン
→すべての文字の基準として使用するライン
●ディセンダライン
→g、qなどのベースラインより下に伸びるディセンダーと呼ばれる線が基準になるライン

文字の幅は和文書体と違い、それぞれの文字に合わせた設定になっているので、ベタ打ちでも読みやすい文字間になります。

ですので、英文フォントには和文フォントを絶対に使わないようにしましょう。不自然な空きが出来てしまいます。ただし、本文に英文がある場合、ひとつの単語が複数にまたがらないように文字間を調節してあげる必要があるので、注意しましょう。

メトリクスとオプティカルの違い

文字詰めの設定には【メトリクス】と【オプティカル】がありますが、これらは文字にあわせて自動で文字間を調整してくれるものです。 ●メトリクスカーニング
→欧文フォントに含まれているペアカーニング情報に基づいて調整されます。ペアカーニング情報がないものに関しては文字詰めはされません。
※ペアカーニングとは特定の文字の組み合わせのアキに関する情報が含まれたもので、例えば「P.」「To」「Tr」「Wa」「We」「Ya」「Yo」「Ta」「AT」「FA」などがあります。
膨大にある日本語フォントではペアカーニング情報をもったものはほとんどありませんが、ヒラギノや小塚はペアカーニング情報を含む数少ない和文フォントです。
●オプティカルカーニング
→隣り合った文字間のアキを文字の形に基づいて調整することができます。ペアカーニング情報が含まれていないフォントの場合、こちらを使用します。
*Adobe公式参照

上記を使えば基本的な文字詰めはカンタンに設定することが出来ます。初心者の人で、まずオプティカルで設定してから気になるところを修正する、という方法を使う人もいます。
しかし、ゆくゆくはこれに頼らずきちんと自分で設定できるようになることが理想的です（時間等の問題もあるかと思いますが…）。

以上フォーマットの違いと文字詰めについて説明しましたが、このような特性の違いを理解してあげると次からの文字詰めもやりやすくなると思います。行間の記事とあわせて、美しい文字組みを出来るように頑張りましょう！

関連記事