【デザイン初心者向け】タイポグラフィ欧文書体の構造と基礎

こんにちは！Tekito styleを運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

タイポグラフィとは、簡潔に言えば文字によるデザインのことです。文字の配置や構成、文字サイズ、行間、フォント選びなど様々な要素が絡んできます。

タイポグラフィは、もともと活版印刷術として活用されていました。現在では、印刷技術のことだけでなく、活字書体に関連するデザイン全般を意味しています。

普段の生活の中で、「文字を読まない」ということはないですよね？ポスターや広告、Webサイトなど、タイポグラフィーを活用することでより見やすく、そして伝えたいことを伝えられるようになります。「WEBデザインの95%はタイポグラフィである」とも言われるほど、デザイナーにとって不可欠な要素です。

今回はデザインを学び初めた初心者の方に向けて、タイポグラフィの中でも重要な欧文書体の基礎をお伝えいたします。

タイポグラフィ – 欧文書体の構造

ますは欧文書体の基本的な部位の名称や、種類について解説していきます。

セリフとサンセリフ

セリフ（serif）とは、文字のストロークの端にある小さな髭の様なものを意味します。セリフを持った書体のことをセリフ体、または紀元としてローマ時代に作られたという意味から、ローマン体とも呼ばれています。

一方セリフを持たない書体もあります、そのことをサンセリフ体と呼びます（フランス語でサンは「ない」の意味）。

欧文書体の部位の名称

欧文書体には、それぞれの部位に名称がついています。

・アクシス : 軸の意味
・ヘアライン：髪の毛のように細いの意味
・ステム　：　縦軸のこと

よくタイポグラフィで使うのは、セリフとステムですね。細かいですが、頭にいれておきましょう！

欧文書体の字面構成

欧文書体のデザインは下図のように5つの線、

・ベースライン
・ミーンライン
・キャップライン
・アセンダーライン
・ディセンダーライン

に沿ってデザインされています。欧文書体で異なる種類の文字を整列する際は、基本的にはベースラインが目安になります。

またXハイトは小文字の高さ、キャップハイトは大文字の高さを示しています。タイポグラフィを実践する際は、上記の文字を構成するラインを意識しておきましょう。

行間と行送りの違いに注意

タイポグラフィでよく混同しがちな要素として、行間と行送りがあります。

なかなか違いが分かりにくいところではありますが、タイポグラフィでは違いを意識しておきましょう。ちなみに一般的なデザインツールでは行送りが使われています。

レタースペース/ワードスペース

単語間が持つスペースのことをレタースペースと呼び、単語と単語の間のスペースはワードスペースと呼びます。タイポグラフィに馴染みがないと、なかなかレタースペースなどは意識する機会がないかもしれませんが、文字組やカーニングなどではとても重要な要素となりますので、こちらも意識するようにしましょう。