font 指定は html 要素に指定すべきか・body 要素に指定すべきか

font-familyfont-size といったフォント指定は、html 要素に指定すべきか、body 要素に指定すべきか?

TL;DR : html 要素・body 要素、どちらに書いても別に変わんないから好きな方にしたらいい。

目次

参考にした文献

以下のような文献を読んでみたり、自分で色々と HTML・CSS を書いて検証してみたが、html 要素に書いたから・body 要素に書いたから、こんな挙動の違いが出た」みたいなモノは見つけられなかった。どっちにどう書こうが、結果は変わらなかった。

html 要素に書きたい派

html 要素に書きたい派の一部は、font-size: 62.5% などとして 10px 計算したがる、未だにピクセルパーフェクトでやろうとするダメダメデザイナータイプが多かった。だからこういうのは参考にしてはならない。

ただ、rem 単位は html 要素の状態から導かれるので、body 要素以降は相対的なサイズ指定のみにしておき、html 要素でルートサイズを指定する、という方法自体は覚えておくと良いのかもしれない。

html {
  font-size: 20px;  /* ココの数値を変えることで全体のフォントサイズを変更できる */
}

body {
  font-size: 1rem;  /* ベースは 20px となる */
}

h1 {
  font-size: 2rem;
}

でもコレを以下のように書こうとするのは気に食わない。

html {
  font-size: 62.5%;  /* コレで 10px になったはず、だと? */
}

body {
  font-size: 1.6rem;  /* コレで 16px になったはず、だと? */
}

ブラウザのベースフォントサイズって変更可能なので、「62.5% にしたから 10px だー」って考えは浅はか。こういうことしようと思うことがそもそも間違ってるので、こういう文献はアテにしちゃあかん。

body 要素に書きたい派

Bootstrap Reboot は body 要素に寄せてあった。「rem 単位は html 要素に従う」といわれているものの、特にその違いを感じるような組み合わせは作れなかったので、body 要素にだけフォント指定を入れても全く問題ないようだ。

body 要素にフォント指定を書く理由はいくつか見られる。

適用対象からしても、歴史的経緯からしても、body 要素でフォント指定するのが自然に読めるよな、というのはよく分かる。

俺はどうするか

自分は以前からずっと html 要素に寄せて書いている。

html 要素と body 要素にそれぞれ background-color を指定すると、ページ内容が1画面内で収まっている時に、html 要素に指定した background-color が下部に登場するので、html 要素には overflow 指定や height 指定をすることが多い。

それに合わせて、フォントなどの指定も html 要素に寄せていて、body 要素の方はほとんど空っぽだったりする。

*border-box 指定のみ、bodymargin 削除のみ、:root は CSS 変数宣言のみ、そして html 要素はルートから全体の指定。ということで、継承や優先度には問題がないかなーと思っている。あちこちにスタイルが散らばらず html 要素にまとまるので見通しも良いかなーと思う。

最近は clamp() を使ってルートフォントサイズを可変させる手法をよく使うが、それも html 要素で指定している。

body 要素に書いた方が適用対象が正確じゃね?という指摘はよく分かるのだが、結局 html 要素にも色々書くことになることが多いので、だったら html 要素に寄せちゃお〜、という感じである。