CSS - フォントサイズの指定はremでやろう

CSS

久々にHTMLとCSSを書いている僕ですが、
今までfont-sizeの指定はお恥ずかしながら、全て%(またはem)で設定していました。(下のような感じ)

<html>
<body>
<div class='child'></div>
</body>
</html>

html {
   font-size: 16px;
}

body {
   font-size: 90%;//0.9em
}

.child {
   font-size: 90%;//0.9em
}

このときchildのフォントサイズは、bodyのfont-sizeの90%なので、 font-size = 16 * 0.9 * 0.9 となります。
これでは子要素が増えるたびに、フォントの大きさがわかりづらくなってしまいます。

rem = root em

remは親要素ではなくroot、
いわゆるhtmlに設定されたフォントの大きさを元に大きさを決定します。 ＊remを使用する時は、htmlのフォントサイズは%を指定する。

html {
   font-size: 62.5%; 
   //主要ブラウザのデフォルトサイズ16pxに対する62.5% => 10px;
}

body {
   font-size: 1rem; // 10px
}

.child {
   font-size: 1.6rem; // 16px
}

わかりやすいですね。