ページがレスポンシブ対応の場合、フォントサイズも可変させたい場合がある。
cssのclamp関数を使うと画面幅に応じてフォントサイズを可変させることができる
font-size: clamp(最小値, 基準値, 最大値);
基準値はvwでフォントサイズを指定し、その計算方法はこちら
例:コンテンツの幅が1200pxの時にフォントサイズを16pxで表示させる
vwの計算方法 (基準となる文字サイズ)÷(基準となる幅)× 100 16 ÷ 1200 × 100 = 1.33...
この基準値に合わせてフォントサイズの最小値13px、最大値16pxとすると以下の通り
font-size: clamp(13px, 1.33vw, 16px);