14〜16px の clamp() の値
ビューポート範囲が 320px〜1280px の場合、結果は clamp(0.875rem, 0.8333rem + 0.2083vw, 1rem) です。ビューポート幅が 100px 増えるごとにサイズは 0.21px 大きくなり、768px のタブレットで約 14.9px、1024px で約 15.5px となり、1280px 以上では 16px で一定になります。
推奨値は、固定の rem 部分と vw 部分を組み合わせたものです。rem 部分は文字を読み手のブラウザのフォントサイズに結びつけ、vw 部分が変化を生み出します。レイアウトのコンテナが広がらなくなる幅がこれより狭い、または広い場合は、上のビューポート欄を変更してください。
14px〜16px を使う場面
14〜16px の範囲は、キャプション、フォームの補足、表のセル、脚注、密度の高いナビゲーションなどの補助的な文字に適しています。変化はわずかなので、スマートフォンで場所を取らずに、デスクトップでは少しだけ読みやすくなります。16〜18px の本文と組み合わせると、明確な階層を保てます。
最大値は最小値の 1.14 倍で、WCAG 1.4.4「テキストのサイズ変更」の目安としてよく使われる 2.5 倍以内に収まっています。そのため、ブラウザのズームでもこのサイズは予測どおりに拡大されます。
数値の求め方
傾き =（16 − 14）÷（1280 − 320）= 0.0021、つまり 0.2083vw です。切片 = 14 − 傾き × 320 = 13.33px で、ルートフォントサイズ 16px なら 0.8333rem です。この 2 つの数値が clamp() の中央の引数になり、最初と最後の引数は最小値と最大値を rem に換算したものです。
プロジェクトでの使い方
値を font-size の宣言に貼り付けるか、--fluid-size のようなカスタムプロパティに格納するか、Tailwind クラス text-[clamp(0.875rem,0.8333rem_+_0.2083vw,1rem)] を使ってください。関連するサイズを一式そろえたい場合は、タイプスケール生成ツールが同じビューポート範囲で基準サイズを中心にステップを作成します。