Fluid Typographyの作り方｜vwとclampでレスポンシブ対応を自動化

結論

clamp(最小値, 推奨値, 最大値) を使うのが現在の手法。ブレイクポイントごとにメディアクエリを大量に書く必要がなくなります。

従来のレスポンシブとの違い

これまでは「スマホなら16px、PCなら24px」と段階的に切り替えていましたが、Fluid Typographyでは「スマホからPCにかけて16px〜24pxの間を無段階に変化」させます。

h1 {
  /* 最小32px、最大64px。その間は画面幅の5% + 1rem に追随 */
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

最小ビューポート幅 (px)

最大ビューポート幅 (px)

最小フォントサイズ (rem)

最大フォントサイズ (rem)

生成された CSS

最小値を設定する — 画面が極端に狭くなった時に文字が読めなくなるのを防ぎます。
アクセシビリティに配慮 — vw だけでなく rem を加算（例：5vw + 1rem）することで、ブラウザのズーム機能が効くようにします。
デザインの一貫性 — ページ全体ですべての要素をFluidにするのではなく、大きな見出し（Heading）から優先的に導入するのが効果的です。