CSS3の比較関数clamp()で文字サイズを可変にするテクニック

CSS3の比較関数、min()、max()、clamp()ってすごく便利ですよね。
それぞれ簡単におさらいすると、

min()

width: min(100%, 1000px);

のように、推奨値と最大値を設定できる関数。上の例だと

width: 100%;
max-width: 1000px;

とやってることは同じ。

width: max(50%, 500px);

のように、推奨値と最小値を設定できる関数。上の例だと、

width: 50%;
min-width: 500px;

とやってることは同じ。

width: clamp(500px, 100%, 1000px);

のように、最小値、推奨値、最大値を設定できる関数。上の例だと、

width: 100%;
min-width: 500px;
max-width: 1000px;

とやってることは同じ。

というように引数に入力した内容で計算や比較した数値をプロパティ値として適用することができます。
分かりやすく例として上げたwidth属性の場合では「min-width」「max-width」で同じようなことができたりしますが、これらの関数は様々なプロパティ値として利用できるのが今回のポイント。

前置きが長くなりましたが、ここからが本題。
レスポンシブデザインの場合、PC、タブレット、スマートフォンなど様々な端末や、端末機種毎のサイズ感の違いなどもあるため、それらの違いに合わせたより細かい数値設定を行いたいシーンがあると思います。
私が特にその有用性を感じるのが文字サイズです。

可変する単位として使えるものとしては、ブラウザ幅を基準にした「vw」がありますが、
例えばブラウザ幅が1280pxのときに32pxの文字サイズに設定する場合「(32÷1280)×100=2.5vw」になります。

font-size: 2.5vw
のように設定すると画面幅に応じて文字サイズが可変しますが、最小値や最大値が無いので画面幅に比例して大きくなりすぎたり小さくなりすぎたりします。

そこでclamp関数を使って以下のように設定すると

font-size: clamp(20px, 2.5vw, 32px);

ブラウザ幅に応じて、最小値20px〜最大値32pxの間で相対的に文字サイズを変更することができるというわけです。

以上、文字サイズを可変にするテクニックでした。
各関数の引数には計算式が使えたり他の関数も使えたりするので、工夫次第で便利な使い方ができてレスポンシブコーディングをグッと楽しくしますね。