font-sizeをremで指定する時の62.5%について考える

スキルアップ
自分
自分

Sassを導入後、font-sizeの単位remをpx変換できるようになった。でもこれ実際の現場ではどうなんだろ?駆け出しの頃からrem指定するのにかかせない存在だった「62.5%」と特段違いもないような。

 

Sassを導入後、関数式でfont-sizeのrem単位を扱えるようになりました。

そして今までremを使用する際に記述していた、ルートの「font-size: 62.5%;」を引退することに。

 

しかしよくよく考えると、Sassの関数を使ってremを記述する理由は「何だかスマート」以外にあるのかなという疑問が残ります。 

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

 

・そもそも、remでfont-sizeを指定するメリット

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

 

 

口の悪い女性
口の悪い女性

そんなウンチクどうでもよいからさっさと習得したっつってたSassの書き方を詳しく教えやがれこのサカナ野郎。

 

という方は次の記事に書いてますのでどうぞ…!

 

 

rem is 何

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

 

つまり、ルートのフォントサイズを16pxとしたら16pxが1remです。

そして16pxを指定しなくても、基本的にブラウザのフォントサイズは16pxとなっています。

 

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

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

 

remを使うメリット

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

 

・ブラウザのフォントサイズ設定を変更したときに、ちゃんとその設定になる

・ルートの文字サイズを切り替えると、一括でサイズ調整が可能

・なんかモダンな感じがする

 

ひとつずつみていきます。

 

ブラウザのフォントサイズの設定変更

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

ちなみに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の特徴。(よく考えたらメリットではなかった)

 

font-size: 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は格段に使いやすくなります。

私も駆け出しの頃からずっと62.5%にはお世話になってきました。

 

しかし冒頭でもお話した通り、Sassの関数式によりpx/rem変換する方法を使い始めました。

 

しかしその一方で

「62.5%がダメという理由も特にないような」

とも思ったので、色々と調べてみました。

 

62.5%のデメリット

フォントサイズ設定の変化量が小さくなる?

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

 

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

 

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

 

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

 

例えば「大」に設定すれば、62.5%を設定していない場合と同じ変化量で大きくなります。

ですのでこの点に関しては何も問題ないです。

 

px値で指定しても62.5%が効いてしまう?

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

 

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

 

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

   

結論を言うと、全くそんなことはありませんでした。

ちゃんと24pxは24pxでブラウザに表示されます。

 

 

補足として「remを使ってるのにあえて特定の箇所だけpxで指定したいとき」についてですが、以下のような時に考えられます。

まずこれから見る画像はブラウザのフォントサイズを「通常」と「極大」で比較したものです。

   

フォントサイズ:通常
フォントサイズ:極大

 

フォントサイズ:通常
フォントサイズ:極大

 

これら私が制作した架空のサイトの一部です。font-sizeを全てremで指定しています。

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

駆け出しの頃に作ったものなので、コーディングの仕方にも問題があると思いますが…。

 

自分のサイトだけではあれなので、試しにブラウザのフォントサイズ「大」でさまざまなサイトを徘徊しました。

その結果、font-sizeでremを使っている場合「文章が多い箇所・ボタンの中の文字」で周りの要素からはみ出してしまっているものが多く見受けられました。

文字の見やすさを求めてブラウザのフォントサイズを上げると、そのことにより逆にWebサイト全体が見にくくなってしまうこともあるようです。

 

ユーザビリティを考える上で、ブラウザのフォントサイズ設定の変化にあえて対応させない箇所も必要なのかもしれませんね。(そこまで考えるのはけっこう難しいですが…)

 

運用時に62.5%派ではない人の手に渡るとその人が憤る?

Webサイトが運用されてから別な人の編集が入るとき、シンプル直書きrem派で反62.5%の人の手に渡ったら、その人を怒らせてしまう可能性はどうでしょう。

 

口の悪いおじいさん
口の悪いおじいさん

もうええわさっさとこの記事終わらせやがれボケナス。

 

まとめ

このフォントサイズの問題に関しては、主にブラウザのフォントサイズを変更したときに生じます。

それ以外で特に困ることはないかと。

 

今回調べてみたところ、pxにもremにもそれぞれメリット・デメリットがあると思いました。

なのでどちらが一概に良いとは言えない気がします。

 

remを使用する場合「62.5%」をルートに指定しても特段問題はないです。

 

ただSassで記述するほうが「スマート」な気はします(結局最初と言ってること同じ)。 

結局本人や、プロジェクト次第ということですね。

 

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

 

コメント

タイトルとURLをコピーしました