Webデザインの基礎知識シリーズ、今回のテーマは「タイポグラフィ」。文字サイズをブレークポイントごとに指定する時代は終わりつつあり、CSSのclamp()を使った流動的な指定と、1ファイルで多彩なウェイトを表現できる可変フォント（Variable Fonts）が主流になっています。あわせて、読みやすさを左右する行長・行間の考え方と、WCAG 2.2が求めるアクセシビリティ基準も押さえておきましょう。
可変フォント（Variable Fonts）――1ファイルで無段階にウェイトを操る
可変フォントは、Regular・Medium・Boldといった複数のウェイトやスタイルを1つのフォントファイルに格納し、CSSからfont-weightやfont-widthなどの「軸（axis）」を無段階に指定できる仕組みです。従来は太さの数だけファイルを読み込む必要がありましたが、可変フォントなら1ファイルで済むため、ページの軽量化と表現の自由度向上を同時に実現できます。
- 従来方式：Regular・Medium・Bold…をそれぞれ別ファイルで読み込む
- 可変フォント：1ファイルを読み込み、
font-weight: 540;のように任意の値を指定できる
配信形式は圧縮率の高いWOFF2が基本です。Google FontsでもInterやFrauncesといった人気の可変フォントが提供されており、対応ブラウザもほぼ100%に達しているため、対応ファミリーがあれば可変フォントを優先するのが2026年時点の基本方針です。
流動的タイポグラフィ――clamp()とモジュラースケール
clamp(最小値, 推奨値, 最大値)という3つの引数を取るCSSのclamp()関数を使うと、ビューポート幅に応じて文字サイズを連続的に変化させつつ、上限・下限を超えないよう制御できます。ブレークポイントごとにfont-sizeを切り替えるメディアクエリが不要になり、スマホからワイドモニターまで比例した見た目を保てるのが利点です。
h1 {
font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);
}複数サイズを一括生成したい場合は、UtopiaのFluid Type Scale Calculatorが便利です。最小・最大のビューポート幅と、そこで使うタイプスケール比率（例：1.2倍のマイナーサードや1.333倍のパーフェクトフォース）を入力するだけで、見出しから注釈まで一貫した比率のスケールとclamp()のCSSを自動生成してくれます。
| 比率名 | 倍率 | 用途の目安 |
|---|---|---|
| Minor Third | 1.2 | 本文中心で差を控えめにしたい場合 |
| Major Third | 1.25 | 汎用的な見出し〜本文のバランス |
| Perfect Fourth | 1.333 | 見出しの存在感を強めたい場合 |
| Perfect Fifth | 1.5 | 大胆な階層差をつけたいランディングページ等 |
行長・行間――読みやすさを決める「測定（Measure）」
デザイン調査機関Baymard Instituteによれば、読みやすい行長（1行あたりの文字数）の目安は45〜90文字、長文であれば60〜70文字前後が最も推奨されています。行が短すぎると視線の移動回数が増えて疲れやすく、逆に長すぎると次の行の頭を見失いやすくなります。
- 行の長さ（測定）：本文で目安60〜75文字程度
- 行間：フォントサイズの1.5倍前後を基準に、行が長い場合は1.6〜1.7倍まで広げる
- 段落間の余白：行間より広めに取り、段落の区切りを視覚的に明確にする
日本語サイトでは全角文字を基準に行長を調整する必要がありますが、考え方（短すぎず長すぎない一行、行間で調整する）は共通です。
アクセシビリティ――WCAG 2.2が求める最低限のライン
WCAG 2.2のレベルAAでは、通常サイズの文字（おおむね18pt未満、太字なら14pt未満）と背景色のコントラスト比を4.5:1以上、大きな文字（18pt以上、太字なら14pt以上）では3:1以上を確保するよう求めています。より厳格なレベルAAAでは通常文字で7:1が基準です。
コントラスト以外にも、次の2点はタイポグラフィ実装で見落としやすいポイントです。
- 拡大対応：文字サイズを200%まで拡大してもコンテンツや機能が失われないこと
- テキスト間隔の変更：行間・文字間・単語間をユーザーが変更しても、内容が隠れたり欠けたりしないこと（1.4.12 Text Spacing）
固定pxでの文字サイズ指定や、余白の少ないコンポーネントはこれらの基準に抵触しやすいため、流動的タイポグラフィと合わせて早い段階でチェックしておくと手戻りが少なくなります。
まとめ
2026年のWebタイポグラフィは、「可変フォントで軽量に多彩な表現を」「clamp()とモジュラースケールで画面サイズに応じて滑らかに」「行長・行間で読みやすさを確保」「WCAG 2.2でアクセシビリティの最低ラインを担保」という4本柱で考えると整理しやすくなります。まずは自分のサイトの見出し・本文のフォントサイズ指定を洗い出し、Utopiaのようなツールでclamp()ベースのスケールに置き換えてみるところから始めてみてはいかがでしょうか。
主な情報源
- clamp() CSS function – MDN Web Docs
- Variable fonts guide – MDN Web Docs
- Variable fonts in real life – web.dev
- Fluid type scale calculator – Utopia
- Meet Utopia: Designing And Building With Fluid Type And Space Scales – Smashing Magazine
- Readability: The Optimal Line Length – Baymard Institute
- Web Content Accessibility Guidelines (WCAG) 2.2 – W3C
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。