フォントサイズは文字の表示上の大きさを指定するプロパティです。CSS では font-size プロパティを使い、px (ピクセル)、em (親要素基準)、rem (ルート要素基準)、vw (ビューポート幅基準)、% (パーセント) などの単位で指定できます。Web タイポグラフィの基盤となる設定であり、読みやすさ、アクセシビリティ、デザインの一貫性に直接影響します。

Web デザインでは本文テキストに 16px (1rem) を基準とし、見出しは階層に応じて大きくするのが一般的です。h1 は 2rem (32px)、h2 は 1.5rem (24px)、h3 は 1.25rem (20px) といったスケールが広く採用されています。この比率はタイプスケール (Type Scale) と呼ばれ、1.25 倍 (Major Third) や 1.333 倍 (Perfect Fourth) などの数学的な比率に基づいて設計されることが多いです。

各単位にはそれぞれ特性があります。px は絶対値で正確な制御が可能ですが、ブラウザの「フォントサイズ」設定 (既定文字サイズの変更) には追随しません。一方でページ全体のズームでは px 指定のテキストも拡大されるため、「px はまったく大きくならない」わけではなく、追随しないのは文字サイズ設定の側だという区別が実務では重要です。em は親要素のフォントサイズを基準とするため、ネストが深くなると計算が複雑になります。rem はルート要素 (html) のフォントサイズを基準とするため、ネストの影響を受けず予測しやすい値になります。vw はビューポート幅に連動するため、画面サイズに応じた動的なサイズ変更が可能です。

レスポンシブデザインでは clamp() 関数を使った流体タイポグラフィが注目されています。font-size: clamp(1rem, 2.5vw, 2rem) のように最小値・推奨値・最大値を指定することで、画面サイズに応じてフォントサイズが滑らかに変化します。メディアクエリによる段階的な切り替えと異なり、あらゆる画面幅で最適なサイズが自動的に適用される利点があります。ただし推奨値をビューポート単位だけで書くと落とし穴があります。ページズームをしても 1vw が表す実寸は変わらないため、中央値が効いている画面幅では拡大操作をしても文字が大きくなりません。W3C はこれを達成基準 1.4.4 の失敗例 F94 (ビューポート単位の誤用) として挙げています。font-size: clamp(1rem, 0.5rem + 1.5vw, 2rem) のように推奨値へ rem を混ぜ、拡大操作に連動する成分を残しておくのが安全です。

アクセシビリティの観点では、ユーザーがブラウザの設定でフォントサイズを変更できるよう、px ではなく rem を使用することが推奨されます。WCAG 2.2 の達成基準 1.4.4「Resize Text」(レベル AA) では、テキストを 200% まで拡大しても情報や機能が損なわれないことが求められています。なお WCAG には「本文は何 px 以上」という最小サイズの数値規定はありません。本文を 16px 前後に置き 12px 未満を避けるという目安は、規格の要件ではなく実務上の慣習として広く共有されているものだと理解しておくと、根拠の説明で困りません。

文字数カウントとの関連では、フォントサイズは 1 行あたりの表示文字数に直接影響します。同じ幅のコンテナでも、フォントサイズが大きければ 1 行に収まる文字数は減り、小さければ増えます。SNS の投稿やメタディスクリプションなど、表示領域に制約がある場面では、フォントサイズと文字数の関係を意識した設計が重要です。日本語の場合、全角文字は半角文字の約 2 倍の幅を占めるため、フォントサイズの設定が表示レイアウトに与える影響はさらに大きくなります。