CSSのclamp()でレスポンシブな文字サイズを設計する

画面幅ごとに文字サイズを変えるとき、見出しごとに複数のメディアクエリを書くと、変更箇所が増えて調整の意図を追いにくくなります。CSSのclamp()は、最小値・画面幅に応じて変わる値・最大値を一つの宣言にまとめる関数です。小さな画面で文字が小さくなりすぎることと、大きな画面で見出しが必要以上に大きくなることを同時に防げます。

clamp()の三つの引数を分けて考える

clamp()はclamp(最小値, 推奨値, 最大値)の順で指定します。中央の推奨値が範囲内ならその値を使い、最小値より小さければ最小値、最大値より大きければ最大値になります。

.page-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.2;
}

この例では、画面幅に対する4vwを基準にします。ただし表示が狭いときは1.75rem未満にならず、広い画面でも3remを超えません。vwだけで指定するより、読みやすさの下限とレイアウトへの影響の上限を明示できます。

まず固定値から範囲を決める

可変式を先に作るより、現在のデザインで許容できる最小・最大の文字サイズを決める方が安全です。本文は画面幅で大きく変えず、ページタイトルや大見出しなど、幅による見え方の差が大きい要素から使い始めます。

例えば、モバイルで28px、デスクトップで48pxを許容できるなら、remへ換算して最小値と最大値を置きます。中央の式は一度で正解にする必要はありません。実際の狭い画面・中間幅・広い画面を確認し、文字の折り返しと周囲の余白を見ながら調整します。

:root {
  --size-title: clamp(1.75rem, 1rem + 2vw, 3rem);
}

h1 {
  font-size: var(--size-title);
}

役割ごとのカスタムプロパティに入れておけば、同じ見出し階層で値がばらつきません。値の命名とスコープは、CSSカスタムプロパティでテーマ値を管理する設計の考え方と合わせると整理しやすくなります。

行長と行間も同時に確認する

文字サイズだけを大きくすると、1行あたりの文字数や見出しの折り返し位置が変わります。clamp()を導入した後は、見出しが意図しない位置で3行以上になっていないか、本文とのサイズ差が大きすぎないかを確認します。

.article-body {
  max-width: 72ch;
}

.section-title {
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem);
  line-height: 1.3;
}

chによる行長の制限は、文字サイズが変化しても本文が横に広がりすぎるのを抑える一例です。ただしフォントによって文字幅は変わるため、数値を共通の正解として扱わず、採用しているフォントと実際の文章で確認してください。

clamp()だけで全ての分岐を置き換えない

clamp()は連続的に変化するサイズに向いています。一方で、ナビゲーションを縦並びへ切り替える、カードの列数を変えるといった構造の切り替えはメディアクエリで扱います。文字サイズを滑らかに変える責務と、レイアウトを切り替える責務を分けると、CSSの意図が読みやすくなります。

導入時は、対象の要素、最小値、最大値、確認する画面幅を決めます。clamp()は短い記法ですが、範囲を決めずに使うと見出しやボタンが読みにくくなることがあります。まず一つの見出し階層で試し、実際の内容量で折り返しと余白を確認してから広げるのが安全です。

関連記事

• CSSカスタムプロパティでテーマ値を管理する設計
• CSSのモダンレイアウト