root font-size と px → rem

ほとんどの px → rem の混乱は、root font-size 文脈を無視することから来ます。

デフォルトのメンタルモデル

次の場合：

html {
  font-size: 16px;
}

px	rem
8px	0.5rem
16px	1rem
24px	1.5rem
32px	2rem

式：

rem = px / rootFontSize

チームが root を変更するとき

一部のプロジェクトは次を使います。

html {
  font-size: 62.5%; /* ブラウザデフォルト 16px なら 10px に解決されることが多い */
}

1rem が 16px ではなく 10px になることがあります。心算は楽（24px → 2.4rem）ですが、16px ベースから変換した値と混在すると前提が壊れます。

デザインファイルを変換する前に、プロジェクトの root 戦略を必ず確認してください。

デザイン引き渡しワークフロー

1. ターゲットコードベースの root font-size を確認する。
2. スペーシングとタイポグラフィの px 値を rem トークンに変換する。
3. デザインシステムがそうするなら、ボーダーとシャドウは px のまま。
4. README やトークンファイルにベースを記録する。

トークン出力例：

:root {
  --space-4: 1rem;    /* 16px root で 16px */
  --space-6: 1.5rem;  /* 24px */
  --text-lg: 1.125rem; /* 18px */
}

親が異なるとき em が入る

コンポーネントが次を設定すると：

.callout {
  font-size: 0.875rem;
}

.callout 内の 1em padding は root ではなく 0.875rem に相対です。ネストコンポーネント計算では、コンバーターで親 font-size を設定してください。

よくあるミス

• 間違った root ベースで px を rem に変換
• 異なる root 設定のプロジェクト間で rem 値をコピー
• ローカルコンポーネントスケールに従うべき幅に rem を使用（em の方が適する場合あり）

要点

px → rem は root font-size が分かってから の単純な除算です。root font-size を変換入力の一部として扱い、後付けにしないでください。

プロジェクトベースに root font-size を設定し、CSS Unit Converter / Clamp Generator の単位変換タブで rem トークンをコピーする前に変換してください。