Webサイト制作では、画面サイズに応じて文字サイズを調整する「レスポンシブフォントサイズ」が重要です。スマートフォン・タブレット・PCなど、さまざまな画面幅でも読みやすさを保つためです。
以前はメディアクエリを使って画面幅ごとにフォントサイズを変更する方法が主流でした。しかし現在は、CSSの clamp() 関数を使う方法が主流になっています。
昔の方法：メディアクエリで切り替える
以前は画面サイズごとにフォントサイズを指定する方法が一般的でした。
今主流の方法：clamp()
現在多くのサイトで使われているのが clamp() を使ったフォントサイズ指定です。
font-size: clamp(18px, 2vw, 28px);
clampは次の3つで構成されています。
最小サイズ
可変サイズ
最大サイズ
つまりこの指定は
最小：18px
画面幅に応じて拡大（2vw）
最大：28px
という意味になります。
画面が小さいと18px、
画面が広くなると徐々に大きくなり、
最大で28pxまでしか大きくなりません。
このようにメディアクエリを書かなくても自動でサイズが調整されます。
デザイン基準から計算する書き方
実務では、デザインカンプの幅を基準に計算する書き方もよく使われます。
例えば
デザイン幅：1440px
フォントサイズ：28px
の場合は次のように書きます。
font-size: clamp(18px, calc(28 / 1440 * 100vw), 28px);
これは
1440pxの画面で28pxになる
それより小さい画面では比例して縮む
最小は18px
という指定になります。
なぜclampが主流になったのか
理由はシンプルです。
コードが圧倒的にシンプルになるからです。
メディアクエリを複数書かなくても、1行でレスポンシブ対応できます。
また、画面幅に応じて段階的ではなく滑らかにサイズが変化するため、自然なレスポンシブデザインになります。
実務でよく使われるパターン
よく使われる指定の例です。
font-size: clamp(14px, 1.2vw, 16px);
font-size: clamp(18px, 2vw, 28px);
font-size: clamp(28px, 4vw, 64px);
本文・見出し・ヒーローなどで使い分けることで、読みやすいレイアウトを作ることができます。
まとめ
現在のレスポンシブフォントサイズの主流は clamp() を使う方法です。
メリットは次の通りです。
メディアクエリが減る
コードがシンプルになる
フォントサイズが滑らかに変化する
デザインカンプ基準で計算できる
レスポンシブデザインを効率よく実装するために、今のフロントエンド制作では欠かせない書き方になっています。
