最近たくさんCSSのフォントサイズ指定『rem』をみかけるようになりました。
ここで今一度『px、em、%、rem』のおさらいを込めてまとめです。

『px、em、%、rem』の違い

ざっくりとですが、表にしました。

単位	指定	特徴
px	絶対指定	指定したサイズ
em	相対指定	親要素を基準に計算される
%	相対指定	親要素を基準に計算される
rem	相対指定	root要素（html）を基準に計算される

『px、em、%、rem』それぞれの変換

絶対指定の『px』

その言葉の通り絶対なので、14pxを指定するとそのサイズで表示されます。
そのままですね。

相対指定の『em』

emは、親要素に対しての相対的なサイズになります。

例えば、bodyのfont-sizeをfont-size:100%とした場合は、ブラウザのデフォルトのフォントサイズ16pxが基準となり計算されます。

簡単に計算できるようになるTips

ただ、このままだと計算が大変なので、簡単に計算できるようになるTipsがあります。ベースフォントを10pxに指定して10px=1emにする方法です。

相対指定の複利計算に気をつけろ！

上記コリスさんのリンク先でも記載されていますが、相対指定は親要素の影響を受けてしまうので注意が必要です。

例えば、入れ子された下記のようなリストだと

中のリストのフォントサイズは26pxになってしまいます。

これは、基準が親要素のulに指定している1.6em=16pxになっているからで、この子要素となるリストは
16px*1.6=26px
となるからです。

相対指定の『%』

相対指定の『em』と同様なので割愛。

簡単に計算できるようになるツール

こちらを使うと簡単に計算ができます。

左にベースフォントサイズを指定します。

デフォルトでは16pxになっていますが、ベースフォントを10pxにすると右側（真ん中）のところがそれに伴い反映します。

root基準相対指定の『rem』

root(html)+em = rem

emは親要素に対して相対計算ですが、remはroot(html)のフォントサイズを元に計算します。

常にrootが基準になるので、とてもわかりやすくてスッキリしています。

簡単に計算できるようになるツール

---

なんだかうまくまとめきれていないような気もしないではないですが。。。。
それぞれに特徴がありどれにしようか迷いますが、個人的にはroot基準相対指定の『rem』推しです。