pxでもemでもないrem（ルートエム）でフォントサイズを指定する方法

css3から設定できるrem（ルートエム）とは

css3から設定できる様になった新しいフォントサイズ設定の単位rem（ルートエム）。
rem？emと同じ様な感じなのでしょうか。いいえ、違います。
emやpxで設定した場合は、「親要素」によってフォントサイズが決められてしまいます。
「親」がフォントサイズ」15pxなら、「子」に10pxと設定しても子はその通りにはならないと思います。
remの場合はroot（元）だけのフォントサイズに決められますので、親要素にフォントサイズを設定してもremには何の影響もありません。
それがemやpxとは違う所です。
元々存在していたpxやemのサイズ設定のおさらいも含めて説明を書いていきます。

フォントサイズの基本設定は16px

フォントサイズの指定を何もしていない時のフォントサイズは16pxで表示されます。
1em＝16px
1rem＝16px
何も設定していなければ、1emも1remもみんな16px表示となります。

ただし、htmlやbodyにフォントサイズを設定した場合、pxやemはフォントサイズは変わっていきます。
以下がフォントサイズの計算式になります。

remで設定したサンプル

em、px、remで設定したサンプルが以下よりご覧いただけます。

remを設定したサンプルはこちら

<div class="box b01">
　<h2>emの場合</h2>
　<div class="inner">
　　<p>こんな感じ<br>
　　pに対しfont-size: 1em;</p>
　</div>
</div>

<div class="box b02">
　<h2>pxの場合</h2>
　<div class="inner">
　　<p>こんな感じ<br>
　　pに対しfont-size: 16px;</p>
　</div>
</div>

<div class="box b03">
　<h2>remの場合</h2>
　<div class="inner">
　　<p>こんな感じ<br>
　　pに対しfont-size: 1rem;</p>
　</div>
</div>

html{
　font-size: 62.5%;　//10px
}

body{
　font-size: 1.6em;	
}

.b01 p{
　font-size: 1.6em;
}

.b02 p{
　font-size: 16px;
}

.b03 p{
　font-size: 1.6rem;
}

サンプルを見比べてみると、emはかなり大きいですね。
pxに変換すると、
emは「62.5%（html ※10px） × 1.6em(body) × 1.6em(p) ＝ 25.6px」
pxは16pxのまま、
remは「62.5%（html ※10px） × 1.6rem(p) ＝ 16px」
となりました。

remは基準となるフォントサイズをhtmlに設置する事で管理もしやすくなる

サンプルで見た通り、remは親の影響を受けないので管理がしやすいと思います。
基本となるフォントサイズをhtmlに設定しておけば、バラつきも少なく設定し易くなるのではないかと思います。