🎉

bodyに指定するfont-sizeは「100%」がベスト：62.5%が非推奨な理由

に公開
HTML
tech

はじめに

CSSでルート要素（htmlまたはbody）に指定するfont-sizeについて、「100%と62.5%どちらが良いのか？」という疑問を持つ方は多いのではないでしょうか。

この記事では、現代のWeb開発におけるfont-sizeのベストプラクティスと、62.5%が非推奨とされる理由を解説します。

結論

font-size: 100%;（= 16px）を指定するのがベストプラクティスです。

62.5%（= 10px換算）はかつて便利な慣習でしたが、現在では非推奨に近い扱いです。

理由

1. アクセシビリティの観点から「100%」が推奨

ユーザーのブラウザ設定（視覚に合わせた文字サイズなど）を尊重するため、font-size: 100%はユーザー設定を壊さない安全な指定です。

html {
  font-size: 100%; /* = ブラウザ標準（16px） */
}

2. 62.5%（=10px換算）は便利だが「過去の慣習」

かつては「1rem = 10px にして計算しやすくする」目的で流行しました。

html {
  font-size: 62.5%; /* = 10px換算 */
}
p {
  font-size: 1.6rem; /* = 16px */
}

しかし、次のような理由で現在は敬遠されています。

問題点 説明
アクセシビリティ低下 ユーザーの既定フォントサイズを意図せず小さくしてしまう
一貫性の欠如 デバイスによって想定より小さい文字になることがある
チーム開発で混乱 「62.5%換算」を知らないと理解しづらい

3. 現代的な考え方：100%を基準にremで調整

現在の主流は**「ルートを100%にして、remで拡縮」**です。

html {
  font-size: 100%; /* = 16px */
}

body {
  font-size: 1rem; /* = 16px */
}

h1 {
  font-size: 2rem; /* = 32px */
}

small {
  font-size: 0.875rem; /* = 14px */
}

これならアクセシビリティを損なわず、計算も複雑ではありません。

4. どうしても10px換算にしたい場合

デザイントークン（CSS変数）で管理すると、安全かつ柔軟です。

:root {
  --font-base: 1rem;      /* 16px */
  --font-small: 0.875rem; /* 14px */
  --font-large: 1.25rem;  /* 20px */
}

body {
  font-size: var(--font-base);
}

まとめ

観点 100% 62.5%
計算のしやすさ △ ◎
アクセシビリティ ◎ ×
近年の推奨度 ◎（主流） △（過去の慣習）

ポイント

  • font-size: 100%がベスト
  • デザイン上の調整はremやclamp()などで柔軟に対応するのが現代的
  • ユーザーのブラウザ設定を尊重することがアクセシビリティ向上につながる
  • CSS変数を使えば、より保守性の高い設計が可能

Discussion