タイポグラフィは「見えないデザイン」です。ページが快適に読めて最初から最後まで自然に目が流れるとき、タイポグラフィの存在に気づくことはほとんどありません。しかし文字が小さすぎる、行間が詰まりすぎている、フォントが多すぎると、不快感を覚えながらも原因を特定できません。基本的な組版原則を理解することが、コンテンツを読みやすく、信頼されやすくする第一歩です。
1. フォントの分類：知っておくべき5つの種類
| 種類 | 特徴 | 代表フォント | 適した用途 |
|---|---|---|---|
| セリフ体（Serif） | 文字の端に装飾的なヒゲがある | Times New Roman、Georgia | 長文記事、学術文書、印刷物 |
| サンセリフ体（Sans-serif） | 装飾なしのすっきりした線 | Arial、Helvetica、Noto Sans | Web本文、UIインターフェース、モバイル |
| 等幅フォント（Monospace） | すべての文字が同じ幅 | Courier、Fira Code | ソースコード、ターミナル出力 |
| スクリプト体（Script） | 手書き風の文字 | Brush Script、Pacifico | 見出し、装飾、ブランドロゴ |
| ディスプレイ体（Display） | 個性が強く長文には不向き | Impact、Bebas Neue | 大見出し、ポスター、広告 |
Web本文に最もよく使われるのはサンセリフ体です。画面解像度ではセリフの細部が印刷ほど鮮明に表示されないため、サンセリフ体の方があらゆるサイズで優れた可読性を発揮します。
2. 行間：可読性に最も影響するパラメータ
- 本文の推奨値：1.5–1.8倍（フォントサイズに対する倍率）。日本語・中国語は文字密度が高いため、英文より大きな行間（1.7–1.8）が必要です
- 見出しの推奨値：1.1–1.3倍。見出しは文字が大きく視覚的な重みがあるため、行間が広すぎると一体感が失われます
- コードブロック：1.5前後
CSSでは単位なしの倍数（例：line-height: 1.7）を使うと、フォントサイズが変わっても行間が比例してスケールします。
3. フォントサイズと字間
Web本文の最低可読フォントサイズは 16px（ブラウザのデフォルト値でもあります）。14px未満は避けましょう。日本語テキストに対しては字間（letter-spacing）の調整は原則不要です。英語の大文字見出しには +0.05〜+0.1em の正のトラッキングが効果的です。
4. 和欧文混植のルール
- 和文と欧文の間にスペースを入れる：「CSS を使って設定する」のように半角スペースを挿入
- 数字と単位の間にスペース：「1.7 倍の行間」
- 和文には全角句読点を使用：和文中に半角カンマやピリオドを混在させない
- font-family の宣言順序：和文フォントを先に、欧文フォントを後に宣言する
Markdownプレビュー：Markdownエディタで見出し階層・段落間隔・コードブロックの見栄えをリアルタイムで確認できます。
5. テキストのコントラスト比：アクセシビリティの基準
WCAGが定めるコントラスト比の基準：
- AAレベル：本文テキスト 4.5:1 以上、大きなテキスト（18px以上）3:1 以上
- AAAレベル：本文テキスト 7:1 以上、大きなテキスト 4.5:1 以上
よくある問題：白い背景に #999 のグレー文字はコントラスト比が約 2.85:1 でAAを大きく下回ります。
コントラスト比を即座に確認：コントラストチェッカーで前景色と背景色を入力するとWCAG AA/AAAの合否が即座にわかります。
6. フォントのペアリング
- セリフ見出し + サンセリフ本文：伝統的な出版スタイル、ブログや報道サイトに最適
- ディスプレイ見出し + サンセリフ本文：強い個性、ブランドサイトやイベントページに適合
- 同じファミリーの異なるウェイト：最も安全な選択、スタイルが統一されミスが少ない
7. Webフォントの読み込み性能
- サブセット化（Google Fonts）：実際に使う文字だけを読み込む
- font-display: swap：フォント読み込み中はシステムフォントを表示し、FOIT（文字の一時消滅）を防ぐ
- システムフォントを優先：ブランドフォントが不要な場面ではシステムフォントを使うことで読み込みを完全に省略できる
文字数・単語数カウント：文字数カウンターで文字数・単語数・読了時間の目安を確認できます。
まとめ
- Web本文にはサンセリフ体を使用し、日本語・中国語の行間は 1.7–1.8 倍に設定する
- 本文の最低フォントサイズは 16px
- 和欧文間にスペースを入れ、和文には全角句読点を使用する
- テキストのコントラスト比は WCAG AA（4.5:1）以上を確保する
- 1ページに使うフォントは最大 3 種類まで