html要素にfont-size: 0.625emではなく62.5%;と指定する理由

Question

連投失礼します

ブラウザの文字サイズ設定に合わせて文字サイズが変わるようにする場合、

html {
  font-size: 62.5%;
}

を指定して10pxにすることで、各要素の文字サイズをemで指定する際に計算しやすくすると良いという記事が、
検索すると山ほど出てくると思うのですが、

html {
  font-size: 0.625em;
}

ではなく、％で指定するのはなぜでしょうか？
各要素のサイズをemを使って指定しているので、htmlだけemではなく％だと統一されていないような気がして気持ち悪いので、
何も理由がなければemで指定したいと考えています。
％でないとブラウザの文字サイズ設定が反映されないブラウザがあるなど、そういう理由があるのでしょうか？

Answer 1

NOTE:内容に間違いがあるかもしれません.

---

個人的にはこれバッドノウハウの類じゃないかと思います.

html {
  font-size: 62.5%;
}

とする理由が1em=10pxとしたいだけであるなら, これは全くの間違いです.
なぜなら, この式が成り立つには1em=16pxである必要があるのですが, この値はWEBブラウザの設定でいかようにも変更できるからです.

で, 本題ですが font-sizeに%を指定した場合もemを指定した場合も, 現在の規定のフォントサイズを基準に割合/倍率を掛けたものを実際のフォントサイズとするわけですから, 結局は

html {
  font-size: 62.5%;
}

html {
  font-size: 0.625em;
}

としようが同じことです.

参考
https://drafts.csswg.org/css-fonts-3/#font-size-prop
https://www.w3.org/TR/css-values-3/#font-relative-lengths

Comments

[think49]

賛同します。
10pxを求めて相対指定するのは、font-size: 10px; を指定しているのと本質的に同じと考えます。固定レイアウトを期待しているように感じます。

余談ですが、最近では、「最小のフォントサイズ」もあり、視力が弱い方はその値をあげるので、font-size: 10px に指定したとしても、必ずしも機能しません。
フォントサイズは 10-16px 程度に幅を持たせると、アクセシビリティが高くなります。

[x_x]

弱視でフォントサイズ上げてる人でも読めるように、％なりemなり使っているのでしょう。

[think49]

To: x_x さん
弱視の方の為にフォントサイズを相対指定(%, em)するのは分かるのですが、小さく設定(62.5%)するのは本末転倒ではないでしょうか。

[x_x]

わかりません。h5,h6だって小さくなるのだし、小さいこと自体が即ダメというわけではないと思います。
弱視の方は見える限界を設定しているわけではないでしょうし。

[nae_stage]

一夜明けてからのコメントで失礼します。
皆さま回答・コメントありがとうございました。
当質問が求めている回答としては、kei344様の回答が適していると思ったので、そちらをベストアンサーとしましたが、
こちらの議論も大変参考になりました。
私も、小さく設定することには違和感を抱いております。
1em = 16pxの場合、10pxの文字なんて読めたものではないので
結局各要素で文字サイズを設定し直さなければならないのは、二度手間かなとも思っています。
ブラウザの設定のフォントサイズに対応できるように相対指定しているのに、pxに換算しようとしている時点で矛盾を感じる気もします。

[defghi1977]

どこかで本来の目的と違った伝わり方をしたんでしょうね
「概ね62.5%=10pxとなるので, これを基準にするとpx単位での設計をしつつ, ブラウザのフォントサイズ設定を基準としたレイアウトができる」テクニックだったのがいつのまにか「62.5%=10pxとなる」部分が独り歩きしてしまったみたいな

[think49]

To: x_x さん
[最小のフォントサイズ] によって限界値を設定可能です。
例えば、ブラウザで「[フォントサイズ] = 16px、[最小のフォントサイズ] = 13px」を設定し、Web制作者が html { font-size: 62.5%; } を指定した場合、Web制作者の期待に反して、font-size: 13px が優先されます。

私は実際に [最小のフォントサイズ] = 13px を設定し、いくつかのサイトでレイアウトが崩れた経験があります。
そのサイトでは font-size は相対指定されていましたが、大きなフォントサイズが指定されることが想定されていませんでした。
「[フォントサイズ] = 16px、[最小のフォントサイズ] = 10px」を期待してレイアウトされており、要するにpx指定で固定レイアウトしているのと同義でした。
当時はレイアウトが崩れる度にユーザCSSで調整していましたが、今では面倒になってデフォルト設定でブラウジングするようになりました。
Web制作者がデフォルト設定を基本とするのは当然ですが、デフォルト設定しか存在しないという認識でレイアウトしているとしたら好ましくないと感じています。

Answer 2

（現在は不要な、）歴史的な理由だと思います。

【[CSS]気をつけたいIE 7のバグ -CSS-Discuss | コリス】
https://coliss.com/articles/build-websites/operation/css/577.html

IEの相対指定のフォントサイズの継承は、うまく機能しません。

相対指定を行う場合、emより%で指定を行う方が便利です。もし、em指定を行う場合は最初に%指定を行ってください。