こんにちは。アイレットデザイン事業部のwebデザイナーの黒木です。アイレットデザイン事業部ではINSIDE UI/UXと題して、所属デザイナーとエンジニアがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。

今回は、様々なfont-sizeの指定方法が存在しているので改めてまとめ直してみました。
指定方法によってフォントサイズがどのように変化するのか、また指定方法のメリット・デメリットを記述していきます。

font-size 単位

px

環境によって変化しない絶対値

em

「エム」と読み、親要素のfont-sizeを基準に変化する相対値
CSSで親要素に1emの大きさを指定していない場合、デフォルトで1em = 16pxとなる

rem

root em の略
「レム」と読み、文書のルート要素（“）のfont-sizeを基準に変化する相対値
emと同じく、CSSでルート要素に1remの大きさを指定していない場合、デフォルトで1em = 16pxとなる

%

emと同じく、親要素のfont-sizeを基準に変化する相対値

vw

viewport width の略
ブラウザウィンドウの横幅によって大きさが可変する
（ブラウザの横幅100% = 100vwなので、ブラウザ横幅1% = 1vwとなる）

（例）  
 ブラウザ幅が1440pxの時 → 1vw = 14.4px  
 ブラウザ幅が768pxの時 → 1vw = 7.68px  
 ブラウザ幅が375pxの時 → 1vw = 3.75px

vh

viewport height の略
ブラウザウィンドウの縦幅によって大きさが可変する
（ブラウザの縦幅100% = 100vhなので、ブラウザ縦幅1% = 1vhとなる）

（例）  
 ブラウザ縦幅が1440pxの時 → 1vh = 14.4px  
 ブラウザ縦幅が768pxの時 → 1vh = 7.68px  
 ブラウザ縦幅が375pxの時 → 1vh = 3.75px

それぞれのメリットデメリット

px

【メリット】

  • 画面幅やデバイス関係なく大きさを固定したいときに使える

【デメリット】

  • 画面幅やデバイスが違っても大きさが固定されるため、レスポンシブ対応の際１つ１つ書き換える必要がある
  • pxで指定された文字はブラウザデフォルトサイズ設定が効かない
    （参考URL：https://to.camp/lesson?v=syr7IVIVoL7ZIoPVuHps ）

em

【メリット】

  • 相対的な数値のため、レスポンシブに向いている

【デメリット】

  • 親要素を基準としているため、同じ1emでもサイトの中で大きさが変わる
  • ブラウザデフォルトサイズ設定が効くため、可変して欲しくない部分でも文字の大きさが変わってしまう
    （参考URL：https://jajaaan.co.jp/css/font-size-rem/ ）

rem

【メリット】

  • 親要素ではなく文書のルート要素を基準としているため扱いやすい
  • emと同じく相対的な数値のため、レスポンシブに向いている 
（例）PC版のフォントサイズをSP版のフォントサイズの1.2倍にしたい
@media screen and (min-width: 376px) {
    html {
        font-size: 75%; //1rem = 12px
    }
}
@media screen and (max-width: 375px) {
    html {
        font-size: 62.5%; //1rem = 10px
    }
}

【デメリット】

  • emと同じく、ブラウザデフォルトサイズ設定によって、可変して欲しくない部分でも文字の大きさが変わってしまう

%

【メリット】

  • em、remと同じく相対的な数値のため、レスポンシブに向いている

【デメリット】

  • emと同じように親要素を基準としているため、同じ数値を指定してもサイトの中で大きさが変わる
  • 計算が複雑になる
  • フォントサイズの数値が複雑になる

vw

【メリット】

  • ブラウザ横幅によってフォントサイズが変わるため、レスポンシブに向いている

【デメリット】

  • max-widthを指定したときレイアウト自体はmax-widthで止まるが、フォントサイズだけは大きくなり続けてしまう
  • heightを指定している場合もmax-widthの時と同じく、フォントサイズだけ大きくなり続けてしまう
  • スマホを横向きにした時ブラウザ横幅が大きくなりフォントサイズも大きくなるが、スマホの画面に比べると大きくなりすぎてしまう

vh

  • 調べてみたところvwと同じくくりでメリット・デメリットが書かれていることが多かったが、ブラウザ縦幅基準なのでレスポンシブにも向いてなくメリットが見つからなかった

小数点について

フォントサイズを細かく設定するために小数点を使用するのは推奨しません。
サイトを表示するブラウザによって小数点以下を切り上げるものもあれば切り捨てるものもあるためです。
1pxほどの差しか生まれませんが、その差で改行位置が変わったりしてしまう可能性もありますので注意してください。

font-sizeで使えるCSS関数

clamp関数

文字サイズの最小値、基準値、最大値を設定して文字サイズを可変することができる（min-widthやmax-widthと似たような性質）

基本的な書き方

font-size: clamp(最小値, 基準値, 最大値);

（例）1vwを基準値として14px〜32pxで可変して欲しい

font-size: clamp(14px, 1vw, 32px);

上記の例だと1vwはブラウザの横幅に合わせて可変する単位のため最小値と最大値がない限り小さくなり続け、大きくなり続ける
それをclamp関数を使って14pxと32pxの最小値と最大値を設定することで防いでいる
ただ、clamp関数はIE非対応のためIEを扱う際は、

font-size: 24px;
font-size: clamp(14px, 1vw, 32px);

このように2重で指定するとIEはfont-size: 24px;を読み込む

min関数

2つの数値のうち最小値となる数値が使用される

（例）
font-size: min(3vw, 24px);

上記の例だと24px以上になることはなく、画面幅に合わせて3vwに基づきサイズが小さくなる

max関数

2つの数値のうち最大値となる数値が使用される

（例）
font-size: max(3vw, 24px);

上記の例だと24px未満になることはなく、画面幅に合わせて3vwに基づきサイズが大きくなる

調べてみて

font-sizeの単位について

様々なフォントサイズ指定方法がありますが、レスポンシブデザインのコーディングをする際にPC版のフォントサイズがSP版のフォントサイズの何倍と決まっている時はremを使うことに意味があると思いました。
また、remの場合ブラウザデフォルトサイズ設定にも対応できるためユーザーにも優しく、アクセシビリティの観点から見ても効果的な単位だと思います。

ただ、文字の大きさを可変させたくない時（ボタンの文字の中にあるテキストなど）はpxが無難だと思います。
加えてスマホの普及率が高い今、ページを拡大する際はブラウザのデフォルトの文字サイズを変更するのではなく、ピンチアウトでページの拡大処理をすることが多くなっていると思います。その方法であればpxを使用していても文字の拡大が可能になるうえに周りの要素も同様に拡大します。pxを使用しているから必ずしも文字が大きくならないというわけではありません。
その点をふまえると先ほど挙げた特定の場合を除いては直感的にわかりやすいpxを使うのがいいのかなと個人的に思いました。

CSS関数について

CSS関数に関してはこれまで使用する機会がなかったのですが、今回調べてみてレスポンシブデザインのコーディングをするにはとても役に立つ方法だと思いました。

自分自身が今まで作ってきたWebサイトにおいて、SP幅では改行位置などに違和感がなくてもタブレット幅にしたところ改行位置が不自然になったり、タブレットの画面幅に比べて文字が小さいことがあり、その都度ブレイクポイントを１つ増やして対応を行なっていました。その手間をCSS関数を使用することでかなり軽減することができるのではないかと思いました。
IEに効かないというデメリットはありますが、今後IE対応必須のWebサイトは2022年6月のIEのサポート終了に伴って減少していくので配慮の必要がなくなると思います。
デメリットも少なくなるであろうCSS関数を今後積極的に使用していきたいです。

P.S. アイレットではエンジニア、デザイナーを募集しています。詳しくは採用情報のページをご覧ください。