最小・最大サイズからフルイドタイポグラフィのclamp()を自動計算
あア亜Aa 流体タイポグラフィ 123
最小フォントサイズ・最大フォントサイズと、それぞれを適用したい最小ビューポート幅・最大ビューポート幅を入力するだけで、流体タイポグラフィ（フルイドタイポグラフィ）用の clamp() 式を自動生成する無料ツールです。画面幅が狭いときは小さく、広いときは大きく、その間は滑らかに文字サイズが変化し、下限と上限でしっかり頭打ちになります。すべての計算はブラウザ内で完結し、インストールや会員登録は不要です。
出力された clamp(最小rem, 切片rem + 傾きvw, 最大rem) をそのまま font-size に貼り付けるだけで使えます。単位トグルで vw（ビューポート幅基準）と cqi / cqw（コンテナクエリ単位）を切り替えられ、コンポーネント単位で文字を流体化したい場面にも対応します。ライブプレビューはブラウザの横幅を変えると実際にサイズが伸縮するので、生成前に効果を確かめられます。
従来は @media でブレークポイントごとに font-size を書き分けていましたが、境界で値が段階的に飛び、コードも増えがちでした。clamp() と vw／コンテナクエリ単位を組み合わせると、1行で連続的にサイズが変化し、どの画面幅でも読みやすいサイズを保てます。コンテナクエリ単位（cqi/cqw）はBaseline 2024で広くサポートされ、2025年時点ではメディアクエリを使わない流体タイポグラフィが一般的なパターンになっています。
本ツールは次の手順で式を組み立てます。まず最小・最大フォントサイズを rem 基準（既定16px）で rem に変換します。次に傾き（ビューポートが1px広がるごとにフォントが何px増えるか）を求め、1vw = ビューポート幅の1% であることから100倍して vw 係数にします。最後に、最小ビューポート幅のときにちょうど最小フォントになるよう切片（rem部分）を逆算します。
| 項目 | 計算式 | 説明 |
|---|---|---|
| 最小値(rem) | 最小px ÷ rem基準 | clamp の下限 |
| 最大値(rem) | 最大px ÷ rem基準 | clamp の上限 |
| 傾き | (最大px − 最小px) ÷ (最大vw − 最小vw) × 100 | vw / cqi の係数 |
| 切片(rem) | (最小px − 傾きpx × 最小vw) ÷ rem基準 | 推奨値の定数部 |
最小16px（320pxのとき）・最大24px（1280pxのとき）、rem基準16pxの場合。最小値=16÷16=1rem、最大値=24÷16=1.5rem、傾き=(24−16)÷(1280−320)×100=0.8333vw、切片=(16−0.008333×320)÷16=0.8333rem。よって clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem) が生成されます。実際に320pxでは1rem(16px)、1280pxでは1.5rem(24px)にぴったり一致します。