Webタイポグラフィ実践ガイド｜読みやすさとUXを向上させるCSS設計7つのポイント
シリーズ この記事は「Webデザイン・UIメモ」の一部です。 シリーズ目次を見る
2026年5月時点、タイポグラフィは読みやすさ・滞在・ブランド印象に直結します。フロント実装者向けに、サイズ・行間・コントラストの積み上げを CSS 例とともに7論点で整理します。配色文脈は [color-psychology](/posts/color-psychology/)、[minimal-design](/posts/minimal-design/)、シリーズは [series-web-design](/posts/series-web-design/) も参照してください。
Web でフォントはセリフとサンセリフ、どう選ぶ？
よくある失敗： 細い UI 向けフォントを長文に流用し、字間も行長もそのままで視認性だけが落ちる。
- セリフ体（Georgia, Noto Serif JP）：伝統的・権威的な印象。長文記事、書籍、新聞サイトに適する
- サンセリフ体（Inter, Roboto, Noto Sans JP）：モダン・クリーンな印象。UI全般やデジタルコンテンツに最適。画面上の可読性が高い
日本語 Web フォントはどう選ぶ？
- UI 向け（Inter 等）と長文向け（Noto Serif JP 等）を用途で分けると、見出しと本文の役割分担がしやすい
- Noto Sans JP / Noto Serif JP：Google Fonts 等で配信。可読性が高く複数ウェイトを選べる
Web フォント読み込みで何を気にする？
/* パフォーマンスを考慮したフォント設定 */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap; /* フォールバック→読込完了後切替 */
}
/* font-displayの種類 */
/* swap: すぐにフォールバックフォント表示、後で切替 */
/* fallback: 短時間待機後、フォールバック */
/* optional: ネットワーク状況に応じて適用 */見出しと本文の階層はどう設計する？
よくある失敗： 見出しと本文の差が色だけになり、スクリーンリーダーや一覧表示で階層が伝わらない。
フォントサイズ・ウェイト・色の3要素で視覚的な優先順位をつけます。モジュラースケール（完全五度 1.5倍）を使うと調和のとれたサイズ設計が可能です。
h1 { font-size: 3rem; font-weight: 700; line-height: 1.2; color: var(--text-primary); }
h2 { font-size: 2.25rem; font-weight: 600; line-height: 1.3; }
h3 { font-size: 1.75rem; font-weight: 500; line-height: 1.4; }
body { font-size: 1rem; font-weight: 400; line-height: 1.6; color: var(--text-secondary); }
:root {
--text-primary: #1a1a1a;
--text-secondary: #4a4a4a;
--text-tertiary: #767676;
}行間（line-height）はどう調整する？
よくある失敗： 行間だけ広げて行長（1行の文字数）を放ったままにし、横に視線が迷う。
- 本文：1.5〜1.8（推奨 1.6）。行が長いほど広めに設定
- 見出し：1.1〜1.3（推奨 1.2）。複数行になる場合は少し広めに
- ボタン・UI要素：1.0〜1.2
行長は60〜70文字/行（max-width: 65ch）が最も読みやすいとされています。
letter-spacing はどこで触る？
よくある失敗： 日本語本文まで不要に字間を空け、レイアウトがバラける。
h1 { letter-spacing: -0.02em; } /* 見出しは詰める */
.uppercase { text-transform: uppercase; letter-spacing: 0.1em; } /* 大文字は広げる */
.ja-title { letter-spacing: 0.05em; } /* 日本語タイトルで開放感 */
p { letter-spacing: normal; } /* 本文は通常 */レスポンシブタイポは clamp でどう組む？
よくある失敗： clamp の最小値だけ小さくしすぎて、実機で本文が読めない。
CSSのclamp()関数を使うと、ビューポート幅に応じてフォントサイズが滑らかに変化し、ブレークポイントでの急な変化を避けられます。
h1 { font-size: clamp(2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 3rem); }
p { font-size: clamp(1rem, 1.5vw, 1.125rem); }
.content {
max-width: 65ch;
margin: 0 auto;
padding: 0 clamp(1rem, 3vw, 2rem); /* 余白もFluid */
}コントラスト比とアクセシビリティの基準は？
よくある失敗： グレーの薄文字を「おしゃれ」として残し、屋外視認や老眼読者で落ちる。
WCAG 2.2 の基準を守りましょう。
- AA基準（最低限）：通常テキスト 4.5:1、大きいテキスト 3:1
- AAA基準（推奨）：通常テキスト 7:1、大きいテキスト 4.5:1
/* 十分なコントラスト例 */
.text { color: #222; background: #fff; } /* 16.1:1 (AAA) */
/* 背景画像上のテキスト */
.hero::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5); /* 半透明オーバーレイ */
}CSS 変数でタイポをデザインシステム化するには？
よくある失敗： トークン名が場所依存（--blue-header）になり、テーマ変更で一括置換できない。
プロジェクト全体で一貫したタイポグラフィを維持するには、CSS変数でトークン化します。
:root {
--font-primary: 'Noto Sans JP', sans-serif;
--font-heading: 'Noto Serif JP', serif;
--font-mono: 'Fira Code', monospace;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 2rem;
}まとめ：タイポは何をセットで揃える？
タイポは「フォントを1つ決めれば終わり」ではなく、階層・行間・コントラスト・レスポンシブをセットで揃える作業です。小さく試して計測し、サイト全体のデザインシステムに落とし込むと更新も楽になります。