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にしとくと便利』と話していました。
しかし、時代が変わり経験を積んでくると考え方も変わってきます。

皆さんはどうお考えでしょうか？