【スマートフォン向けサイト】フォントサイズの指定には、remを使おう

　CSSでフォントサイズの設定する際、「em」や「px」を使う事が多いと思うのですが、スマートフォン向けサイトの場合は全てのブラウザがCSS3に対応しているのでCSS3から新しく登場した単位である「rem」で設定するのがおすすめです。

　従来の「em」と似ていますが、「rem」はemとは違い親要素の値を継承せずルート(html)で設定された値だけを継承します。「rem」 = 「root」+「em」です。

　emだと親の値に影響されてしまうので入れ子になったタグだと複利計算になって面倒だったのですが、remを使う事でこれがスッキリ解消します。

　htmlのフォントサイズを「62.5%」にしておくと計算が楽です。10px(16 * 0.625 = 10) なので、こうすると、「1rem」 = 「10px」になります。

　下の例のような指定方法の方がわかりやすいかもしれません。

参考：

FONT SIZING WITH REM

（提供： casemobile〜スマホコンテンツ開発ブログ）