デザインサプライ-DesignSupply.-※当ウェブサイトを快適に閲覧して頂くためにブラウザのjavascriptを有効にしてください0%DesignデザインワークショップPosted:2019.10.29欧文タイポグラフィについて学んでみる【文字の構成】タイポグラフィWebデザイングラフィックデザインタイポグラフィフォントデザインにおいてタイポグラフィはとても重要な要素になります。良いデザインを目指すためにはタイポグラフィを極めることが不可欠であるということで、今回から複数記事にまたがりますが、タイポグラフィについて改めて学んでみたいと思います。第一回目は、まず欧文タイポグラフィにおける文字が持つ構成要素について深く掘り下げたいと思います。ボディとフォーマット文字には基準となるいろんな線が存在します。それらの線を元にいろんな高さの単位が決められています。なんとなく理解するというのではなく、それぞれの意味を正しく覚えておきたいですね。文字の基準線について見ていきます。全部で5本の基準線が存在します。ベースライン大文字や小文字の下端を揃えた基準線キャップライン大文字テキストの上端を揃えた基準線ミーンライン小文字テキストの上端を揃えた基準線ディセンダーラインディセンダーの下端を揃えた基準線アセンダーラインアセンダーの上端を揃えた基準線これらの基準線は、文字の位置を揃えたりするなど重要な役割を果たします。これらの基準線に合わせて次のようなタイポグラフィで用いられる高さの単位も存在します。エックスハイトベースラインからミーンラインまでの高さで、小文字のxなどを基準としているキャップハイトベースラインからキャップラインまでの高さで、大文字の高さに等しいテキストサイズキャップハイトとディセンダーを含めた高さで、文字全体の大きさの基準となるラインハイトキャップラインから次の行のキャップラインまでの高さで、行高とも呼ばれるエックスハイトやキャップハイトはWebデザインをする上ではあまり意識する場面は少ないかもしれませんが、テキストサイズやラインハイトはCSSでも調整するケースも多々ありますね。文字のエレメント1つひとつの文字は直線、曲線、円などいろんなラインの要素が合わさって形になっています。それらの要素にはそれぞれ名前がついています。タイポグラフィをより理解するためにしっかりと押さえておきたいポイントですね。多いセリフ体が基準となっているようですね。後日記事でも詳しくまとめていきますが、書体はセリフの形によって大きくカテゴライズすることができます。セリフというのは上記でもまとめている通り、書体の装飾を目的とする、ひげの形をした要素の部分です。セリフの形によって与える印象は大きく変わりますので、デザインにおいても有効に活用できますね。ブラケットセリフ要素に対して交差して伸びる要素との接続部分にカーブを描く。ローマン体(セリフ体)に見られる特徴。ヘアラインセリフ要素に対して交差して伸びる部分が水平直線で細くなっている。モダンセリフ体に見られる特徴。スラブセリフ要素に対して交差して伸びる部分が垂直に交わり太さも出ている。スラブセリフ体に見られる特徴。サンセリフ要素に対して交差して伸びる部分が存在しない。サンセリフ体に見られる特徴。セリフの変化は書体の歴史とリンクします。書体の歴史とともにセリフが変化し、新たな書体が誕生してきました。現代ではいろんな書体があり、それぞれが持つセリフに注目してみるのも面白いですね。今回は、欧文タイポグラフィについて基礎となる文字の構成要素について詳しく見ていきました。今回は書籍や専門サイトの情報を元にいろんな知識をインプットしてきましたが、同じような文字でも細かい部分でいろんな違いがあり、タイポグラフィを学ぶ上ではとても重要になるのではないでしょうか。次回も同じく欧文タイポグラフィで字体の種類についてまとめていきたいと思います。ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちらデザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。コメントをキャンセル記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。メールアドレスは公開されませんのでご安心ください。付いている欄は必須項目となります。コメント内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。配色と書体からターゲット別の女性向けデザインを考えてみる。