デザイナーなら知っておいて損はない文字の基本!和文と欧文の基準線

WEBデザイン

こんにちは!デザイナーのヒロです。

ヒロ
ヒロ

書体の基準線って知ってますか?

デザインをする上で、書体の知識は必須です!

少しグラフィカルなデザインになると、書体を少し自分でカスタマイズしたり、ゼロから作ることもあるかもしれません。

そんな時に覚えておいて欲しいのが、基準線です!

和文と欧文では基準線が全然違うので、2つとも覚えておきましょう!

和文の基準線は正方形

和文は、ひらがな・カタカナ・漢字など複雑な分、基準線はシンプルです。

和文は、正方形の枠の中に文字がデザインされています。

この枠を、字面枠(じづらわく)と呼びます!

その字面枠の外側を囲むように、「仮想ボディー」と呼ばれる、見えない正方形の枠があります。

文字同士をぴたっとくっつけると、この仮想ボディー同士がくっついた形になります。

この文字枠と仮想ボディーの大きさなどは、フォントによって変わります。

同じフォントでも、かなと漢字によって変わる場合もあります。

その辺りが、そのフォントの個性になってきますね。

欧文の基準線とエリア

和文は、仮想ボディーと縦横の中心線を覚えておけばよいのですが、

英語フォントの場合はさらに沢山の基準線、そしてエリアがあります!

エックスハイト・アセンダ・ディセンダ

まずは、小文字のxに注目しましょう!

まず、小文字のxの高さのことを「エックスハイト」と呼びます。

これはわかりやすいですね!

そして、

「エックスハイト」より上のエリアを、アセンダ、

「エックスハイト」より下のエリアを、ディセンダと呼びます。

3つのエリアが見えてきましたね。

すると、3つのエリアの区切り線として、4つのラインも見えてきます。

アセンダの上のラインを、アセンダライン。

エックスハイトの上のラインを、ミーンライン。

エックスハイトの下のラインを、ベースライン。

ディセンダの下のラインを、ディセンダラインと呼びます。

5つの基準線

ベースライン

ベースラインは、多くのアルファベットのベースとなるラインです。

小文字の「g」や「j」などの小文字は、ベースラインよりも下へ伸びるからです。

ディセンダライン

ベースラインより下に伸びた文字の中で、1番下の文字から引いたラインのことです。

つまり、このラインより下にはみ出す文字はありません!

アセンダライン

反対に、「b」や「h」など、上へ伸びた文字の中で、1番上の文字から引いたラインのことです。

つまり、アセンダラインとディセンダラインの中に、すべてのアルファベットが並びます。

ミーンライン

エックスハイトの上のラインのことをミーンラインと呼びます。

このラインが、アルファベットの小文字の上の基準線になります。

ここまでは、まだ大丈夫ですね!

なんとそこに、5本目のラインが入ります。

キャップライン

それが大文字のXの、上のラインのキャップラインです。

このラインは、アルファベットの大文字の上の基準線になります。

ミーンラインとキャップラインは、あくまで基準線なので、デザインによって飛び出してしまっても大丈夫です!

最後に、アセンダラインからディセンダラインまでの間のことを、

ボディハイトと呼びます。つまり、文字の大きさになりますね。

これらが、欧文で基準となるラインやエリアです!

これを覚えておくと、デザインをする上で、いろんな場面で理解が早くなるので、

ぜひ覚えておきましょう。

いかがでしたか?

この基準線を覚えて、このあと何に使うのかよくわからないですよね。

でも大丈夫!いろいろな場面で使うようになるので、安心してください。

それでは、次の記事では、文字の大きさの単位を説明しますね!

この記事を書いた人
ヒロ

新卒でWeb制作会社にWebデザイナーとして入社→アートディレクターにキャリアップ → 7年後、事業会社でプロダクトデザイナーとして勤務。キャリア10年以上のベテランデザイナー。マンガを愛している。

ヒロをフォローする
WEBデザイン
スポンサーリンク
ヒロをフォローする
WEBデザインハイスクール

コメント

タイトルとURLをコピーしました