過去バージョン

font-size とは

font-size は要素内のテキストのフォントサイズを指定する CSS プロパティです。指定値は子要素にも継承され、相対単位の基準値としても使われます。

基本構文

セレクタ {
  font-size: 値;
}

/* 例 */
body { font-size: 16px; }
h1   { font-size: 2rem; }
p    { font-size: 1em; }
small{ font-size: 0.875em; }

指定できる単位

px と rem の違い

px は絶対サイズ、rem はルート基準のスケーラブルサイズです。ユーザーがブラウザの「文字サイズを大きく」を選んだ場合、px は変わらず、rem は連動して大きくなります。アクセシビリティ的には rem 推奨です。

:root { font-size: 16px; }      /* 1rem = 16px 相当 */

h1 { font-size: 2rem; }         /* = 32px */
p  { font-size: 1rem; }         /* = 16px */
.note { font-size: 0.875rem; }  /* = 14px */

em の入れ子問題

em は親基準のため、入れ子にすると倍々に膨らみます。

<div style="font-size:1.2em">  <!-- 1.2em -->
  <div style="font-size:1.2em">  <!-- 1.44em -->
    <div style="font-size:1.2em">  <!-- 1.728em -->
      文字が思ったより大きい!
    </div>
  </div>
</div>

パーツのスケールに em を使うときは「自分の中で完結する」階層に限定すると安全です。全体のスケールには rem を使い分けるのが定番。

レスポンシブ: clamp() で 1 行

従来は @media で段階的に切り替えていたフォントサイズを、clamp() で滑らかに連続変化させられます。

/* clamp(下限, 推奨, 上限) */
h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

/* スマホで 24px、PC で 48px くらいまで滑らかに伸びる */

キーワード指定

ユーザー側の設定に追従しやすいですが、デザインの細部制御には向きません。

line-height との関係

font-size を変えると line-height（行の高さ）も連動して見え方が変わります。読みやすさのため、line-height: 1.5 のような単位なしの比率で指定すると、フォントサイズに比例して自動調整されます。

body {
  font-size: 1rem;
  line-height: 1.6;   /* 1.6 倍。<br>とのバランスが取りやすい */
}

ベース値の設計

多くのデザインシステムでは次のような階段（タイプスケール）を使います。

アクセシビリティの観点

• 本文は最低 16px相当を確保（モバイルは Safari の自動ズーム回避にも有効）
• ユーザーがブラウザでフォントサイズを変更できるよう、rem / em を多用し、root を html { font-size: 100% } にする
• px 固定のみだとブラウザ設定を無視してしまう
• コントラスト比（背景との関係）と組み合わせて読みやすさを評価

FAQ

Q: rem の基準を変えたいときは？
A: :root または html の font-size を指定します。html { font-size: 62.5%; } とすると 1rem = 10px となり計算しやすくなりますが、ユーザー設定を尊重するなら 100% のままにしておくのが安全。

Q: vw だけで指定するとどうなる？
A: 非常に小さい画面で読みづらくなります。clamp で下限・上限を設けるのが現代的な書き方です。

Q: ブラウザの最小フォントサイズはある？
A: 多くのブラウザに「最小フォントサイズ」設定があり、それ以下にしても表示されません。極小フォントは要注意。

関連

• フォント — 親カテゴリ
• font-family / font-weight / line-height
• rem / em / vw / clamp()
• レスポンシブデザイン / メディアクエリ
• Web Vitals — LCP（最大コンテンツの描画）と font-display