rem・em・pxはどう違う？文字サイズの基準を作例で確かめよう

同じ1.5emなのに、場所によって大きさが違う。そんなときは「何を基準にしているか」を見てみよう。

図：font-sizeについての計算例。余白などに使うemはその要素自身の文字サイズが基準。

font-sizeでの基準の違い

ここではfont-sizeについて説明しているよ。emを余白など別のプロパティに使うときは、その要素自身の文字サイズが基準になるので区別しよう。CSSのpxも、常に画面の物理ピクセル1個と同じではないよ。

入れ子にするとどうなる？

ルート16px、親24pxとした計算例では、子の1.5remは24px、1.5emは36pxになる。さらにその内側で1.5emを指定すると54pxになりうるよ。remは親の倍率がそのまま積み重なる指定ではないんだ。

html { font-size: 100%; }
.parent { font-size: 24px; }
.child-rem { font-size: 1.5rem; }
.child-em { font-size: 1.5em; }

ルート16pxは計算上の仮定。ブラウザの設定によって違うので、実際の値を確認してね。

保存して試すHTML

remとemの比較サンプルを用意したよ。ルート側と親側のサイズを変えて、それぞれの文字がどう変わるか確かめられる。外部ライブラリや通信は使わない小さな作例だよ。

remを使えば全部解決、ではない

単位を変えても、固定した高さから文字があふれたり、ボタンが重なったりする場合があるよ。拡大表示、長い文字列、狭い画面でも確認しよう。小さくするためにブラウザの標準文字サイズを上書きしすぎないことも大切。

連続的に文字サイズを変えたい場合は、clamp()の解説と実験室も使ってみてね。

この作例で確認した結果

2026年10月15日、配布するHTMLをブラウザで開き、ルート16px・親24pxから親だけ32pxへ変更したよ。computed styleでは1.5remが24pxのまま、1.5emが48pxになることを確認した。