0%

Designデザインワークショップ

Posted:2019.10.29

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

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

 

ボディとフォーマット

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

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

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

 

 

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

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

 

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

 

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

 

文字のエレメント

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

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

 

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

 

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

 

セリフの種類

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

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

 

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

 

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

 


 

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】