WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： furuhashi
カテゴリー： マークアップ >CSS

近年のWebサイトでは当たり前になってきた、レスポンシブ対応。
スマホでは小さすぎず、PCでは大きすぎない。
そんな理想の文字サイズをCSSだけで実現できるのが、「max-font-size」と「min-font-size」です。
この記事を見れば誰でも簡単にmax-font-size と min-font-sizeでレスポンシブ対応ができるようになります。

そもそも max-font-size・min-font-size とは？

min-font-size

要素のフォントサイズの「下限」を指定します。
どれだけ画面が小さくなっても、これ以下には小さくならないように固定できます。

p {
font-size: 3vw;
min-font-size: 16px;
}

上記のように設定すると、3vw で小さい画面では文字がどんどん小さくなりますが、16pxよりは小さくならないという挙動になります。

max-font-size

こちらは逆に、「上限」を指定します。
大きなモニターで文字が巨大化しすぎるのを防げます。

h1 {
font-size: 5vw;
max-font-size: 48px;
}

→ ウィンドウが広くなっても48pxを超えません。
つまり「拡大しすぎ防止」です。

実際によく使われるパターン：clamp()との組み合わせ

min-font-size / max-font-size は新しい仕様のため、現時点では対応ブラウザが限られています。
そこで現場ではより安定した clamp() 関数 がよく使われています。

h2 {
font-size: clamp(16px, 2vw, 32px);
}

この1行で…

• 最小：16px
• 推奨：2vw（画面幅に応じて変化）
• 最大：32px

という指定が可能になります。
つまり「min-font-size」と「max-font-size」をひとまとめにしたような指定です。

プロパティ	Chrome	Safari	Firefox	Edge
min-font-size	128以降○	17以降○	未対応	○
min-font-size	128以降○	17以降○	未対応	○
clamp()	○	○	○	○

SafariやChromeは対応が進んでいますが、Firefoxではまだ未対応のため、
現場では clamp() の利用が最も安全です。

実践例：レスポンシブ見出しでの使い分け

スマホ〜PCで自然に文字が伸び縮みするタイトル

.hero-title {
  font-size: clamp(20px, 4vw, 48px);
  font-weight: 700;
}

画面幅	実際のサイズ
375px	約20px
768px	約30px
1920px	48px固定

→ 小さい画面でも読みやすく、大画面では迫力が出る理想的な挙動。

注意点：単位と継承の罠

1. 単位は混在させてもOKだが、意図を持つ
   font-size: clamp(1rem, 2vw, 2.5rem);
   → 最小・最大は固定、中央は流動。
2. 親要素のフォントサイズの影響に注意
   相対単位（emやrem）を使うときは、親要素の基準値を意識しましょう。
3. メディアクエリとの重複指定は避ける
   clamp()を使うと、@media指定を減らせてコードがスッキリします。

デザイン的なメリット

• タイトルのバランスが画面幅に応じて常に最適
• レスポンシブCSSが簡潔になる
• 行間・余白もスケールしやすい
• Figmaでの可変フォント設計に近い挙動をCSSで再現可能

まとめ：今後は「clamp()＋min/max-font-size」が主流に

	メリット	対応
clamp()	安定して可変・全ブラウザ対応	◎
min/max-font-size	意図が明確・可読性高い	◯（今後主流）
メディアクエリ	細かい制御ができる	△（冗長になりやすい）

さいごに

文字のスケールを正しく制御できると、デザイン品質と可読性が格段に上がります。これからのWeb制作では「流動的な文字設計」が一般的になっていくことを考慮して、早めにclamp()＋min/max-font-sizeの使用方法を掴んでおくと、他の制作者より一歩先に出ることができます。
まだ使ったことのなかった方は、まずは試してみてください！