font-size:62.5%とrem設定

font-sizeの設定について

html { font-size:62.5% } とは

友人とチーム開発をしていて。サイトの模写をしていて。案件の改修にぶち込まれて。など、様々な場面で

　html { font-size: 62.5%; }

というstyle設定の記述を目にしたことがあると思います。

なんでわざわざフォントサイズを縮めているの？と思いますよね。自分も思いました。
結論から言いますと、これは“font-sizeをrem指定する時に簡単に指定するための設定”となります。

まず前提として、ブラウザの標準フォントサイズは16pxが主流となっています。

そこでデザイン上12pxのテキストをrem指定しようとするとどうなるでしょうか。
結果は以下の通りとなります。

12px = 0.75rem

慣れてしまえば考えずに出てくるかもしれませんが、慣れるまではいちいち計算したりするのも面倒ですよね。

ではhtml { font-size: 62.5%; }が設定された状態だと12pxはどのようにrem指定できるでしょうか。
結果は以下の通りとなります。

12px = 1.2rem

どうでしょう。はるかに直感的になりましたよね。
remの持つ”html(root)の等倍”という性質から、あらかじめhtml要素のfont-sizeを62.5%(10px)に指定しておくと上記のような記入の仕方ができるようになります。

rem設定について

font-sizeはpxなどの絶対値ではなく、emやremなど等倍で指定した方が良いとされています。

これはWEBアクセシビリティの観点でユーザーが手元でブラウザ文字サイズを変更できた方が、ユーザーの状況や環境に左右されず正しく情報を取得することができるためです。

ブラウザの文字サイズを変更した時に、remなどの等倍設定であれば、サイズ変更に合わせてきちんと変わってくれますが、pxなどの絶対値では変わってはくれません。
WEBアクセシビリティに対する重要度は年々上がっていますのでユーザーに対する配慮として必要な設定となります。

まとめとおまけ

インターネットで検索するとデフォルトのフォントサイズは変更しない方が良い。と言う意見も目にします。

それも一理あると思います。なぜならデフォルトが”16pxである”というのは今現在16pxなだけで今後一生16pxかどうかというのは誰も分からないためです。

ただそれはデザインを100％再現する。という点で問題が発生するだけであって、デフォルトが 16pxから変わってしまった場合、html{font-size: 62.5%}を設定していようがなかろうがデザインとは乖離するんですよね。。

全ての要素をpxで指定していれば話は別ですが、それはWEBアクセシビリティの観点では悪手と言えるでしょう。
ユーザーファーストで考えた場合には、html{font-size: 62.5%}を明確に反対する理由が特に無いのかな。と思います。

もしどうしてもhtml{font-size: 62.5%}を記述したくない。デフォルトのfont-sizeを変更するのはなんとなくいや。ということであれば、Sassを使用することによって同じく直感的にrem指定することも可能です。
※方法はまたの機会に

html{font-size: 62.5%}をなんのために使用しているか理解した上で、案件にあわせて使い分けられると良いかと思います。