pxをremへ — CSS単位表120種

よく使う大きさ

本文16px、小さい文字14px、余白8・24・32pxのように繰り返し出てくる値です。

remを16で割る理由

ブラウザの既定の文字サイズが16pxで、remはその倍数だからです。利用者がブラウザで文字を大きくすると、remで書いた部分だけが一緒に大きくなります——pxで固定した部分はそのままです。

画面ではptもインチも画素で決まります

CSSは1インチを96px、1ptを1/72インチと定めています。だから16pxはちょうど12ptですが、画面に定規を当ててもその「1インチ」は1インチになりません。

割り切れる値

remが整数になるのは16の倍数、ptが整数になるのは4の倍数です——4pxがちょうど3ptだからです。

1pxから120pxまで

読み方

• rem = px ÷ 16。ブラウザの既定の文字サイズが16pxだからです。
• pt = px × 0.75。CSSが1インチを96px、1ptを1/72インチと定めています。
• 1pcは12pt、1インチは96pxであり72ptでもあります。
• 文字と余白はremで、境界線のように細くしたい線はpxで書くのがよいです。