html に font-size: 62.5%; を指定するのはやめよう
htmlタグに「font-size: 62.5%」を指定するのを、CSSのフォントサイズ指定にremを使用するうえでの便利技のように書かれているブログ記事を多く見かけますが、筋が悪い方法なのでやめましょう。
便利技どころか、制作作業が非常に面倒になる悪手です。
目次
なぜ font-size: 62.5% なのか?
remは root em の略でルート階層のemを意味します。
つまり、html要素のフォントサイズです。
現在主に使用されているブラウザのデフォルトフォントサイズは16pxです。
つまり、1rem = 16px です。
ここでフォントサイズを13pxの大きさにしたいとき、remで指定しようとすると font-size: 0.8125rem; と指定しなくてはなりません。
(13 / 16 = 0.8125)
これではフォントサイズ指定の際にいちいち計算が必要になってしまいます。
そこで、html { font-size: 62.5%; } とすると、html要素のフォントサイズ(ブラウザのデフォルトフォントサイズ)が10pxとなり、1rem = 10px となります。
するとCSSでフォントサイズを13pxの大きさにしたいとき、font-size: 1.3rem; と指定できます。
『これなら計算しやすい! 便利だ!』というわけで、この方法が広まったようです。
1rem = 62.5%(10px) のデメリット
アクセシビリティを考慮しているライブラリなどでは、フォントサイズをブラウザのデフォルトに任せているものがあります。
そういったライブラリを使用する場合、ブラウザのデフォルトフォントサイズの変更は大きな問題になります。
有名なところでは、WordPressのECプラグイン「WooCommerce」があります。
WooCommerceは、CSSのfont-sizeがすべてremで書かれています。
そのため、1rem = 10px にしてしまうと、WooCommerceが出力するパーツの文字が非常に小さくなってしまうのです。
WooCommerce以外の部分を 1rem = 10px の前提で制作していた場合、通常部分に対しWooCommerceが出力する部分の文字が小さくなってしまうため、フォントサイズをすべて指定し直す必要が出てきます。
商品ページだけでなく、買い物かごページ、支払ページ、アカウントページなども指定し直しです。
また通常の表示だけでなく、フォームのプレースホルダー、エラーメッセージ、設定を変えた際に表示される項目についても調べる必要があります。
さらに追加でプラグインを入れたら、そのプラグインが出力する部分も設定し直しです。
こうして、html要素のフォントサイズを変更しなければ必要が無かった作業を行うことになるのです。
さらにプラグインのアップデートによって新たに対応が必要になることもあります。
そしてこれらの対応に漏れがあった場合、閲覧するユーザーに直接のデメリットが生じます。
1rem = 62.5%(10px) のメリット
では逆に、1rem = 10px にするメリットは何かというと、
制作する人がpx→remの計算をしなくていい
ということだけだと思います。
閲覧するユーザーにメリットはありません。
remは計算式で指定できる
デフォルトフォントサイズを変更せずとも、現代のウェブ制作ではフォントサイズにremを使用する際にいちいち計算をする必要はありません。
Sassを使っているならmixinを作れば簡単です。
// SCSS
$root-font-size: 16;
@mixin font-rem($font-size-px, $root-font-size) {
font-size: $font-size-px / $root-font-size * 1rem;
}
p {
@include font-rem(13);
}
Sassをつかわない場合でも、少々記述が長くなりますがカスタムプロパティとcalc()で指定できます。
:root {
--root-font-size: 16;
}
p {
font-size: calc( 13 / var(--root-font-size) * 1rem );
}
私がよくやったのは、CSSファイルにダミーのクラスでコピペ用のコードを書いておく方法です。
/* コピペ用コード */
.font-size-dummy {
font-size: .75rem; /* 12px */
font-size: .8125rem; /* 13px */
font-size: .875rem; /* 14px */
font-size: 1rem; /* 16px */
font-size: 1.25rem; /* 20px */
font-size: 1.75rem; /* 28px */
}
デフォルトの意味を考えよう
そもそもブラウザのデフォルトって何のために設定されているのでしょうか?
ウェブサイトを表示する際に、特に指定されていない時の初期値がデフォルトです。
現在のモダンブラウザはデフォルト値がほとんど同じですので、これまでの知見に基づいて多くのユーザーにとって最も使いやすいと考えられる値が設定されていると考えられます。
また、この初期値が使いづらいユーザーは、自分で使いやすいように変更できるようになっています。
この「初期値が使いづらい場合にはユーザーが変更できる」というのが、アクセシビリティを考えるうえで重要です。
その初期値を制作の都合で変えてしまうというのは、よほどの理由がない限りは行わないほうがいいのでは? というのが私の考えです。
特に小さな文字が見づらいユーザーにとって、デフォルトフォントサイズを10pxにされてしまうと問題が起こりやすいです。
逆にデフォルトフォントサイズを変えてもいい場合としては、例えば、ボタンでフォントサイズが変更できる機能 などがあると思います。
実は私も10年前のWordPressの勉強会で登壇した時に『html要素のフォントサイズを10pxにしとくと便利』と話していました。
しかし、時代が変わり経験を積んでくると考え方も変わってきます。
皆さんはどうお考えでしょうか?
プラグインは理解。
けれども
>「初期値が使いづらい場合にはユーザーが変更できる」
:rootを10pxにするだけだと思うのでbodyサイズを1.6remにしておけばユーザー側の話は解決できるのではないでしょうか?
コメントありがとうございます。
本文にも書いているのですが、WooCommerceなどの有名どころのプラグインはフォントサイズがremで指定してあります。
bodyを1.6remにすれば通常部分はフォントサイズが継承されますが、プラグインが出力する部分には継承されない(ほとんどのテキストのフォントサイズがプラグインのCSSで1remと指定されている)のです。
そのため、プラグインのCSSでフォントサイズが指定されている部分をすべて1.6倍するか、emで指定し直す必要があるのです。
大変勉強になりました。
ありがとうございます。
rem の計算を簡略化するために
html { font-size: 62.5%; }
を盲目的に使っておりました。
@media (min-width: 40rem ) { … }
と指定しましたところ
意図した 400px ではなく
640px ( = 16px * 40 ) で CSS が変更しましたので
これはよくないな… と思いました。
(それまではメディアクエリを px で指定しておりましたので気づきませんでした)
ありがとうございます。
コメントいただいた内容についてですが、もしかすると chrome のバグ(仕様?)かもしれないです。
過去にAppleのサイトが似たようなことをやっていて、chromeだけ表示が崩れてたって話を聞いたことがありますよ。
とはいえ、初期値を変えるというのはどういうことかってわかったうえでやっているのか、盲目的にやっているのかは大きな違いですよね。
確かに仰る通りですね。リセットcssのスニペット見直してて、ふと疑問に思い検索したらこちらの記事に出会いました^_^早速やってみます。
ツイートさせていただきました。
コメントありがとうございます。
リセットCSSの見直し・・・私もリセットCSSは盲目的に流用したりしているので見直したほうがいいかもしれないと思いました。
気づきをいただきありがとうございました。
教えてください。
Sassをつかわない場合
:root {
–root-font-size: 16;
}
p {
font-size: calc( 13 / var(–root-font-size) * 1rem );
}
これは、font-size が13px と言うことでしょうか?
16pxだと
div{
font-size: calc( 16 / var(–root-font-size) * 1rem );
}
と言うことでしょうか?
と。
htmlには、font-sizeを指定しないでSassをつかわない場合を利用すればいいのでしょうか?
2点教えていただけると助かります。
コメントありがとうございます。
はい、2点とも、おっしゃられている通りで良いと思います。