CSSでフォントサイズの最大値・最小値を指定する方法｜clamp(), min(), max()完全解説

ウェブデザインにおいて、文字の読みやすさはユーザー体験（UX）に直結します。どれだけ美しいデザインでも、文字が小さすぎたり大きすぎたりすると、ユーザーはすぐにページから離れてしまいます。

特にスマートフォン・タブレット・PCといった異なる画面サイズに対応するレスポンシブデザインでは、フォントサイズを柔軟に調整することが欠かせません。

しかしCSSには、フォントサイズの最大値や最小値を直接指定する max-font-size や min-font-size といったプロパティは用意されていません。

そこで役立つのが、CSSの clamp() / min() / max() 関数です。これらの関数を使うことで、画面サイズに応じてフォントサイズを自動調整しながら、極端に小さくなったり大きくなりすぎたりするのを防ぐことができます。

この記事では、レスポンシブフォント設計の基本から、実務で使われるFluid Typography（流動的タイポグラフィ）までを詳しく解説します。

• レスポンシブフォント設計の基本
• clamp()関数の仕組みと使い方
• min() / max()関数の役割
• 実務で使われるFluid Typography
• clamp()の計算方法とフォントスケール設計

レスポンシブフォントサイズ設計の基本

レスポンシブデザインでは、フォントサイズを固定値だけで指定すると、デバイスごとに読みやすさが変わってしまいます。

例えば次のような問題が起こります。

• スマートフォンでは文字が小さすぎる
• 大型ディスプレイでは文字が大きすぎる
• メディアクエリが増えてCSSが複雑になる

従来は、画面幅ごとにメディアクエリを使ってフォントサイズを変更する方法が一般的でした。

p{
font-size:16px;
}

@media(min-width:768px){
p{
font-size:18px;
}
}

@media(min-width:1200px){
p{
font-size:20px;
}
}

しかしこの方法では、ブレークポイントが増えるほどCSSが複雑になります。

そこで現在のフロントエンド開発では、Fluid Typography（流動的タイポグラフィ）という考え方が広く使われています。

これは画面サイズに応じてフォントサイズを滑らかに変化させる設計方法です。

その中心となるのが clamp() です。

clamp()関数でフォントサイズを制御する

clamp()は、フォントサイズの「最小値・推奨値・最大値」を一度に指定できる関数です。

基本構文

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

基本例

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

この設定では、フォントサイズが次のように変化します。

• 画面が小さい → 16pxより小さくならない
• 画面が広い → 24pxより大きくならない
• その間は2vwを基準に変化する

つまり、メディアクエリを使わなくても、画面サイズに応じてフォントサイズが自然に変化します。

clamp()を使うメリット

• 最小値と最大値を同時に制御できる
• メディアクエリが減る
• 滑らかなフォント変化を実現できる
• CSSがシンプルになる

そのため、現在のレスポンシブデザインではフォントサイズ調整の基本はclamp()になっています。

min()関数でフォントサイズの上限を制御する

min()関数は、複数の値の中から「小さい値」を採用する関数です。

基本構文

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

使用例

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

この場合、

• 小さい画面 → 2vw
• 大きい画面 → 20px

となり、フォントサイズが20pxを超えることはありません。

つまり、min()はフォントサイズの上限を制御する場合に使われます。

max()関数でフォントサイズの下限を制御する

max()関数は、複数の値の中から「大きい値」を採用する関数です。

基本構文

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

使用例

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

この設定では

• 小さい画面 → 12px
• 広い画面 → 1vw

となり、フォントサイズは12pxより小さくなりません。

つまりmax()はフォントサイズの下限を保証する場合に使用します。

clamp()とmin()/max()の関係

実はclamp()は、min()とmax()を組み合わせたものと同じ動作をします。

例えば次のコード。

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

これは次のコードと同じ意味です。

font-size:min(24px,max(2vw,16px));

ただし可読性を考えると、現在はclamp()を使う方が一般的です。

実務で使われるFluid Typography

実務では、単純に 2vw を使うだけではフォントサイズの変化が大きすぎる場合があります。

そこでよく使われるのが、remとvwを組み合わせた設計です。

font-size:clamp(16px,1rem + 0.5vw,24px);

この書き方には次のメリットがあります。

• remで基本サイズを安定させる
• vwで画面サイズに応じた変化を追加
• clamp()で上下限を制御

この方法は海外のCSS設計でもよく使われるFluid Typographyの基本パターンです。

clamp()の計算方法（プロ向け）

実務では「適当にvwを設定する」のではなく、デザイン幅から計算してclampを作ることもあります。

例えば次の条件を考えます。

• 最小画面幅：320px
• 最大画面幅：1200px
• 最小フォント：16px
• 最大フォント：24px

このときの計算式は次のようになります。

• 差分フォント：8px
• 差分画面幅：880px

その結果、

font-size:clamp(16px,calc(16px + 8 * ((100vw - 320px) / 880)),24px);

この方法を使うと、デザインカンプ通りのレスポンシブフォントを実現できます。

フォントスケール設計

レスポンシブタイポグラフィでは、フォントサイズを個別に調整するよりも、スケールを設計した方が管理しやすくなります。

例えば次のような設計です。

用途	フォントサイズ
本文	clamp(16px,1rem + 0.4vw,18px)
小見出し	clamp(20px,1.2rem + 0.6vw,28px)
見出し	clamp(28px,2rem + 1vw,48px)

このようにフォントスケールを設計すると、サイト全体のタイポグラフィが統一されます。

clamp(), min(), max()の使い分け

関数	用途
clamp()	レスポンシブフォントの基本
min()	最大サイズ制御
max()	最小サイズ保証

一般的なWeb制作では次のように使われます。

• フォントサイズ調整 → clamp()
• レイアウト制御 → min() / max()

まとめ

レスポンシブデザインでは、フォントサイズを固定値だけで管理するとデバイスごとに読みやすさが変わってしまいます。

そこで役立つのがCSSの clamp() / min() / max() 関数です。

特にclamp()を使えば、

• フォントサイズの最小値を保証できる
• 最大値を制限できる
• 画面サイズに応じて滑らかに変化する

という理想的なレスポンシブタイポグラフィを実現できます。

現在のWeb制作では、メディアクエリだけでフォントサイズを切り替えるよりも、clamp()を使って自然にサイズを変化させる設計が主流です。

文字の読みやすさは、サイトの使いやすさやデザインの印象にも大きく影響します。ぜひこれらのCSS関数を活用して、快適なレスポンシブタイポグラフィを実装してみてください。