Fluid Typography の作り方（CSS clamp と rem+vw でのアクセシブル実装）

CSS レスポンシブ フロントエンド UI タイポグラフィ

モバイルからデスクトップ画面にかけて、メディアクエリ（@media）を書かずにフォントサイズを無段階に伸縮させる Fluid Typography（流体タイポグラフィ） の CSS clamp() による実装手法です。

1. オンライン Fluid Typography（clamp）計算・生成ツール

モバイル（例: 375px）と PC（例: 1440px）での希望フォントサイズを指定すると、最適な clamp() の CSS コードを生成します。

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

  
 
 
   




2. CSS clamp() 関数の構文と計算の仕組み


clamp() は clamp(最小値, 推奨値, 最大値) の 3 つの引数を取ります。


h1 {
  /* 最小 32px (2rem)、最大 64px (4rem)。画面幅に応じて 4.5vw + 1rem で滑らかに変化 */
  font-size: clamp(2rem, 4.5vw + 1rem, 4rem);
}


    

  • 画面幅が狭い時: 32px 以下には小さくなりません。
    • 

  • 画面幅が広い時: 64px 以上には大きく膨らみません。
    • 

  • 中間域: ビューポート幅（vw）に応じて連続的にサイズがスケールします。
    • 





3. 重要：5vw 単体指定がアクセシビリティ違反（WCAG 失敗）になる理由


CSS で font-size: 5vw のように ビューポート単位（vw）のみで指定すると、ユーザーがブラウザの環境設定で「文字サイズ拡大（ズーム）」を行ってもフォントが一切大きくならず、WCAG (Web Content Accessibility Guidelines) 2.1 に違反します。


✅ 解決策：rem（絶対相対単位）を必ず加算する


/* ❌ ズーム機能が効かなくなる NG な書き方 */
font-size: clamp(16px, 5vw, 32px);

/* ✅ 1rem を足すことでユーザーのフォント設定ズームが反映される OK な書き方 */
font-size: clamp(1rem, 3vw + 0.5rem, 2rem);




4. 線形補間（Linear Interpolation）の厳密な計算公式


最小ビューポート W_min（例: 375px）で最小フォント V_min（例: 16px）、最大ビューポート W_max（例: 1440px）で最大フォント V_max（例: 24px）にしたい場合の計算：


Slope (傾き) = (V_max - V_min) / (W_max - W_min) = (24 - 16) / (1440 - 375) ≈ 0.00751 (0.751vw)


CSS コード: clamp(1rem, 0.751vw + 0.824rem, 1.5rem)