Ownedmedia ウェブ制作に役立つコンテンツを発信中!

タイポグラフィ 2019.10.29

欧文タイポグラフィについて学んでみる【文字の構成】

Tags: ,,,

デザインにおいてタイポグラフィはとても重要な要素になります。良いデザインを目指すためにはタイポグラフィを極めることが不可欠であるということで、今回から複数記事にまたがりますが、タイポグラフィについて改めて学んでみたいと思います。第一回目は、まず欧文タイポグラフィにおける文字が持つ構成要素について深く掘り下げたいと思います。

 

ボディとフォーマット

文字には基準となるいろんな線が存在します。そしてそれらの線を元にいろんな高さの単位が決められています。なんとなく理解するというのではなく、それぞれの意味を正しく覚えておきたいですね。まずは文字の基準線について見ていきます。全部で5本の基準線が存在します。

欧文タイポグラフィについて学んでみる【文字の構成】

ベースライン 大文字や小文字の下端を揃えた基準線
キャップライン 大文字テキストの上端を揃えた基準線
ミーンライン 小文字テキストの上端を揃えた基準線
ディセンダーライン ディセンダーの下端を揃えた基準線
アセンダーライン アセンダーの上端を揃えた基準線

 

 

これらの基準線は、文字の位置を揃えたりするなど重要な役割を果たします。そして、これらの基準線に合わせて次のようなタイポグラフィで用いられる高さの単位も存在します。

欧文タイポグラフィについて学んでみる【文字の構成】

 

エックスハイト ベースラインからミーンラインまでの高さで、小文字のxなどを基準としている
キャップハイト ベースラインからキャップラインまでの高さで、大文字の高さに等しい
テキストサイズ キャップハイトとディセンダーを含めた高さで、文字全体の大きさの基準となる
ラインハイト キャップラインから次の行のキャップラインまでの高さで、行高とも呼ばれる

 

エックスハイトやキャップハイトはWebデザインをする上ではあまり意識する場面は少ないかもしれませんが、テキストサイズやラインハイトはCSSでも調整するケースも多々ありますね。

 

文字のエレメント

1つひとつの文字は直線、曲線、円などいろんなラインの要素が合わさって形になっています。それらの要素にはそれぞれ名前がついています。タイポグラフィをより理解するためにしっかりと押さえておきたいポイントですね。

欧文タイポグラフィについて学んでみる【文字の構成】

 

ステム 文字を構成する要素の中で縦方向に伸びるメインのもの
アーム 文字を構成する要素の中でステムに接する水平方向に伸びるもの
ストローク 文字を構成する要素で直線や曲線で描かれた1本のライン
テール 「Q」や「y」や「j」などベースラインより下部に垂れ下がるように伸びている要素
ボウル 曲線で描かれた空白を閉じるように構成されている要素
セリフ ステムなどの端についている装飾用のひげを持つ要素
ターミナル ストロークから独立した装飾的な意味合いを持つ要素
ループ 「g」の文字などに見られるベースラインより下部にある円を描く曲線部分
リンク 「g」の文字などに見られるボウルとループの接続部にあたる曲線部分
バー 「A」や「H」などの両側をストロークやステムに接続されている水平なライン
ショルダー 「h」や「n」や「m」など緩やかな山なりになっている曲線部分
ディセンダー 要素の中においてベースラインより下部に伸びる部分
アセンダー 要素の中においてミーンラインより上部に伸びる部分
カウンター 周囲をボウルやストロークに囲まれた余白部分で閉じているものもあれば空いている場合もある
アクシス セリフ書体の「o」に見られる垂直方向にある対称軸
エーペックス ストロークが交差する点のうち山なりになる部分
バーテックス ストロークが交差する点のうち谷型になる部分

 

書体によってはその形上、存在しない要素もあります。比較的、装飾要素の多いセリフ体が基準となっているようですね。

 

セリフの種類

後日記事でも詳しくまとめていきますが、書体はセリフの形によって大きくカテゴライズすることができます。セリフというのは上記でもまとめている通り、書体の装飾を目的とする、ひげの形をした要素の部分です。セリフの形によって与える印象は大きく変わりますので、デザインにおいても有効に活用できますね。

欧文タイポグラフィについて学んでみる【文字の構成】

 

ブラケットセリフ 要素に対して交差して伸びる要素との接続部分にカーブを描く。ローマン体(セリフ体)に見られる特徴。
ヘアラインセリフ 要素に対して交差して伸びる部分が水平直線で細くなっている。モダンセリフ体に見られる特徴。
スラブセリフ 要素に対して交差して伸びる部分が垂直に交わり太さも出ている。スラブセリフ体に見られる特徴。
サンセリフ 要素に対して交差して伸びる部分が存在しない。サンセリフ体に見られる特徴。

 

セリフの変化は書体の歴史とリンクします。書体の歴史とともにセリフが変化し、新たな書体が誕生してきました。現代ではいろんな書体があり、それぞれが持つセリフに注目してみるのも面白いですね。

 


 

今回は、欧文タイポグラフィについて基礎となる文字の構成要素について詳しく見ていきました。今回は書籍や専門サイトの情報を元にいろんな知識をインプットしてきましたが、同じような文字でも細かい部分でいろんな違いがあり、タイポグラフィを学ぶ上ではとても重要になるのではないでしょうか。次回も同じく欧文タイポグラフィで字体の種類についてまとめていきたいと思います。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?