remを使うとき、rootになぜ「10px」ではなく「62.5% ]と指定するのか

Question

ふと思ったので質問させていただきます。

cssで「rem」を使った単位指定をするときに、
計算を簡単にするためにルートの「font-size」を「62.5%（=10px）」に指定しましょう。

という趣旨の記事をたくさん見かけます。

意図はわかるのですが、

html{
    font-size : 10px ;
}

ではダメなのでしょうか？

html{
    font-size : 62.5% ;
}

やってることはどちらも同じ気がするのですが・・・

どなたか教えていただけますと幸いです。

＜参考サイト＞
https://www.plusdesign.co.jp/blog/?p=5152
https://bsj-k.com/font-size-rem-bestpractice/
https://www.esz.co.jp/blog/28.html
https://qiita.com/AsagiriDesign/items/af182de0e1c6245d102d

Comments

[m.ts10806]

一例で良いので出典明示いただけますか？
＜という趣旨の記事をたくさん見かけます。

[Snpy]

失礼しました。
下記の通りです。

https://www.plusdesign.co.jp/blog/?p=5152
https://bsj-k.com/font-size-rem-bestpractice/
https://www.esz.co.jp/blog/28.html
https://qiita.com/AsagiriDesign/items/af182de0e1c6245d102d

[m.ts10806]

質問に追記願います。
こちらはあくまで質問への追記修正依頼のコメント欄ですので

[Snpy]

申し訳ありません。
修正しました。

Answer 1

「62.5%」はデフォルトのフォントサイズが16pxという前提の数値です。そのデフォルト値が違うブラウザでも同じ比率で文字サイズを既定するには%で処理するほうが妥当だからだと思います。

下記はブラウザのフォントを変更する方法を紹介した記事ですが、Firefoxのフォント指定欄にピクセルを設定する項目があります。大きくしないと読めないとか、逆にモニタサイズが大きいので文字は小さいほうが読みやすいなど、ユーザーが必要にあわせて設定している基準値を尊重しつつサイト内の文字サイズを統一的にコントロールする意図があるから「62.5%」なのだと思います。

【ブラウザのフォントを変更する方法】
http://www.akagami.jp/other/browser-font-change.html

Comments

[Snpy]

ご回答いただきありがとうございます。

理解できました。
ブラウザのデフォルトサイズに対しても汎用性のあるサイズ指定にするかどうかってことなんですね。

逆にブラウザのデフォルトサイズに依存せず一定のフォントサイズで表示させたいときは「62.5%」よりも「10px（固定値）」の方が良さそうですね。

勉強になりました。