要素の最大幅を指定するmax-widthのように、「フォントサイズの最大値・最小値を指定したい」という場面はよくあります。しかしCSSにはmax-font-sizeやmin-font-sizeといったプロパティは存在しません。

そんなときに使えるのが、min()関数・max()関数・clamp()関数です。レスポンシブでフォントサイズを可変させつつ、上限・下限を設けられます。結論として、上限と下限の両方を一度に指定したいならclamp()が最も便利です。

min()関数で最大値を制限する

min()は、カンマで区切った値のリストから最小の値を採用します。

font-size: min(2.5vw, 50px);

この記述では「2.5vw」と「50px」の小さい方が適用されます。基本のフォントサイズは2.5vwで画面幅に応じて可変しますが、50pxより大きくはなりません。つまり、上限を50pxに制限できます。

max()関数で最小値を制限する

max()は、カンマで区切った値のリストから最大の値を採用します。

font-size: max(2.5vw, 12px);

この記述では「2.5vw」と「12px」の大きい方が適用されます。基本のフォントサイズは2.5vwで可変しますが、12pxより小さくはなりません。つまり、下限を12pxに設定でき、小さい画面で文字が読めなくなるのを防げます。

clamp()関数で最小値と最大値の両方を指定する

clamp()は、最小値・推奨値・最大値の3つの引数を取り、最小値と最大値の範囲内で推奨値を適用します。

font-size: clamp(12px, 2.5vw, 50px);

この記述では、基本のフォントサイズは2.5vwで可変しますが、12pxより小さくはならず、50pxより大きくもなりません。上限と下限を同時に指定できるため、3つの中で最も実用的です。font-size: clamp(下限, 可変値, 上限);と覚えておくと使い回せます。

SCSSで使う場合の注意点

SCSS（Sass）環境でmin()やmax()を使うと、Sass自身の同名関数と衝突してコンパイルエラーになることがあります。その場合は、CSSの関数として明示的に扱うために工夫が必要です。

// Sassの関数と衝突する場合は unquote() で文字列として渡す
font-size: unquote("min(2.5vw, 50px)");

この書き方で、Sassに関数として解釈させず、そのままCSSとして出力できます。

まとめ

CSSにmax-font-sizeやmin-font-sizeはありませんが、min()・max()・clamp()で同じことが実現できます。特にclamp()は上限・下限を一度に指定できて便利です。max-widthを設定した要素の中のテキストに使えば、文字のはみ出しも防げるのでおすすめです。