フォントサイズを指定するとき、「em」、「%」、「px」を使って指定することが多いと思いますが、
CSS3から利用可能になった「rem」という新しい単位について、指定方法など調べてみました。
「rem」とは、「root」+「em」という意味で、
root要素（html要素）に対して相対的にフォントサイズが指定できます。
「em」や「%」などの従来の相対指定と違って、親要素を継承しないという特徴があり、
入れ子にするとどんどん拡大、縮小されてしまったり、指定に細かな計算が必要だったりすることもありません。
常にroot要素に対して「何倍」という使い方ができるので、指定の仕方が非常にわかりやすく、便利です。
下記のように、htmlに「font-size: 62.5%；」を指定しておくと、「10px = 1rem」となるので、
px単位で計算ができます。
html {
font-size: 62.5%; /*ベースを10pxにしています*/
}
body {
font-size: 1.0rem; /*10px*/
}
h1 {
font-size: 1.4rem; /*14px*/
}
ただ、CSS3のため、対応ブラウザが制限されてしまうという問題があります。
IE8以下の未対応ブラウザに対しては、下記のように最初に「px」で定義し、
次に「rem」で再び定義しなければならないようです。
html {
font-size: 62.5%;
}
body {
font-size: 10px; font-size: 1.0rem;
}
h1 {
font-size: 14px; font-size: 1.4rem;
}
ブラウザの対応状況なども考慮しつつ、スマートフォン・タブレットなどHTML5/CSS3が中心の制作などでは、
利用していくと便利だと思います。