CSSでフォントサイズを動的に調整！max-font-size、min-font-sizeの設定方法

ウェブデザインでは、文字の読みやすさがユーザー体験を大きく左右します。特にレスポンシブデザインでは、デバイスの画面サイズに合わせてフォントサイズを柔軟に調整することが求められます。

しかし、フォントサイズには max-font-size や min-font-size といったCSSのプロパティがありません。

そんなときに役立つのが、CSSのclamp(), min(), max()関数です。これらの関数を使えば、フォントサイズの最小値・最大値を簡単に指定でき、画面幅に応じた文字サイズを自動で調整できます。

この記事では、以下の内容を詳しく解説します。

これを読むだけで、フォントサイズの調整に関する悩みが解決します！初心者から上級者まで、今すぐ使えるテクニックを学んでいきましょう。

CSSでフォントサイズの最大値・最小値を指定する方法とは？

画面サイズが異なるデバイスに対応するには、フォントサイズを柔軟に設定することが不可欠です。CSSでは、次の3つの関数を使うことで、フォントサイズを動的に制御できます。

以下で、それぞれの具体的な使い方と実例を詳しく解説します。

clamp()関数は、フォントサイズを以下のように制御します。

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

以下のコードでは、フォントサイズが16px～24pxの間で、画面幅に応じて変化します。

 p { font-size: clamp(16px, 2vw, 24px); }

このコードの動作は以下の通りです。

min()関数は、複数の値を比較して最小値を選択する関数です。
例えば、フォントサイズを「画面幅の2%」または「20px」のどちらか小さい方に制限したい場合、次のように記述します。

font-size: min(値1, 値2, ...);

 p { font-size: min(2vw, 20px); }

このコードの動作は以下の通りです。

max()関数は、複数の値を比較して最大値を選択する関数です。
例えば、フォントサイズを「画面幅の1%」または「12px」のうち大きい方に制限したい場合、次のように記述します。

font-size: max(値1, 値2, ...);

 p { font-size: max(1vw, 12px); }

このコードの動作は以下の通りです。

次のコード例では、複雑な条件を設定してフォントサイズを調整しています。

 p { font-size: clamp(16px, 3vw, 24px); }

また、min() と max() を組み合わせてより柔軟に指定することも可能です。

 /* 最大24pxで、画面幅の2%以下にならない */ 
p { font-size: min(24px, max(2vw, 16px)); }

このコードの動作は以下の通りです。

用途に応じて、clamp()関数とmin(), max()関数を使い分けましょう。

clamp()	min() / max()
最小値・推奨値・最大値を同時に指定できる。	単純に最小値または最大値だけを制御したい場合に適している。
コードが簡潔で、複数の条件を一度に記述可能。	他のプロパティ（幅や高さなど）にも柔軟に使える。