html { font-size: 62.5% } というおまじない
概要
初めて知ったおまじないは #include<stdio.h> だった。次に知ったおまじないは #!/bin/bash だった。
それから月日は流れ、最近 html { font-size: 62.5% } というおまじないを知った。
今日は、謎のフォントサイズ 62.5% についてまとめてみよう。
おまじないを知った経緯
とある企業のホームページのコーディングで、見出しの CSS を作成していたときである。
font-size に px を使うか rem を使うかで迷っていて、世のスタイルシートを眺めていたら html { font-size: 62.5% } という謎めいた CSS に出会った。
調べてみると、昔からある手法らしく、rem の計算を楽にするための手法だった。
Claude によると、「この手法は CSS で rem 単位が導入された 2012年頃（CSS3）から広く使われるようになりました」とのこと (裏取りはしていない)。
どんなおまじないなのか
このおまじないを使うと、rem の計算が楽になる。
通常、ブラウザのデフォルトフォントサイズは 16px なので、その 62.5% は 10px だ。
つまり、1rem = 16px だったものが、おまじないによって 1rem = 10px となるため、px ↔ rem の計算が楽になるのである。
デザインカンプは px で指定されることが多いので、それを rem に変換する際、ルートフォントサイズが 16px だと計算がちょっと面倒なのだ。
たとえば、デザイン上 13px のテキストを rem に変換する際は 13px / 16px = 0.8125rem のように電卓が手放せない (計算ニガテ)。
おまじないを使えば、13px = 1.3rem と、計算がニガテな自分でも暗算で書くことができる。
このおまじない、副作用はないのだろうか？
まじないって「呪い」って書くので、なんとなく使ってはいけないような気がする(?)
漢字はさておき、まずは、ルート要素 (<html>) のおさらいをするのがよさそうだ。
MDN には以下のような説明が書かれている。
<html> は HTML 要素で、 HTML 文書においてルート (基点) となる要素 (最上位要素) であり、ルート要素とも呼ばれます。他のすべての要素は、この要素の子孫として配置しなければなりません。 <html>: HTML 文書 / ルート要素
ルート要素は、HTML 文書において起点となる要素であり最上位要素であるため、他のすべての要素はルート要素を継承する (つまり、影響範囲が大きい)。
html { font-size: 62.5% } が設定されていることを把握せずに CSS を作成すると、予想と異なるスタイルが適用されてしまうだろう。
そのため、チームメンバーや、今後保守していく人に向けて、この設定についての説明を残しておく必要がありそうだ。
他にも、以下のようなことが起こり得る。
- フォントサイズ関連の問題が発生した際に、ルートレベルでのサイズ指定があることで、問題の切り分けが難しくなるかもしれない
- プラグインやサードパーティライブラリで rem が使われている場合、予期せぬ表示になるかもしれない
- ブラウザでのフォントサイズ設定が尊重されなくなる
ブラウザでのフォントサイズ設定については、実際に試してみた。
Chrome の設定で、デフォルトのフォントサイズ「中 (推奨)」の場合、neko-kaburi のトップページのタイトルは 22.4px である。
見た目はこんな感じだ。
フォントサイズ設定を「極大」にすると 33.6px になって、このような見た目になる。
そこで、おまじないを設定してみると… 33.6px の 62.5% なので、21px になってしまった。
見た目はこんな感じ↓ (「極大」なのに「中」よりも小さい…😢
ブラウザのフォント設定に影響するのはアクセシビリティの観点でもよくないし、 html { font-size: 62.5% } はハック的な香りがするので、個人的には採用しないかも…。
よりよい手法はないのか?
Sass が使えるなら、以下のような mixin を使うのがよさそうに思った。
/* フォントサイズを px → rem に変換 */
@mixin font-size-px-to-rem($px) {
font-size: ($px / 16) + rem;
/* あるいは */
font-size: ($px / 16) * 1rem;
}
Sass が使えない場合は calc() で計算することもできる (関数化してもよさそう)。
font-size: calc(12 / 16 * 1rem);
おわり
html { font-size: 62.5% } のおまじないについては、度々議論が盛り上がるもよう。
いろんな意見があるようだが、今回はこのおまじないの背景と「自分はこうしたいと思った」というのをまとめてみた。