◀ 2.

アクセシビリティ）

▶

編集

この記事の要点

font-size は要素のフォントサイズを指定する CSS プロパティ
指定単位は絶対値（px / pt）と相対値（em / rem / % / vw / vh）がある
rem はルート要素のフォントサイズ基準。スケーラブルでアクセシビリティに有利
em は親要素基準。ネストすると倍々で大きくなる落とし穴に注意
clamp(min, ideal, max) でビューポートに応じた可変フォントサイズが 1 行で書ける

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`	絶対値	1 CSS ピクセル	細部の固定、デザインカンプ追従
`pt`	絶対値	1/72 インチ	印刷 CSS
`em`	相対値	親要素の font-size	パーツ単位でスケール
`rem`	相対値	ルート（<html>）の font-size	全体スケール / アクセシビリティ
`%`	相対値	親要素の font-size	em と同等
`vw` / `vh`	相対値	ビューポート幅 / 高さの 1%	レスポンシブな見出し
キーワード	離散値	ブラウザ既定	`xx-small`〜`xx-large` / `smaller` / `larger`

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 くらいまで滑らかに伸びる */

キーワード指定

絶対キーワード	相対キーワード
xx-small / x-small / small / medium / large / x-large / xx-large	smaller / larger

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

line-height との関係

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

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

ベース値の設計

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

用途	rem	px 換算（base 16px）
本文	1rem	16px
小さい注記	0.875rem	14px
h3	1.25rem	20px
h2	1.5rem	24px
h1	2rem	32px

アクセシビリティの観点

本文は最低 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: 多くのブラウザに「最小フォントサイズ」設定があり、それ以下にしても表示されません。極小フォントは要注意。

ページ一覧

その他