body {
	font-family: 'メイリオ', Meiryo, 'Lucida Grande', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif;
	font-size: 100%;
}

%、emは、相対指定のとき、子要素は、親要素のプロパティによって数値が変化します。階層が深くなる毎に変化します。例えば、親・子要素に80%を指定た場合、80×80=6400/100=64%になり小さくなり、親・子要素に120%を指定した場合は、120×120=14400/100=144%になり大きくなります。親要素の影響を受けたくない場合は、CSS3で導入された単位『rem』を使います。この単位『rem』は、親要素ではなく「ルート要素の文字サイズ」を基準にして文字サイズを指定できる単位です。『rem』とは「root」+「em」という意味です。root要素（html要素）のフォントサイズを継承されるため階層が深くなっても徐々に文字サイズが小さくなったり大きくなったりしません。『rem』をサポートしているブラウザは 、Firefox3.6以上、Chrome、Safari5以上、IE9以上になります。

例1）基本のフォントサイズを12pxに設定

基本は16pxなので「12÷16=0.75」となり75%(パーセント)となりますので、bodyに75％を設定します。

この設定でh2要素を24pxにする場合は「24÷12 =2.0」となり200%になります。

h2 {
	font-size: 200%; /*基本サイズは12px*/
} 

例2）root（html）の基本フォントサイズを10pxに設定

html{ 
	font-size: 62.5%; /*基本サイズは10px*/
}

body {
	font-size: 1.2rem; /*12px指定*/
	font-size: 12px; /*IE対策*/
}

この設定でh2要素を24pxにする場合

h2{
	font-size: 2.4rem;
	font-size: 24px; /*IE対策*/
}