フォント基礎概論〜第2回〜

こんにちは。UIデザイナーのTaiseiです。第1回をお読み頂いた方、ありがとうございました！第2回の投稿がだいぶ遅くなってしまいました。すみません。第1回をまだお読み頂いていない方はぜひご覧ください！

さっそくですが、今回はフォントの基準線についてお話します。フォントの構造を把握するには基準線を理解すると早いです。前回同様、和文と欧文に分けてご説明します。

和文フォントの基準線

和文フォントは厳密には基準"線"ではなく、箱のような概念ですが、構造はいたってシンプルです。

仮想ボディ
Photoshop、SketchあるいはCSSなどで指定したフォントサイズ＝仮想ボディのサイズになります。なぜ仮想なのかというと、活版印刷の「ボディ」という用語を使用しているためです。活版印刷では「活字」という、言ってしまえば判子のようなものに文字を彫って使用します。その判子の大きさがボディサイズということですが、デバイス上では物理的な判子は必要ないですよね。なので仮想ボディという言い方をしています。

字面枠
仮想ボディの内側にある、いわば文字の真の大きさを字面（じづら）といいます。字面枠が基準になります。

欧文フォントの基準線

欧文フォントの基準線は和文と比べると少し複雑です。
まず欧文は和文と異なりUpper case（大文字）とLower case（小文字）の概念があります。その分、基準となる線が増えています。以下の図を御覧ください。

Base line
大文字の下端にある土台となる基準線です。大文字は基本的にBase lineから下にはみ出しませんがQのみはみ出すパターンが多いです。中学生の時に使っていた英語のノートにはこのベースラインが引かれてましたね。

Cap line
上部の基準線で、基本的に大文字はここから上にはみ出すことはありません。ほぼ全ての大文字の大きさはBase lineからCap lineまでとなります。

x height
小文字のxを基準としたx heightという高さの基準値です。なぜvでもなくwでもなくxなのか。非常に参考になる記事がありました。

小文字の高さは何と呼ぶ？

Mean line
x heightの上端に引いた基準線です。小文字にはこのx heightから上や下にはみ出すb, d, f, h, g, j, p, yなどの文字があります。

Ascender（アセンダ）とAscender line
b, d, f, hなどのx heightから上にはみ出した部分をAscender（アセンダ）といい、アセンダの上端にあるのはAscender lineといいます。小文字は原則このAscender lineから上にはみ出すことはありません。

Descender（ディセンダ）とDescender line
gやjなどx heightから下にはみ出した部分、またはBase lineからはみ出している部分をDescender（ディセンダ）、ディセンダの最端にある基準線をDescender lineといいます。小文字はこのDescender lineから下にはみ出すことはありません。

そしてDescender lineからAscender lineまで（図の黄色のエリア）が文字の大きさになります。PhotoshopやSketchで指定する文字サイズ、CSSで指定するfont-sizeは原則この大きさ（高さ）のになります。

基準線はどう役立つ？

正直、フォントの基準線の名前を覚えていなくても問題はないと思います。現にWeb業界に携わるデザイナー、エンジニアの中でも全てを把握している方は多くないと思います。ただ基準線を理解しておくことで、細かいデザイン指示の際に便利なだけでなく、次にお話する混植の際によりきれいなデザインを意識することができるようになります。

和文と欧文の混植時に考えるべきこと

和文と欧文など、2種類以上のフォントを文章の中で一緒に使用することを混植といいます。和文と欧文では構造が異なるので、同時に扱う上で気をつけなければならない点があります。上で見たように欧文の大文字はBase lineから下にははみ出しませんが、小文字ははみ出します。

①欧文大文字と和文のフォントサイズのギャップの認識
まず欧文のフォントサイズはディセンダを含めた値なので、欧文の大文字を使う場合はディセンダ分の空白が存在することを認識しておかなければなりません。
例えば「A」と「あ」を並べた時、同じフォントサイズを指定しているはずなのに大きさが違って見えます。これは上記の理由でAにはディセンダ分の空白があるからですね。特にDescender lineとBase lineの距離が長いフォントを使用する場合は大きさの違いが顕著に現れると思います。フォントサイズが大きくなればなるほど、その差が際立って見えますね。
このような場合は、必要に応じて和文より欧文のフォントサイズをやや大きくする、あるいは逆に微調整をする必要がでてきますね。ちなみにiOSには日本語のシステムフォントを1pt縮小して表示させる仕様になっています。ただ従属欧文については状況が異なる場合があります。

従属欧文とは？
和文フォントに入っている欧文を従属欧文といいます。（例：ヒラギノ角ゴシックProNの中の英字アルファベットたち）これらは基本的におまけとして捉えられ、あえて見出しのデザインなどで使用されることはほぼありません。しかしながら、和文フォントの従属欧文の中には「混植の際のフォントサイズのギャップを意識したデザインになっているものもある」ということを覚えて置きましょう。ヒラギノ角ゴシックProNは従属欧文が混植時の文字サイズに差が出ないようにデザインされています。webサイトの記事の本文などの欧文はこうした従属欧文を使用しても差し支えないと思います。

以下の画像は同じテキストエリアに続けて文字を入力した際に、Aの文字のみ変更した場合はどのようになるか比較したものです。すべて同じフォントサイズで指定していますが、和文フォントのヒラギノと欧文フォントのHelveticaの混植では「あ」より「A」のほうが少し小さく見えると思います。
対してヒラギノの従属欧文を使用した場合はAが和文フォントに合わせて少し大きくなっています。（もちろんフォントサイズの調整はこちらでは行っておりません）

このように和文フォントと欧文フォントには同じフォントサイズでも大きさには差がある、従属欧文はデザインには不向きだが和文との混植を考慮したデザインになっている場合もあるという２つのことを意識してくといいかと思います。

今回は以上になります。
次回は文字のカーニング、行間等についてお話できればと思います。
最後までお読みいただきありがとうございました。