フォントサイズは文字の表示上の大きさを指定するプロパティです。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) などの数学的な比率に基づいて設計されることが多いです。CSS デザイン入門の書籍でフォントサイズの設計原則を学べます。

各単位にはそれぞれ特性があります。px は絶対値で正確な制御が可能ですが、ユーザーのブラウザ設定によるサイズ変更に対応できません。em は親要素のフォントサイズを基準とするため、ネストが深くなると計算が複雑になります。rem はルート要素 (html) のフォントサイズを基準とするため、ネストの影響を受けず予測しやすい値になります。vw はビューポート幅に連動するため、画面サイズに応じた動的なサイズ変更が可能です。

レスポンシブデザインでは clamp() 関数を使った流体タイポグラフィが注目されています。font-size: clamp(1rem, 2.5vw, 2rem) のように最小値・推奨値・最大値を指定することで、画面サイズに応じてフォントサイズが滑らかに変化します。メディアクエリによる段階的な切り替えと異なり、あらゆる画面幅で最適なサイズが自動的に適用される利点があります。

アクセシビリティの観点では、ユーザーがブラウザの設定でフォントサイズを変更できるよう、px ではなく rem を使用することが推奨されます。WCAG 2.1 の達成基準 1.4.4 では、テキストを 200% まで拡大しても情報や機能が損なわれないことが求められています。また、最小フォントサイズとして本文テキストは 16px 以上が推奨されており、12px 未満のテキストは多くのユーザーにとって読みにくくなります。レスポンシブ Web デザインの書籍では実践的なフォントサイズ戦略が解説されています。

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