文字のデザイン（タイポグラフィ）
タイポグラフィとは
文字をページ上に読みやすく配置したり、文字そのものをデザインとして利用する手法を「タイポグラフィ」といいます。書体（フォント）や文字の大きさ、行間など様々な要素を調節することで、文字や文章のデザインを行います。
「タイポグラフィー」に関する用語
書体（フォント）
同じデザインで統一された文字、数字、記号のことです。
Windowsに入っている「游ゴシック体」「メイリオ」「MSゴシック」などもフォントの一種で、その他様々なフォントがパソコンにはインストールされています。
- フォントファミリー
デザインは同じで、太さや幅などが違う様々なスタイルの書体グループ全体の事をフォントファミリーといいます。太さが違うものや幅が違うものなど、種類はフォントによって様々です。
- フォントカテゴリー
セリフ体→先端や角にしっぽが付いている文字
サンセリフ体→しっぽがついていない文字
スクリプト体→手描きの筆記体風文字
装飾体（ディスプレイ体）→デザイン処理がされたような装飾文字
文字サイズ
文字サイズは読者層や端末によっても調節する必要があります。読者が子供や高齢者の場合は文字サイズを大きめにする、タイトルなど重要な文字は大きくして目立たせる、など、目的にあわせて大きさを決めます。
参考：フォントサイズのベストな設定は？可読性の高いWEBデザインのポイント – 株式会社日本デザイン
ウェイト
文字の太さです。
Light、Regular、Bold、Heavy、などで表します。太さの種類はフォントによって異なります。
行間（行送り）
行と行の間隔です。
文章の長さや文字の大きさによって調節します。狭いと読みにくくなります。
参考：フォントサイズのベストな設定は？可読性の高いWEBデザインのポイント – 株式会社日本デザイン
字間
文字と文字の間隔です。カーニング、トラッキング、文字詰め、といった呼び方もあります。
文字をそのまま並べただけでは、文字の形によって間隔が広く見えてしまうことがあるため、文字間を調節することできれいに見えるように調節をします。
参考：Kern Type（文字詰めの練習ができるサイト）
行の長さ
１行が長すぎると次の行を探しづらくなり、逆に短すぎると改行が多くなり読みづらくなるため、ほどよい長さにする必要があります。Webサイトの場合はコンテンツの幅を調節し、印刷物の場合はコラムと呼ばれるブロックを複数用意し、１行の幅を調節して読みやすくします。
フォントのデータ形式
TrueType：汎用性が高く一般的に多く普及されている書体。
OpneType：装飾文字や旧字体など幅広い文字をサポートしていまする。
PostScript：印刷向けの高品質な書体。対応機器やソフトが必要になります。
参考：TrueType、PostScript、および OpenType フォントの違い
参考：TrueTypeとOpenTypeとは【フォントの違い】
「タイポグラフィー」のポイント
適切な書体を選択する
- デザインのテーマにあっている書体を選ぶ。
- 使用する場所に適切な書体を選択する。
- 見出し→インパクトのある書体
- 本文→読みやすい書体
コントラストを意識する
- 大きさ、太さ、色のコントラスト（差や違い）をつける。
- 中途半端に似ている書体をいくつも使用しない。
その他
- 特徴のある書体は１ページにつき１種類程度にする。
- タイトルや見出しは本文より強調する。
- 本文などの長い文章は読みやすさを優先する。
- 特殊効果は使い過ぎない（Photoshopのレイヤー効果など）。
- 欧文（アルファベット）には欧文用書体を使用する。
- 日本語と欧文が混在する場合は、必要に応じて欧文のサイズを調節する。
デザインでよく使われる書体
デザインでよく使用されるフォントを日本語フォントと欧文フォント（アルファベット用のフォント）に分けて紹介します。
日本語書体
- モリサワ各種（新ゴ・リュウミン・中ゴシックBBB・ゴシックMB101）
- ヒラギノ各種（ヒラギノ角ゴ・ヒラギノ明朝）
- 小塚各種（小塚ゴシック・小塚明朝）
欧文書体
- Helvetica
- Futura
- Garamond
- Times New Roman
参考：ロゴに同じフォントを使う有名企業まとめ｜フォントが与える印象の違い｜セブンデックス
参考：ロゴデザイン開発の定番フォント10選と展開事例 – ブランディング会社｜株式会社チビコ | CHIBICO
書体（フォント）の入手方法
WindowsやMacにはじめからインストールされている書体以外のフォントを使うにはいくつかの方法があります。
サブスクリプションで契約する
毎月定額の料金を払って使用する方法です。一般的なサブスクリプションと同じでたくさんのフォントから自由に選んで使用することができ、新しいフォントが追加されることもあります。Adobe FontsはAdobeCCに含まれています。
購入する
必要なフォントのみを単体で購入する方法です。買い切りなので一度お金を払えばずっと使用することができます。
フリーフォントを使用する
インターネット上で配布されている無料のフォントを使用する方法です。利用規約によっては商用利用は不可の場合もあるので気をつけましょう。
- Google Fonts
- フォントフリー – 無料の日本語フリーフォント投稿サイト
- 2022年用、日本語のフリーフォント625種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス
Webデザインでフォントを使用する時の注意点
Webサイトで文字を表示する場合、基本的にはパソコンにインストールされている書体しか表示できません。そのため、特殊な書体を使用すると、ユーザーの環境によっては別の書体に置き換わってしまいます。それを防ぐには以下の方法があります。
- 各OSやデバイスに最初からインストールされている書体を使用する
- 画像にする
- Webフォントを使用する
Webフォントとは、インターネット上に保存されている書体を使用してブラウザに表示するという技術です。パソコンにインストールされていない書体でも表示することができるため、様々な書体を使用することができます。
参考：Webフォントサイトまとめ9選！とりあえず一度使ってみませんか？
参考：Webデザイナーなら知っておきたいWebタイポグラフィの基本
参考：Webデザイナー（私）によるタイポグラフィーレイアウトの注意書き
参考書籍
さらに詳しく知りたい人はこちらの本を是非読んでみてください。