webra

ウェブ&グラフィック全般。デザイナーの乱れ書き。

フォントの基本

   

font

グラフィックデザインであれ、webデザインであれ切っても切り離せないのがフォント。フォントの扱いを見ればそのデザイナーのスキルが分かります。今回は自分の復習の意味も込めてフォントのごくごく基本をおさらい。

スポンサードリンク

【1】日本語フォントの基本

日本語のフォントの構成は正方形の枠の中に文字がデザインされています。文字が入っている枠を字面枠(じづらわく)と呼びます。その外に少し大きめの仮想ボディーがあります。Aiなどで文字組をしてるとたまに目にするアレです。

font_body

上図のように、べた組み(文字間0)で組んだ場合はこの仮想ボディー同士が接して並びます。原稿用紙に文字を書く様な感じです。

この文字枠と仮想ボディーの大きさなどは、フォントによって変わります。同じフォントでもかなと漢字によって変わる場合もあります。その辺りがそのフォントのクセになってきます。

【2】英語フォントの基本

日本語フォントな場合は、仮想ボディーと縦横の中心線あたりを覚えておけばよいのですが、英語フォントの場合はさらに沢山の基準線があります。

font_english

名前は別に覚える必要はありませんが、一応解説を。

・アセンダライン
hやkなど縦に長い小文字の上端のライン。ボディーの上端。

・キャップライン
大文字の上端になるライン。フォントによってはアセンダラインと同じ高さのものも。

・Xハイト
小文字のXの上端となるライン。

・ベースライン
基準のラインです。Aiなどの文字揃えに出てくる「欧文ベースライン」はコレです。

・ディセンダライン
jやyなどベースラインの下にはみ出す小文字の下端ラインです。これがくせもの…

 - design, フォント