font-sizeをremで指定する時の62.5%について考える【remのメリット・デメリット】

font-sizeの単位をどう指定するかという問題。
コーディングをする方なら一度は考えたことがあると思います。

私も最初のころはpxを使っていたのですが「なんだか聞くところによるとremの方が良さそうだ」という（根拠のない）情報で、font-sizeにrem単位を使うシーンが増えたのも事実です。

しかしremを使うことで受ける恩恵や、remを使いやすくするために「font-size: 62.5%」を指定することでなにか弊害はないのか気になりますよね。

そこで今回、以下の２点について改めて調べてみることにしました。

1. そもそも、remでfont-sizeを指定するメリット・デメリット
2. ルートに “font-size: 62.5%;” を指定するメリット・デメリット

rem？？font-size: 62.5%;？？？何ソレ。という方もぜひ参考にしてみてくださいね。

rem is 何

remとは「root em」の略で、ルート(html)のフォントサイズを「１」として考えます。

つまり、ルートのフォントサイズを16pxとしたら16pxが1remです。
そしてあえて16pxと指定しなくても、基本的にブラウザのデフォルトフォントサイズは16pxとなっています。

1rem=16pxですから、2rem=32px、3rem=48pxです。

簡単ですね。掛け算を覚えたての小学生でもわかります。

remでfont-sizeを指定するメリット

本題の一つ目「remでfont-sizeを指定するメリット」についてです。

私が思うfont-sizeの単位にremを使うメリットとしては以下の３つだと思っています。

順番にみていきます。

メリット①：ブラウザのフォントサイズが設定通りになる

これはブラウザの設定画面で行えるものです。

ちなみにchromeでは「設定（ブラウザ右上の︙）」→「デザイン」→「フォントサイズ」で変更することができます。

ここでフォントのサイズを変更すると、remの場合はそのフォントサイズに合わせて大きさが変化します。

しかしpxでフォントサイズを指定した場合は、変化しないのです。

ちなみに、単純に「画面を拡大」すれば文字も画像も全て大きくなります。これはpxだろうがremだろうが関係ありません。

メリット②：ルートの指定で一括サイズ調整が可能

例えばルートのフォントサイズを16pxではなく「12px」としたら「12px=1rem」となります。

そして前述した

1rem=16px、2rem=32px、3rem=48px　は
1rem=12px、2rem=24px、3rem=36px　になります。

これはメディアクエリなどでSP版のフォントサイズを一括で小さくする場合などに便利です。

メリット③：なんかモダンな感じがする

「なんか今の時代はpxよりrem推しかなって…。」

「pxという単位は昔から聞いたことあるけど、remってWeb業界に入って初めて知った。専門的な感じがしてカッコイイ」

そんなモダンさを感じるのもremの特長。（よく考えたらメリットではなかった）

remでfont-sizeを指定するデメリット

次に「remでfont-sizeを指定するデメリット」についてです。

私が思うfont-sizeの単位にremを使うデメリットとしては以下の2つだと思っています。

順番に解説していきます。

デメリット①：保守が別の人の手に渡るとややこしくなる

自分だけで制作・保守もやる場合は問題ないのですが、公開後にサイト保守が他の人の手に渡った際、単位の書き方の違いにより保守が煩雑になる可能性があります。

px単位はベーシックなので抵抗がある人はいないと思うのですが、remの場合はそういう可能性があります。

デメリット②：余白もrem指定しないと表示が崩れる

先ほどremのメリットとして「ブラウザのフォントサイズ設定を変更したときに、その設定通りになる」というのを挙げました。

しかしfont-sizeをremにしても、周りの要素がpx指定の場合、文字だけが大きくなったり小さくなったりしてレイアウトが破綻する可能性があります。

例えば以下をご覧ください。

このサイトは私が駆け出しだったころに作成したものです。以下の記事でも掲載しています。
そして文字だけをrem指定しています。

見てわかる通り、ブラウザのフォントサイズを大きくすることによりレイアウトがはみでたり、はちゃめちゃになっていますね。

paddingやmarginなどをpxで指定してしまっているため、文字だけが大きくなり、収まりが悪くなってしまっています。

font-sizeをremで指定するならば、paddingやmarginの単位もremとした方が良いと思います。

ルートに “font-size: 62.5%;” を指定するメリット

次にremを使用する際の「font-size: 62.5%;」のメリットについて解説していきます。

62.5%のメリット①：remの計算が簡単になる

メリットはこれに尽きると思います。

「1rem=16pxですから、2rem=32px、3rem=48pxです。簡単ですね。掛け算を覚えたての小学生でもわかります。」

先ほどこのように言いました。

では、12pxは何remでしょう？18pxは？22pxは？

小学生でなくても、px基準で考える場合はremに変換するのって難しいですよね。

そこで登場するのが「font-size: 62.5%;」　

ルート（html）にfont-size: 62.5%;を記述すると計算が簡単になります。
ルートの16pxが62.5%になるので

16px × 0.625 = 10px

つまりルートのフォントサイズは10pxとなり「1rem=10px」になります。

先ほど口の悪い小学生が解けなかった12pxは1.2rem。18pxは1.8rem。22pxは2.2remになります。
もう難しい計算とかいらないですね。remの数字を10倍したものがpx値です。

この62.5%をルートに指定するだけで、remは格段に使いやすくなります。

ルートに “font-size: 62.5%;” を指定するデメリット？

そんな便利な記述ですが、次に “font-size: 62.5%;” を指定するデメリット」について考察していきます。

62.5%のデメリット考察①：フォントサイズ設定の変化量が小さくなる？

ルートにfont-size: 62.5%;を指定するデメリットとして、ネット上で以下のような記事を目にしました。

ルートでフォントサイズを62.5%に指定すると、ブラウザのフォントサイズ設定を変えたときに、サイズの変化量が小さくなってしまいます。

ネット上の記事より

つまり、フォントサイズを「大」にしても、通常の「大」サイズよりフォントが小さくなってしまう。ということです。

しかしこの現象を実際に検証してみたところ、そのようなことは起こりませんでした。

例えば「大」に設定すれば、62.5%を設定していない場合と同じ変化量で大きくなります。
ですので、この点に関しては何も問題ないです。

62.5%のデメリット考察②：px値で指定しても62.5%が効いてしまう？

他に何かデメリットはないかと考えたところ、以下のような場合はどうでしょう。

「フォントサイズをpxで指定したいところにも62.5%が効いてしまうのではないか」

例えば「ここはpxでフォントサイズを指定したい」というとき「font-size: 24px;」と書くと「62.5%」が効いてしまって「24×0.625=15px」になってしまうのではないかという仮定。

結論を言うと、そんなことはありませんでした。
ちゃんと24pxは24pxでブラウザに表示されます。

62.5%のデメリット考察③：直書き派の人に渡ると混乱する？

最後に考えられる「font-size: 62.5%;」のデメリットですが、そのサイトがシンプル直書きrem派オジサンの手に渡ったら、その人が混乱してしまうという可能性はどうでしょう。

“font-size: 62.5%;” を指定するデメリット考察まとめ

結論

font-size: 62.5%;をルートに指定しても特段デメリットはない。

総まとめ

このフォントサイズの問題に関しては、主にブラウザのフォントサイズを変更したときに生じます。
それ以外で特に気にする点は見受けられませんでした。

今回の調査で思ったのは、pxにもremにもそれぞれメリット・デメリットがあるということです。
なのでどちらが一概に良いとは言えません。結局本人やプロジェクト次第ですね。アクセシビリティを優先するのか、分かりやすさや工数を優先するのか。

remを使用する場合「62.5%」をルートに指定しても特段問題はないこともわかりました。
ただSassを扱える方は、関数を用いてremを扱いやすくすることもできます。

「Sassを用いてpx感覚でremを使う方法」は以下の記事で紹介していますので、気になった方は参考にしてみてください↓

最後までお付き合いいただきありがとうございました！