CSSでfont-sizeの単位をremで指定するときにわかりやすくするための62.5%という指定について

Question

デフォルトのブラウザのfont-sizeの解釈が16pxで1emという設定を利用して、
bodyやhtmlタグに対してCSSで

font-size: 62.5%;

と指定する手法があるかと思います。

このロジックは理解できるのですが、%を使って指定する意味がよくわかりません。
1rem=10pxにしたいのであれば、わざわざ%でおこなわずに、素直に

font-size: 10px;

と書いてはだめなのでしょうか？

そもそもブラウザのデフォルトのサイズ規定が16pxになっているのは、
現時点の環境においてブラウザで見やすいサイズということで一律の数値になっているだけで、
今後デバイスや閲覧環境が変わって16px以外の数値になることを想定すると、
なおさら%指定する意味がわからなくなりました。

なぜ素直にfont-size: 10px;で指定されることが一般的でないのか、ご教示いただけますと幸いです。

Answer 1

そんなテクニックがあるのですね、初めて知りました。調べてみると随分昔からある手法のようですね。
その「昔からある手法らしい」という点から推測してみました。

昔、IEにおいて、固定値でフォントサイズを指定するとユーザーがブラウザ側でフォントサイズを変更してもサイズを変えられないという問題がありました。
そのため、固定値でのフォントサイズ指定はユーザビリティの観点から推奨されず、%等での相対値での指定が推奨されてきました。
そのため、10pxではなく、62.5%を使っていたのではないでしょうか。

ちなみに、IE9以降で上記の問題は解消されています。
そのため、今現在62.5%を使う理由はなく、質問者の書いている通り10px指定で問題ないように思います。

Comments

[hima_coder]

なるほど、そんな気がしてきました！
しかもどうやら昔の問題でもなさそうですね。

先程Chromeでフォントサイズを「大」「中」「小」と変えてみたら、10pxで指定した場合、フォントサイズが変更されないのを確認しました。
62.5%だと変化しましたので、そのためだったのですね……

教えていただきありがとうございました。
ベストアンサーとさせていただきます。

[hwatarig]

chromeに文字サイズ変更の設定があることを知りませんでした！確かにおっしゃる通りですね。
ただ、ほとんどのユーザーはツールバーから直接使える「拡大/縮小」を使うでしょうから、アクセシビリティに相当配慮する必要のあるコンテンツで無い限りはそこまで気にする必要もないのかなと考えます。（文字サイズの拡大では画像などのコンテンツは小さいままですし）
こちらこそ勉強になりました。ありがとうございます。