CSS clamp()によるレスポンシブタイポグラフィ — 流動的なフォントサイジング

clamp()による流動的タイポグラフィ

CSS clamp()を使うと、ビューポートに合わせて流動的にスケールするフォントサイズを定義でき、複数のメディアクエリブレークポイントが不要になります。

clamp()の構文

font-size: clamp(最小値, 推奨値, 最大値);

• 最小値：フォントの最小サイズ
• 推奨値：流動的な値（通常vw単位を使用）
• 最大値：フォントの最大サイズ

完全な流動的タイプスケール

:root {
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --text-2xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
}

フォントペアリングへの適用

見出しフォントにはより大きなclamp範囲を使用し（サイズ変動が最も重要）、本文テキストにはより小さな範囲を使用します（一貫性が読みやすさを助ける）。

ブラウザサポート

clamp()はすべてのモダンブラウザでサポートされています（Chrome 79+、Firefox 75+、Safari 13.1+、Edge 79+）。現在の本番使用ではポリフィルは不要です。