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

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

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

clamp関数の書き方

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

実装のコツ

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

関連記事

この記事は フロントエンド・CSS テーマの一環です。あわせて読むと理解が深まる関連記事をまとめました。