基準となるフォントサイズをもとに、pxとremを相互に換算します。remベースで設計されたCSSに、デザインカンプのpx値を落とし込むときに使えます。
換算の基本
| px | rem（基準16px） |
|---|---|
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 24px | 1.5rem |
| 32px | 2rem |
rem = px ÷ ルート要素のフォントサイズ px = rem × ルート要素のフォントサイズ ブラウザ既定は 16px → 1rem = 16px
remを使う理由
ユーザーがブラウザの文字サイズ設定を変えたとき、pxで固定していると文字が拡大されません。remはルート要素のフォントサイズに追従するため、設定を尊重した表示になります。アクセシビリティの観点から推奨される単位です。
なお、ルート要素に font-size: 62.5% を指定して「1rem = 10px」にする手法がありますが、ユーザー設定の反映が意図とずれる場合があるため、採用は慎重に判断してください。
remとemの違い
remは常にルート要素（html）を基準にしますが、emは親要素のフォントサイズを基準にします。emは入れ子にすると値が累積するため、余白の指定などでは扱いにくくなります。
文字サイズや余白はrem、要素内の相対的な調整（アイコンの大きさなど）はem、という使い分けが分かりやすくなります。
よくある質問
Q 1remは何pxですか？
ブラウザ既定では16pxです。html要素のfont-sizeを変更すると、その値が基準になります。
Q remとemの違いは？
remはルート要素基準、emは親要素基準です。emは入れ子で値が累積します。
Q px指定は避けるべきですか？
文字サイズはremが推奨されます。枠線の太さなど、拡大させたくない箇所はpxで問題ありません。
Q 62.5%の手法は使うべきですか？
計算は楽になりますが、ユーザーの文字サイズ設定との兼ね合いに注意が必要です。プロジェクトの方針に合わせて判断してください。