ホームページ制作をしていると、何気に面倒で時間を奪われるのがフォントサイズの調整です。
特に最近はスマホ〜PCまで自然にフォントサイズが可変するデザインが前提になっているため、@mediaで一つひとつサイズを変える作業が発生しがちです。
例えば、小さい画面（スマホ）では14px、中間では18px、大きい画面（PC）では24pxといった感じでブレークポイントごとに指定すると、フォントサイズだけで数十行に膨れ上がることも珍しくありません。
そんなとき、高い確率で“作業が一気に楽になる”のが font-size: clamp() です。
clamp() とは？
clamp() は 最小値・理想値・最大値 の3つを設定して、ブラウザが自動的にちょうどいい値を返してくれるCSS関数です。
font-size: clamp(最小値, 理想値, 最大値);
フォントサイズに使うことで、「ウィンドウ幅が小さいときは小さく、大きくなるにつれて自然に拡大、でも指定した最大サイズよりは大きくしない」という、まさに欲しかった挙動を１行で実現できます。
最強に便利なパターン：clamp(〇rem, 〇rem + 〇vw, 〇rem)
ホームページ制作の現場で特に役立つのが、
font-size: clamp(最小フォント, 基準フォント + 可変量vw, 最大フォント);
という書き方です。
ここで大事なのは、真ん中（理想値）に「rem + vw」の計算式を入れることです。
vw を混ぜることで画面幅に応じてフォントサイズがゆるやかに増減し、rem を足すことで「読みやすさの基準」となる土台のサイズを確保できます。
例えば次のように指定するとします。
font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);この指定は、ざっくりと次のように動きます。
- どんなに画面が小さくても、1.4remより小さくはならない（下限）
- どんなに画面が大きくても、2.2remより大きくはならない（上限）
- その中間の画面幅では、1.1rem + 1.2vw の値をベースに、画面幅に応じてなめらかに増減する
実際のフォントサイズはブラウザが
「1.1rem + 1.2vw で計算した値を、最小値 1.4rem と最大値 2.2rem の間に収める」
というルールで決めてくれるイメージです。
これだけで、スマホ〜デスクトップまで「小さすぎず・大きすぎない、ちょうどよい読みやすさ」のフォントサイズを、1行の指定だけで実現できます。
vw を使った“可変部分”の計算方法
clamp の真ん中に入れる計算式（理想値）は、
「最小フォントサイズと最大フォントサイズの差を、画面幅の差で割って求めた傾き」
を vw に変換すると綺麗に計算できます。
例
- 最小画面幅：375px
- 最大画面幅：1200px
- 最小フォント：14px
- 最大フォント：32px
まずフォントの増加量は 32 – 14 = 18px
画面幅の増加量は 1200 – 375 = 825px
1vw は 画面幅の1% → 0.01 × 画面幅
したがって、フォントの増え方を vw に変換すると
18px / 825px = 約0.0218 → 約2.18vw
しかし多くの場合、pxよりrem単位で設計するため、
14px → 0.875rem
32px → 2rem
のように変換したうえで、
font-size: clamp(0.875rem, 0.875rem + 2.18vw, 2rem);という形にできます。
実務ではここまで厳密でなくても、
“最小値 + 適度なvw”
という形でも十分自然に仕上がりますが、理論として知っておくと調整がとても楽です。
制作現場で起きていたフォントサイズだけでコードが増える問題が一瞬で解決
普段の制作だと、ウィンドウ幅に応じてフォントを調整するために
@media (min-width:〇〇px)
@media (min-width:△△px)
というコードが積み上がり、気づけばフォント指定だけで20〜30行になることも。
clamp を使うと、これが たった1行 で完結します。
さらに、
- デザインの「比率」が崩れず
- ブレークポイントの調整も不要
- 各デバイスの可読性も自動的に確保
- デザインの整合性が保たれる
- コード管理が圧倒的に楽
というメリットが盛りだくさんです。
実際の使用例
h2 {
font-size: clamp(1.2rem, 1rem + 1.5vw, 2.4rem);
}
p {
font-size: clamp(0.9rem, 0.75rem + 0.8vw, 1.4rem);
}これだけで、デスクトップでもスマホでも自然な読みやすさが保たれます。
これからのフォント指定は clamp() 一択でいい！
制作を続けていると、「細かい作業だけど毎回必ず発生するもの」がボディブローのように効いてきます。
フォントサイズ調整はまさにその代表例。
clamp() を導入するとその負担がスッと消え、デザインも実装もシンプルになり、コードの見通しまでよくなります。
これから新規案件でCSSを書くときは、ぜひ フォントサイズの標準装備 として clamp() を取り入れてみてください。間違いなく、制作効率が一段上がります。
