文字サイズ統一という課題と、remという単位が果たす役割

by MiLKySHADe · 公開済み 2013年6月17日 · 更新済み 2014年8月26日

文字サイズ指定単位について

今まではIEのフォントサイズ変更問題を考慮すると、フォントサイズの指定は％の一択であった。
（px＝サイズ変更×、em＝サイズ変更×、pt＝ブラウザ間相違により×）

しかし％による指定でさえも重大な欠陥が存在する。その欠陥は我々製作者サイドの事情であるため甘受してきた経緯がある。

例えば以下のCSSがあったとする。

html,body{font-size:14px;}
ul {font-size:120%;}
ul li {font-size:90%;}
ul li li {font-size:80%;}

上記のCSSを以下のHTMLに適用したとする。

<ul>
    <li>階層１</li>
    <ul>
        <li>階層２</li>
        <ul>
            <li>階層２</li>
        </ul>
    </ul>
</ul>

さて、上記の最下層のliのフォントサイズは何pxになるでしょうか。

正解は、14 * 1.2 * 0.9 * 1.2 * 0.8 * 1.2 * 0.8 で13.93459px。

％は上位階層のフォントサイズの影響を受けるため、条件が重なった場合の計算が現実的でないほど複雑だった。

しかし”rem”という単位がすべてを解決する。

remとは、root+emの略で、ルート要素、つまりhtml要素に対するem指定であることを意味する。

さきほどのサンプルを全てremに置き換えてみると、

html,body{font-size:14px;}
ul {font-size:1.2rem;}
ul li {font-size:0.9rem;}
ul li li {font-size:0.8rem;}

となる。

では、サンプルの最下層のliのフォントサイズは何pxになるでしょうか。

正解は、14*0.8で、11.2px。

上位階層に関係なくhtml要素のフォントサイズに対する割合でフォントサイズが決まるため、階層構造を気にせず指定を行うことができる。

と限定されるが、operaやieの下位バージョンに対してはpx単位と併用することで問題なく表現できるため、今後remによる指定で統一する価値があると考えている。