CSSのclamp()でフォントサイズをレスポンシブに指定する方法｜流体タイポグラフィ入門

画面サイズに応じて文字サイズを自然に変化させたい場合、CSSのclamp()関数が非常に便利です。
clamp()を使えば、メディアクエリ（@media）を使わずに、1行でレスポンシブかつ流体的なフォントサイズ指定を実現できます。

clamp()とは？フォントサイズ指定に向いている理由

clamp()は、CSSで使える関数のひとつで、次の形式で値を指定します。

• 推奨値が最小値より小さい場合：最小値を採用
• 推奨値が最大値より大きい場合：最大値を採用
• 推奨値が範囲内にある場合：推奨値を採用

これにより、画面幅に応じてフォントサイズを滑らかに変化させることができます。

基本的な指定方法

以下は、clamp()を使ったフォントサイズ指定の基本例です。

この指定では、

• 最小値：1.5rem
• 推奨値：1.430rem + 0.3vw
• 最大値：1.7rem

となり、画面幅に応じて文字サイズがなめらかに変化します。
メディアクエリを書く必要がないため、CSSをシンプルに保てる点も大きなメリットです。

各値（最小・推奨・最大）の考え方

clamp()を使う際は、次の考え方がおすすめです。

• 最小値：スマートフォンでも無理なく読めるサイズ
• 推奨値：rem + vwを組み合わせた流体サイズ
• 最大値：大画面でも大きくなりすぎない上限値

特に中央の値にvwを含めることで、画面幅に応じた自然なフォントサイズ調整を実現できます。

CSS変数を使ってフォントサイズを管理する

よく使うフォントサイズは、CSS変数としてまとめておくと管理が楽になります。

使用する側では、次のように指定できます。

この方法なら、デザイン調整が必要になった場合も、変数を修正するだけで全体に反映できます。

CSS変数については以下の記事で詳しく紹介しています。

便利なジェネレーター

clamp()の推奨値は、最小サイズ・最大サイズ・画面幅をもとにした計算式で求められます。
ただし、数値を毎回手動で計算するのは少し手間がかかります。

推奨値の指定に迷った場合は、以下のようなジェネレーターを利用すると簡単です。
https://s1-tools.netlify.app/clamp/

最小・最大フォントサイズと画面幅を入力するだけで、clamp()の指定例を自動で生成してくれます。

まとめ：clamp()でレスポンシブな文字サイズをシンプルに

clamp()を使えば、メディアクエリに頼らず、レスポンシブかつ流体的なフォントサイズ指定が可能になります。
CSS変数と組み合わせることで、実務でも扱いやすく、保守性の高いスタイル設計ができます。