{font-size: 62.5%;}ってなに?

ユーザーが文字設定を変えることでwebページの文字サイズを変更することがあります。
そのためコーディングの際にユーザーの環境に合わせてそれぞれの文字サイズが相対的に変わるようにする必要があります。
この時に使うのが、「em」という単位。


「em」とは文字の高さを基準にした単位です。

1emが1文字分を表し、使用している環境によって大きさが変化します。

特にfont-sizeの設定がない場合、1em=16pxなので、16pxの文字が出したいなあと思ったら文字サイズを1emにします。
もし基準の設定を14pxに変えれば

1em=14px 1.5em=21px で表示されます。


一見単純そうに見えるこの仕組みですが、デフォルト設定(1em=16px)の時に20pxの文字を指定する場合はわざわざ計算をして、文字サイズを1.25emにしなければならないのです。

そこで使用するのが {font-size: 62.5%;}です。

bodyやhtml要素でfont-sizeを62.5%にしておくと、デフォルト設定の時の基準が16pxの62.5%、つまり10pxになります。

こうすることで、ちょうど1em=10pxになり、18pxにしたいなあと思うなら1.8emと書けば良いし、24pxにしたいなら2.4emと書けば良いので計算がしやすいわけです。


注意点として「em」は要素のフォントサイズを基準にするため、階層が下がるとその要素はその親要素のフォントサイズを基準にしてしまいます。

<子要素を1.5emにした場合>

親要素に指定がない時 → 15px
親要素に指定がある場合(ex.20pxの時) → 20pxの1.5倍=30pxになる

そんな時、CSS3ではもっと便利なremという指定が使用出来ます。「rem」 は常にhtml 要素のフォントサイズを基準にするのでhtml要素でfont-sizeを62.5%にしておけば、階層が深くなってもフォントサイズが狂うことはありません。