2012-05-21

body要素でフォント・サイズを変えるのを止める？

フォント・サイズの変更を行う場合、html要素でやった方が良さそうと結構前にTwitterで@terkel(多分)がつぶやいていた。body要素で設定しても現状は特に何か問題が起こるというわけではないのだけど、将来的に多くの人が使いたくなるであろうrem単位のことを考えると……という話。

CSS Values and Units Module Level 3で定義されているrem単位は現在以下のようになっている。

Equal to the computed value of ‘font-size’ on the root element.

When specified on the ‘font-size’ property of the root element, the ‘rem’ units refer to the property's initial value.

「the root element」はHTMLの場合通常html要素になる(scopedが絡むとまた変わってくるらしいけど)ので、body要素のフォント・サイズを変えてもrem単位には反映されない。

h1 {
  margin: 2rem 0 0 0;
  line-height: 1.25;
  font-size: 150%;
  letter-spacing: -0.1em;
}

またremはemを完全に置き換えるものではないので、こういう使い方になるんじゃないかと思っている。他のブロックとの兼ね合いはその要素のフォント・サイズに依存しないrem単位、文字間をちょっといじるなどというその要素のフォント・サイズに依存するものはem単位と使い分けていくということ。この場合はrem単位がベースのフォント・サイズに合わせて変化して欲しいだろうと思うので、html要素でいじるべきということになる。

ではhtml要素でフォント・サイズをいじるのがベスト・プラクティスになるのかと言えばそうでもないような気もする。具体的な例がちょっと思い浮かばないけどrem単位の基準がどんなフォント・サイズでも一定であると助かるというようなケースもきっとあると思う。

あんまり試さずイメージで書いてるので嘘の可能性が高い。