clamp() 流体タイポ計算とは
画面幅に応じてフォントサイズがなめらかに変化する「流体タイポグラフィ」を、CSSの clamp() で実現するための値を計算する無料ツールです。最小・最大のフォントサイズと、その基準となるビューポート幅を入力すると、clamp(最小, 傾き×vw + 切片, 最大) の形のCSSを自動で作ります。メディアクエリを増やさずに、小さい画面でも大きい画面でも読みやすいサイズにできます。
使い方
- 最小・最大のフォントサイズを入力する
- 対応させたい最小・最大の画面幅を入力する
- 生成された
clamp()をコピーしてfont-sizeに使う
仕組み
2つの点（最小幅での最小サイズ、最大幅での最大サイズ）を直線で結び、その傾きから vw の係数と切片を求めています。clamp() は「最小値・推奨値・最大値」を受け取り、推奨値が範囲を外れないように挟み込みます。これにより、指定した幅の間はサイズが直線的に変化し、範囲外では最小・最大で頭打ちになります。最小サイズを最大サイズより大きくした場合（画面が広いほど文字を小さくする指定）にも、正しい上下限で clamp() を出力します。
rem を使う理由
フォントサイズを rem で指定すると、ユーザーがブラウザの文字サイズ設定を変えたときに追従しやすく、アクセシビリティの面で有利です。本ツールは既定で rem を出力し、ルートフォントサイズ（通常16px）を基準に換算します。px 表記に切り替えることもできます。
よくある質問
vw だけではダメですか？
vwだけだと極端に小さく／大きくなりすぎることがあります。clamp() で最小・最大を挟むと、読みやすい範囲に収まります。見出しにも使えますか？
使えます。見出しは最小・最大の差を大きめに、本文は小さめにすると自然です。要素ごとに計算して指定してください。
画面幅の目安は？
最小幅はスマホ（375px前後）、最大幅はデザインの基準幅（1280〜1440pxなど）にするのが一般的です。
無料・インストール不要のブラウザツール ／ clamp() 流体タイポ計算