Fluid Typography｜CSS clamp() で滑らかな可変フォントサイズを実装する

CSS Typography clamp
結論：30秒で clamp() 可変フォントを実装する
  • 基本構文: font-size: clamp(最小サイズ, 推奨線形計算式, 最大サイズ);
  • メリット: @media ブレイクポイントの大量記述を廃止し、滑らかなフォントサイズ変化を実現
  • 生成ツール: 下の計算コンポーネントで即座に生成

1. オンライン Fluid Typography (clamp) 計算ツール

最小・最大の「画面幅」と「フォントサイズ」を入力することで、最適な clamp() 式を自動生成します。

📏 この場でFluid Typographyを計算する

  
 
 
   




2. CSS 実装コード例


見出し（H1）への可変フォント適用


/* 画面幅 375px で 24px、画面幅 1200px で 40px に滑らか変化 */
h1 {
  font-size: clamp(1.5rem, 1.94vw + 1.04rem, 2.5rem);
}


レスポンシブなルートフォント設定


:root {
  /* 本文サイズのベース可変設定 */
  --font-size-base: clamp(1rem, 0.48vw + 0.89rem, 1.25rem);
}

body {
  font-size: var(--font-size-base);
}




3. 注意点（アクセシビリティとハマりどころ）


    

  1. ブラウザズーム（拡大機能）の阻害防止

      

    • font-size: 3vw のように純粋な vw のみで指定すると、ロービジョンユーザーがブラウザで 200% 拡大しても文字が大きくなりません。clamp() の中央の値には必ず rem を加算する式（例: 1.5vw + 0.8rem）を指定してください。
      • 

    

    2. 

  2. Safari での過去の描画バグ

      

    • 古い Safari では clamp() 内に vw を使うとウィンドウリサイズ時に再計算されないバグがありましました。line-height や視覚的トリガーを適切に設定するのが安全です。
      • 

    

    3.