CSS clamp() でフォントサイズの推奨値を計算する
font-size: clamp( 最小値、推奨値、最大値 )
最小値は下限。最大値は上限。推奨値は最小値と最大値の間で使用される値。
viewport を基準にした推奨値の計算
設定例
- フォントサイズ最小値 1rem（16px）
- フォントサイズ最大値 1.25rem（20px）
- 最小ビューポート 20rem（320px）
- 最大ビューポート 48rem（768px）
ウィンドウ幅が 320px 以下の場合は フォントサイズ 1rem（16px）。ウィンドウ幅が768以上の場合1.25rem。321px – 767px の間は1rem – 1.25rem 間で変化する。
計算式
参考にしたページLinearly Scale font-size with CSS clamp() Based on the Viewport
slope = (最大フォントサイズ – 最小フォントサイズ) / (最大viewport – 最小viewport)
yAxisIntersection = -最小viewport * slope + 最小フォントサイズ
preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]
↓↓↓これを当てはめると…
0.008928571428571 = (1.25rem – 1rem) / (48rem – 20rem)
0.8214285714285714 = -20rem * 0.008928571428571 + 1rem
推奨値 = 0.8214285714285714rem + 0.8928571428571vw
clampの記述 ※小数点第4位以下丸め
font-size: clamp(1rem, 0.8214rem + 0.8929vw, 1.25rem);
….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….こんな計算やってられるかよーーーーーっっっ！！！
下記オンラインの自動計算ツールに頼りましょう。
※Fluid responsive font size calculatorの方は calc は不要と思われます。（そのまま残しても不具合はありませんが…）