実行できるCSSドキュメント: CSS 文字サイズ

Q: CSS で文字サイズを変えるには？

要素に font-size プロパティを指定します: p { font-size: 18px; }。長さ (px、rem、em)、パーセント、large などのキーワードが使えます。

Q: HTML で文字サイズを変えるには？

スタイルシートか style 属性で CSS を使います: 。古い タグは HTML5 では廃止されているので使わないでください。

Q: ブラウザのデフォルトの文字サイズは？

ユーザーがブラウザの設定で変えていなければ、本文は 16px です。初期状態では 1rem とキーワード medium がこの値に等しくなります。

Q: 文字サイズには px、em、rem のどれを使うべきですか？

ほとんどのテキストには rem を使います。ユーザーのブラウザの文字サイズ設定に合わせて変わり、掛け算で積み重なりません。ボタンの中のアイコンのように、親に合わせたいサイズには em を使います。px は読み手がブラウザで設定したデフォルトの文字サイズに従わないので、本文には避けましょう。

Q: em の文字サイズがどんどん大きくなるのはなぜですか？

em は親の文字サイズが基準なので、入れ子の要素では掛け算になります。1.2em の中の 1.2em は基準の 1.44 倍です。常にルート要素が基準の rem に切り替えましょう。

CSS で文字サイズを指定する方法

font-size プロパティは文字の大きさを指定します。任意の要素に指定すると、子が独自のサイズを指定しない限り、中のすべてのテキストがそのサイズを継承します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .small { font-size: 12px; }
    .normal { font-size: 16px; }
    .big { font-size: 1.5rem; }
    .huge { font-size: 48px; }
  </style>
</head>
<body>
  <p class="small">12px</p>
  <p class="normal">16px (the browser default)</p>
  <p class="big">1.5rem (24px)</p>
  <p class="huge">48px</p>
</body>
</html>

HTML で文字サイズを変えるときも CSS を使います。style 属性 () か、スタイルシートのルールを追加します。1990 年代の  タグは廃止されていて、現代のページで使う理由はありません。

font-size に使える単位

値	例	基準
`px`	`16px`	なし: 固定サイズ
`rem`	`1.25rem`	ルートの `<html>` 要素の文字サイズ (初期値は 16px)
`em`	`1.2em`	親要素の文字サイズ
`%`	`120%`	`em` と同じく親の文字サイズ (`120%` は `1.2em`)
キーワード	`large`	初期値 `medium` を中心とした決まった段階
相対キーワード	`smaller`, `larger`	親のサイズから 1 段階
ビューポート	`4vw`	ビューポートの幅 (その 4%)
関数	`clamp(1rem, 4vw, 2rem)`	最小値と最大値の間で可変

値を入力して、ブラウザが計算したサイズを見てみましょう:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { border: 1px dashed #9ca3af; padding: 8px; margin: 12px 0; }
  </style>
</head>
<body>
  <label>font-size: <input id="val" value="1.5rem" size="20"></label>
  <p id="sample">The quick brown fox</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.fontSize = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).fontSize;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

20px、2em、150%、x-large、smaller、5vw を試してみてください。big のような無効な値は無視され、テキストは最後の有効なサイズを保ちます。

rem と em: つまずきやすい違い

rem は常にルート要素を見るので、1.2rem はどこに書いても同じサイズです。em は親を見るので、要素を入れ子にするとサイズが掛け算になります:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em compounds</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .em { font-size: 1.2em; }
    .rem { font-size: 1.2rem; }
    div { border-inline-start: 3px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">1.2em
    <div class="em">1.2em inside
      <div class="em" id="deep-em">1.2em inside again</div>
    </div>
  </div>
  <div class="rem">1.2rem
    <div class="rem">1.2rem inside
      <div class="rem" id="deep-rem">1.2rem inside again</div>
    </div>
  </div>
</body>
</html>

いちばん内側の em のボックスは 16 × 1.2 × 1.2 × 1.2 = 27.648px です。いちばん内側の rem のボックスは 19.2px のままです。この積み重なりは、部品が一緒に拡大縮小すべきコンポーネントでは便利ですが、それ以外では想定外の結果になります。すべての長さの単位の比較は単位のページにあります。

キーワード: xx-small から xx-large

絶対キーワードは medium を中心とした決まった段階に対応します。medium はユーザーのデフォルトのサイズ (変更していなければ 16px) です:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size keywords</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-size: xx-small;">xx-small</p>
  <p style="font-size: x-small;">x-small</p>
  <p style="font-size: small;">small</p>
  <p style="font-size: medium;">medium</p>
  <p style="font-size: large;">large</p>
  <p style="font-size: x-large;">x-large</p>
  <p style="font-size: xx-large;">xx-large</p>
  <script>
    document.querySelectorAll('p').forEach((p) => {
      p.textContent += ': ' + getComputedStyle(p).fontSize;
    });
  </script>
</body>
</html>

デフォルトの 16px では、small は 13px、large は 18px、x-large は 24px、xx-large は 32px です。キーワードは手早く作るには十分ですが、デザインシステムではふつう rem で独自の段階を決めます。

clamp() で可変の文字サイズ

画面に合わせて大きくなり、それでいて小さすぎも大きすぎもしない見出しは、clamp() 1 つで書けます。最小値、拡大縮小する推奨サイズ、最大値です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fluid heading</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 {
      /* never below 1.5rem, never above 3rem, 5vw in between */
      font-size: clamp(1.5rem, 5vw, 3rem);
      margin: 0;
    }
  </style>
</head>
<body>
  <h1 id="title">Fluid heading</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'computed: ' + getComputedStyle(document.getElementById('title')).fontSize;
  </script>
</body>
</html>

幅 800px のプレビューでは 5vw は 40px で、24px と 48px の間にあるので、この値が採用されます。可変の文字サイズの詳細は clamp のページで解説しています。

ページ全体の基準サイズを決める

body (または html) に一度だけサイズを指定し、ほかはすべてそれに対する相対値にします:

html { font-size: 100%; }  /* respects the user's setting, usually 16px */
body { font-size: 1rem; }
h1   { font-size: 2.25rem; }
small, .caption { font-size: 0.875rem; }

ページ上のすべてのサイズを rem で指定するのでない限り、html { font-size: 62.5%; } のようなテクニックは避けましょう。また html に固定の px サイズを指定してはいけません。読み手がブラウザで選んだ文字サイズを上書きしてしまいます。その設定がないと文章を読めない人もいます。

アクセシビリティの注意点

画面で読む本文は 16px 以上を目安にしましょう。
rem と em のサイズはユーザーのデフォルトの文字サイズ設定に従います。px のサイズはページのズームには従いますが、その設定には従いません。
iPhone の Safari は、文字サイズが 16px 未満の入力欄にフォーカスするとページを拡大します。これを避けるには、フォームの入力欄を font-size: 1rem 以上にしましょう。

よくある間違い

 タグを使う。 廃止されています。font-size プロパティを使いましょう。
入れ子の em のサイズが際限なく大きく (小さく) なる。 積み重なりが必要なとき以外は rem を使いましょう。
html に固定の px サイズを指定する。 読み手自身の文字サイズ設定を上書きします。
見出しにはすでにサイズがあることを忘れる。 <h1> の初期値は 2em なので、本文と同じサイズにしたいなら h1 { font-size: 1em; } が必要です。
ビューポート単位だけを使う。 font-size: 3vw はスマートフォンでは読めないほど小さく、広いモニターでは巨大になります。clamp() で囲みましょう。

よくある質問

CSS で文字サイズを変えるには？

要素に font-size プロパティを指定します: p { font-size: 18px; }。長さ (px、rem、em)、パーセント、large などのキーワードが使えます。

HTML で文字サイズを変えるには？

スタイルシートか style 属性で CSS を使います: 。古い  タグは HTML5 では廃止されているので使わないでください。

ブラウザのデフォルトの文字サイズは？

ユーザーがブラウザの設定で変えていなければ、本文は 16px です。初期状態では 1rem とキーワード medium がこの値に等しくなります。

文字サイズには px、em、rem のどれを使うべきですか？

ほとんどのテキストには rem を使います。ユーザーのブラウザの文字サイズ設定に合わせて変わり、掛け算で積み重なりません。ボタンの中のアイコンのように、親に合わせたいサイズには em を使います。px は読み手がブラウザで設定したデフォルトの文字サイズに従わないので、本文には避けましょう。

em の文字サイズがどんどん大きくなるのはなぜですか？

em は親の文字サイズが基準なので、入れ子の要素では掛け算になります。1.2em の中の 1.2em は基準の 1.44 倍です。常にルート要素が基準の rem に切り替えましょう。