流体タイポグラフィ計算 — CSS clamp()
2つのビューポート幅の間でフォントサイズを滑らかに変化させるCSS clamp()を生成 — ブレイクポイント不要。
744回閲覧
最大値は最小値より大きくしてください
ライブプレビュー(ウィンドウ幅を変えてみてください):
Almost before we knew it, we had left the ground.
clamp()の考え方
流体タイポグラフィは、小さいビューポートでの最小サイズと大きいビューポートでの最大サイズの間を線形に補間します: 傾き = (最大フォント−最小フォント) ÷ (最大ビューポート−最小ビューポート)、そして font-size: clamp(最小rem, 切片rem + 傾き·100vw, 最大rem) となります。ビューポート375→1280 pxの間でフォント16→24 pxとする場合、結果は clamp(1rem, 0.793rem + 0.884vw, 1.5rem) となり、375 pxではちょうど16 px、1280 pxではちょうど24 px、その間は滑らかに変化し、範囲外では上下限に固定されます。
preferred値に含まれるremの部分はアクセシビリティ上重要です。vwのみの式では、ユーザーのブラウザのフォントサイズ設定が完全に無視されてしまいますが、rem切片があることでズームや大きな文字設定が引き続き機能します。このツールは常にこの混合形式を出力します。
よくある質問
どのビューポート範囲を使えばよいですか?
375 px(一般的なスマートフォン)から、コンテンツの最大幅(多くの場合1200〜1440 px)までを目安にしてください。範囲の外側ではclamp()が最小値・最大値で固定されるため、スマートウォッチや超ワイドディスプレイでも表示が崩れません。
余白(spacing)にも使えますか?
はい — 同じ計算式がpadding、margin、gapにもそのまま使えます。最小値・最大値を余白の値に置き換えて生成し、CSSカスタムプロパティにclamp()を設定してください。
スマートフォンで文字が最小サイズぴったりにならないのはなぜですか?
実際のCSSビューポート幅(デバイスピクセル ÷ DPR)を確認してください。「390 px」のスマートフォンは375 pxの範囲開始値より広いため、サイズが最小値よりわずかに大きくなるのは意図した動作です。
関連ツール
問題を報告
流体タイポグラフィ計算 — CSS clamp()