2023年現在、CCSのフォントサイズの単位はremを使うのがベストです。（※ルートにfont-size:62.5%の記述はなしで）

またレスポンシブに対応させて、横幅が広くなればフォントのサイズも大きくなるように設定するにはclamp()関数を使うことで可能になります。

今回はvar()関数やclamp()関数といったCSSの関数も出てきますが、初心者の方でも分かるように詳しく解説します。

この記事を読めば、もうフォントの単位で迷うことはありません。

ぜひ最後までお読みください。

px、em、remについて

px(ピクセル)がイマイチな理由

pxは絶対的なサイズを指定します。(厳密にいうと絶対ではありませんが)

常に値が変わらないため、レスポンシブ対応の記述が必要になるだけでなく、ユーザーのデバイスやブラウザの設定によっては拡大や縮小ができない場合もあり、ベストな選択肢とは言えません。

em(エム)がイマイチな理由

親要素のフォントサイズに対する相対的な値を表します。
デバイスやブラウザに対して柔軟性がありますが、親要素の影響を受けるため、階層が深くなるほど計算が複雑になります。
開発者側の負担が増えるため、こちらもベストではありません。

remがいい理由

ルートのフォントサイズに対する相対的な値を表します。
emと同じくデバイスやブラウザに対して柔軟性があるだけでなく、ルートの値を参照しているため計算も複雑にはなりません。

ユーザーにとっても、開発者側にとっても、ベストな選択肢はremです。

font-size:62.5%について

少し前まで、フォントでremを使用する際にはルートにfont-size:62.5%を記述するのがいいという情報が出回りました。

これは、remをpxと同じように扱うための記述です。

remで記述する際には、大抵のブラウザでのデフォルトのルートフォントサイズが16pxなため、1remと記述すると16pxのサイズを表すことができます。

ただ、14pxを表したいときは、14÷16=0.875で0.875remと記述しなくてはいけないので、計算が必要だったり、わかりにくかったりします。
2種類だけならまだいいですが、22px、47pxと種類がどんどん増えていくと大変です。

そこで10÷16=0.625の62.5%をルートのフォントサイズに設定することにより、16pxのサイズを16remと記述できるようになるというわけです。
14pxを表したいときは、14remと書けるようになり、単位が変わるだけなので分かりやすいですよね。

しかしながら、これは開発者側にはメリットがあるだけで、結局はpxと同じになってしまうので柔軟性は失われます。

ブラウザでデフォルトの設定が16pxではない場合、ユーザーがデフォルトのフォントサイズを変えた場合には、非常に小さくなったり、読みづらくなったりします。

calc()関数による計算

62.5%を使わずにフォントサイズを分かりやすく記述するには、calc()関数を使うのがいいと思います。

14pxにしたいときは以下のように記述します。

font-size: calc(14 / 16 * 1rem);

この記述により、CSS側で14÷16を自動で計算してくれます。そこに1remをかけることにより0.875remとなります。

20pxのときは14を20に変えるだけです。

font-size: calc(20 / 16 * 1rem);

これで毎回計算する手間はなくなりました。

ただ、毎回この式を書くのは面倒です。
値を変えたいときに、毎回数字の部分だけを変えるのも大変です。

そこでこれを変数にして格納します。

CSS変数

今回はSASSは使わずCSS変数を使います。

14pxの方にfz14、20pxの方にfz20という名前をつけ、名前の前に”-”を二つ書きます。

--fz14: calc(14 / 16 * 1rem);
--fz20: calc(20 / 16 * 1rem);

これで変数の設定はできました。
あとはこの変数を適応したいところでvar()関数を使って呼び出すだけです。

.main-title {
font-size: var(--fz20);
}
.sub-title {
font-size: var(--fz14);
}

これで完成です。

font-sizeのレスポンシブ対応

ここからは横幅が広くなるにつれて徐々にfont-sizeが大きくなるようにするコードの記述方法を解説していきます。

clamp()関数について

まずはclamp()関数について解説します。

clamp()関数は以下のような記述をします。

font-size: clamp(1rem, 2.5vw, 2rem);

（）の中は左から順に最小値、推奨値、最大値になります。

2.5vwはブラウザの横幅に対して2.5%の割合で表示されるという意味です。

つまり上の例は、1remよりは小さくならず、2remよりは大きくならず、ブラウザの横幅に対して2.5%の割合で大きくなったり、小さくなったりするということになります。

ただ、これを自分の狙い通りの値にするのは大変です。

そこで外部のサービスを使います。

Min-Max-Value Interpolation

こちらのサイトは登録もログインもいりません。
値を入力すると、clamp()を生成してくれる非常に便利なサービスです。

左側のVALUESにはclamp()関数に設定したい最小値と最大値を記入します。

右側のVIEWPORTにはブラウザの横幅をどこからどこまで可変にするかを設定できます。

上の設定では1rem(16px)よりは小さくならず、1.5rem(24px)よりは大きくならず、ブラウザの横幅が320pxから1200pxの間で大きくなったり、小さくなったりするということになります。

自分で計算するのは大変なので、レスポンシブ対応のフォントを作るときは、ぜひこのサービスを利用してください。

Min-Max-Value Interpolation
https://min-max-calculator.9elements.com/

まとめ

今回はfont-sizeについて解説させていただきました。
font-sizeの単位をremにすることは、ユーザーにとっても、開発側にとってもメリットがあります。

デメリットを挙げるとするなら、最初の変数の設定や関数の定義などに手間がかかるというぐらいですが、断然メリットが優っています。

pxやemがいらないというわけではなく、pxやemにも適した使い所があります。

その辺りのことも、また記事にしていこうと思います。