clamp() 計算ツールのしくみ
指定するのは 2 つの点です。いちばん狭い画面でのサイズと、いちばん広い画面でのサイズ。ツールはその 2 点を直線で結び、最小値・推奨値・最大値の 3 つからなる 1 つの CSS clamp() 式に変換します。最小ビューポートより狭いと最小値のまま、最大ビューポートより広いと最大値のまま、その間ではメディアクエリなしでなめらかに変化します。
傾きは、ビューポート幅が 1px 増えるごとに値が何 px 増えるかを表し、vw 単位で書きます（1vw はビューポート幅の 1%）。切片は、その直線が幅 0 の画面でとる値です。この 2 つで中央の引数、たとえば 0.8333rem + 0.8333vw ができあがります。
出力に rem を使う理由
推奨値に rem の成分を含めると、フルードな文字が、読み手がブラウザで設定したフォントサイズに追従し続けます。vw だけで作ったサイズはこの設定を無視し、ズームの効果も弱めてしまいます。そのため既定の出力は rem です。デザイントークンを px で管理している場合は px も選べます。html のフォントサイズを変更しているプロジェクトでは、ルートフォントサイズ欄に値を入れてください。
プレビュー、ブレークポイント、アクセシビリティ
ビューポートのスライダーを 320〜1920px の間で動かすと、その幅で表示されるサイズの文字を確認できます。表には、スマートフォン向けの 320・375px、タブレット向けの 768・1024px、デスクトップ向けの 1280・1440・1920px での計算結果が並ぶので、見出しがスマートフォンで窮屈になっていないか、大きなモニターで大きすぎないかを確かめられます。
WCAG の達成基準 1.4.4 は、コンテンツを損なわずに文字を 200% まで拡大できることを求めています。ブラウザのズームは CSS ピクセルで測ったビューポート幅も縮めるため、変化の大きすぎるフルードタイポグラフィは、ズームしても思ったほど大きくならないことがあります。最大値を最小値の 2.5 倍以内に収めるのが広く使われる目安で、超えるとツールが警告します。
共有とエクスポート
設定はすべてページの URL に保存されるので、結果をブックマークしたりチームメンバーに送ったりできます。clamp() の値そのもの、:root 用の CSS カスタムプロパティ、Tailwind の任意値クラスをコピーできます。サイズ一式が必要なら、タイプスケールモードに切り替えてモジュラースケールを CSS 変数として書き出しましょう。