CSSルートフォントサイズ（ベースサイズ）の理解
ルートフォントサイズ（htmlのfont-size）がすべてのrem計算を制御する仕組みを解説。62.5%トリック、カスタムベース、ブラウザ設定との相互作用を学びます。
Basic Conversion
詳細な説明
ルートフォントサイズとrem
スタイルシート内のすべてのrem値は、<html>要素の計算済みフォントサイズに対して相対的です。ルートを変更すると、ドキュメント内のすべてのremが比例して変化します。
ブラウザデフォルト：16px
すべての主要ブラウザは<html>要素のデフォルトとしてfont-size: 16pxを設定しています。あなたやユーザーが変更しない限り、これがすべてのrem計算のベースとなります。
62.5%トリック
よく使われるテクニックとして以下があります：
html {
font-size: 62.5%; /* 16pxの62.5% = 10px */
}
body {
font-size: 1.6rem; /* 本文テキストを16pxに戻す */
}
これで1rem = 10pxとなり、暗算が容易になります：
| 目標px | rem値 |
|---|---|
| 12 | 1.2rem |
| 14 | 1.4rem |
| 16 | 1.6rem |
| 20 | 2rem |
| 24 | 2.4rem |
アクセシビリティへの影響
html { font-size: 62.5%; }を設定した場合、ブラウザデフォルトを20pxに変更したユーザーは計算上のルートが20 * 0.625 = 12.5pxとなり、ユーザーの好みは比例的に尊重されます。しかし、html { font-size: 10px; }（絶対値）を使用するとユーザーの好みが完全に上書きされ、アクセシビリティのアンチパターンとなります。
カスタムベースサイズ
一部のデザインシステムでは他のベースを使用します：
- html { font-size: 8px; } — 8ポイントグリッド整列（アクセシビリティの観点から非推奨）
- html { font-size: 100%; } — 明示的な16pxベースライン
- html { font-size: 112.5%; } — デフォルトテキストを大きくする18pxベース
コンバーターでの対応
DevToolboxのpx-remコンバーターには「ベースフォントサイズ」入力欄があります。16から別の値に変更すると、すべての変換が即座に再計算され、プロジェクトのルートフォントサイズに正確に合わせることができます。
ユースケース
新しいデザインシステムを構築するチームが、ルートフォントサイズ戦略を決定し、プロジェクト全体のスペーシング、タイポグラフィ、レイアウト値への影響を理解するためのガイドです。