clamp関数を使ってフォントサイズを可変にする方法

レスポンシブデザインで、見出しのフォントサイズをブレークポイントを設けてフォントサイズを調整していましたが、clamp関数を使うことによって簡単に設定することができるようになりました。

書式

clamp( 最小値, 推奨値, 最大値 );

最小値：表示したい最小のフォントサイズ
推奨値：表示させたいフォントサイズ
最大値：表示したい最大のフォントサイズ

以下の式で推奨値を求めます。
推奨値 = 最小のフォントサイズ ÷ 横幅 × 100

例えば横幅を320pxにして、最小フォントサイズを18pxにした場合、推奨値は以下のようになります。
18px ÷ 320px ✕ 100 ＝ 5.625vw

設定例

以下に３つのサンプルを示します。
推奨値は、画面最小サイズ320pxをベースにして、最小フォントサイズを16px、18px、20pxに変えています。

サンプル１

横幅：320px
最小フォントサイズ：16px
最大フォントサイズ：32px
推奨値：16px ÷ 320px ✕ 100 = 5

font-size: clamp(16px, 5vw, 32px);

サンプルテキスト

表示しているフォントサイズは、

 

サンプル２

横幅：320px
最小フォントサイズ：18px
最大フォントサイズ：32px
推奨値：18px ÷ 320px ✕ 100 = 5.625

font-size: clamp(18px, 5.625vw, 32px);

サンプルテキスト

表示しているフォントサイズは、

 

サンプル３

横幅：320px
最小フォントサイズ：20px
最大フォントサイズ：32px：
推奨値：20px ÷ 320px ✕ 100 = 6.25

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

サンプルテキスト

表示しているフォントサイズは、