【CSS】レスポンシブサイトで役立つ！フォントサイズを可変にする方法

2023年11月20日　Posted　遠藤(フロントエンドエンジニア)

レスポンシブWebデザインは、モバイルフレンドリーの観点からGoogleによって推奨され、必須になりつつあります。しかし、レスポンシブサイトでの幅やフォントサイズの指定って非常に悩ましいですよね……。

広い画面幅に合わせてフォントサイズを指定すると画面幅を縮めた際に大きすぎて変に改行してしまったり、、狭い画面幅に合わせてフォントサイズを指定すると画面幅を広げた際に小さすぎたり、、かと言って細かくメディアクエリを区切ってフォントサイズを指定するのも面倒だったり、、など、フォントサイズの指定に悩むことも多いかと思います。

そこで今回は画面幅（ビューポート）に応じてフォントサイズを可変にする方法をご紹介します。

画面幅に応じてフォントサイズを可変にする方法

vwでフォントサイズを指定

vwは、viewport width を意味します。この指定により、画面幅に応じたサイズを指定することができます。

font-size: 1.8vw;

vwの計算方法

（基準となる文字サイズ）÷（基準となる幅）× 100

で計算できます。例えば、幅が960pxの時にフォントサイズを16pxで表示させたい場合は

16 ÷ 960 × 100

となり、約1.7と算出されますので、1.7vwと指定します。

vwの計算には以下のような計算ツールを使うと便利です。pxを基準にvwに変換してくれます。

pxからvwへの変換 計算 | WEB GENERATOR

その他、SCSSなどの場合はmixinを作成して、記述を簡素にできるようにするもの便利かもしれません。

フォントサイズを可変にしつつ最小値と最大値を指定したい

vwで指定するだけだと画面幅に応じて、フォントサイズがどこまでも拡大縮小してしまいます。以下のように考えている方もいるのではないでしょうか。

widthでいいますと、max-widthやmin-widthのようにフォントサイズの最小値や最大値を指定できたら便利ですよね。残念ながらmax-font-sizeやmin-font-sizeのようなプロパティは存在しません。でも安心してください。同様のことができる指定があるのでご紹介します。

CSSのclamp関数でフォントサイズの最小値と最大値を指定できる

CSSのclamp関数というものを使用することでフォントサイズの最小値と最大値を指定できるようになります。

font-size: clamp(最小値, 基準値, 最大値);

最小値, 基準値, 最大値の3点を指定します。基準値の部分には上記で計算したvw（可変させる値）を入れてみましょう。そうすることでフォントサイズがvwを基準としながらも、最小値と最大値の間で可変になります。

font-size: clamp(16px, 1.8vw, 30px);

こちらの例ですと、基本のフォントサイズは1.8vwで計算され、16pxから30pxの間で画面幅に応じて可変になります。

対応ブラウザー

対応ブラウザーについては下記を参照ください。IE以外は基本的に対応しています。
"clamp" | Can I use... Support tables for HTML5, CSS3, etc

clamp関数の補足

CSSのclamp関数はwidthやmargin、paddingなど、フォントサイズ以外でも使うことができます。
必要に応じて使用してみてください。

まとめ

いかがでしたでしょうか。vwとclamp関数を組み合わせて使用することで、フォントサイズの最小サイズと最大サイズを維持しつつも画面幅に応じて可変にすることができます。clamp関数は、フォントサイズの指定以外にも使用することができます。レスポンシブ対応で、フォントサイズの指定に迷った際はぜひ参考にしてみてください。