フォントのサイズ指定について昔はpx指定が普通でしたが、最近はpx指定は少数、remによる指定がかなり増えている印象です。
remで指定する際に計算が楽になる、ルートフォントを62.5%(10px)に指定する方法を解説していきます。
なぜルートフォントを62.5%(10px)にするのか
ルートフォントとは各ブラウザのデフォルトのフォントサイズの事を言い、デフォルトだと16pxとなります。
では、なぜルートフォントを62.5%(10px)にするのか。それは最近のフォントサイズの指定方法にあります。
昔はpxでの指定が普通でしたが、最近はremでの指定がかなり増えています。
例えば、ルートフォントが16pxだとした場合16px=1remとなり20pxだと1.25remと計算が複雑になり間違いが起こる為です。
ルートフォントを62.5%(10px)にする事で、10px=1rem、20px=2rem、35px=3.5remと計算が必要なくなり指定がしやすくなります。
ルートフォントの変更の是非
このルートフォントの変更については賛否があります。
サイトコーディングをする上で扱いやすいというメリットはあるものの、デフォルトのサイズは変えるべきではないという意見もあります。
sassなどではmixinで、そうでなくてもcalcでの計算式でも可能である事や、Wordpressのプラグインのよっては出力部分がremで指定されている場合は、ブラウザのデフォルトのフォントサイズを元に指定されている場合もあります。
そういったメリットやデメリットを理解した上で、変更するのは個人的にはアリだと考えています。
実際、便利なので使っていますが笑
ルートフォントの変更の仕方
それでは、ルートフォントを62.5%(10px)に変更する方法を紹介いたします。
以下のコードを記述するだけでルートフォントを62.5%(10px)に変更可能です。
html {
font-size: 62.5%;
}この記述をする事でルートフォントが62.5%(10px)になりますので、後はこのサイズを基準にrem指定等行っていけば大丈夫です。
さいごに
いかがでしたでしょうか。
remでの指定の場合ルートフォントの変更はしっかり理解した上で使用するのは非常に有用なものかと思います。
その他にも現在はvwやclampなども含め様々なサイズの指定方法があります。これらも含め、その都度状況に合わせて変えていければ便利です。
