【CSS】フォントサイズをレスポンシブ化する4つの方法

フォントサイズを画面幅に応じていい感じにレスポンシブ対応したい。

この記事では、CSSを使ってフォントサイズをレスポンシブ対応する方法を解説します。

フォントサイズをCSSでレスポンシブ対応する方法

CSSを使ってフォントサイズをレスポンシブ対応するには、主に4つの方法があります。

それぞれ解説します。

最もオーソドックスなのが、メディアクエリを使ってフォントサイズを切り替える方法です。

たとえば、「基本は20pxで画面幅が768px以上のとき40pxに変えたい」というモバイルファースト・コーディングの場合は、min-widthを使って次のように記述します。

h2 {
  font-size: 20px;
}
/*画面幅768px以上のときフォントサイズを40pxにする*/
@media screen and (min-width: 768px) {
  h2 {
    font-size: 40px;
  }
}

一方、「基本は40pxで画面幅が767px以下のときは20pxに変えたい」というデスクトップファースト・コーディングの場合は、max-widthを使います。

h2 {
  font-size: 40px;
}
/*画面幅767px以下のときフォントサイズを20pxにする*/
@media screen and (max-width: 767px) {
  h2 {
    font-size: 20px;
  }
}

このように、メディアクエリを使えば画面幅に応じてフォントサイズを切り替えできます。

しかし、状況によって複数のブレイクポイントを設定する必要があったり、画面幅によって微妙に見た目が変わってしまうなど、デメリットがあるのも事実です。

そこでフォントサイズをvwという単位でコーディングすると、レスポンシブ化の作業が一気に楽になります。

フォントサイズをpxからvw（viewport widthの略）に変えると、自動で画面幅に応じたサイズに変更してくれます。

そのため、レスポンシブ作業が楽になるだけでなく、どの画面幅で見ても同じ見た目を再現できるというメリットがあります。

たとえば、デザインカンプの画面幅が1280pxでフォントサイズが40pxの場合は「3.125vw」なので、次のように記述します。

h2 {
  font-size: 3.125vw;
}

ちなみにですが「px vw変換ジェネレーター」を使うと、計算が楽です。

しかし、vwには「どこまでも小さく（または大きく）なってしまう」という欠点があるので要注意です。

例えばフォントサイズを「2vw」とすると、画面幅375pxで「6.4px」となり、文字が小さすぎて読めなくなってしまいます。

そのため、「vwはスマホ～PC間だけ使用する」というルールを設けたり、これからご紹介するmin関数やmax関数、clamp関数と組み合わせて使用するのがおすすめです。

min関数とmax関数を使うと、フォントサイズの「上限」や「下限」を決められるので、vwを使ったレスポンシブ対応が非常に楽になります。

min関数は、フォントサイズの上限を設定することができます。

たとえば、下記のようにフォントサイズの上限を「32px」としておくと、画面幅をどれだけ広げても32pxより大きくなりません。

h2 {
  font-size: min(6.4vw, 32px);
}

min関数はフォントサイズの上限を設定できるので「モバイルファーストのコーディング向き」と言えます。

一方、サイズの下限を設定できるのがmax関数です。

たとえば、下記のようにフォントサイズの下限を「20px」としておくと、画面幅をどれだけ狭めても20pxより小さくなりません。

h2 {
  font-size: max(2.5vw, 20px);
}

下限値を設定できるため、max関数はデスクトップファーストのコーディングに向いています。

サイズの下限と上限の両方を設定できる便利なCSS関数もありまして、それがclamp関数です。

たとえば、下のように記述すると、フォントサイズは「20pxから40pxの間で可変」となります。

h2 {
  font-size: clamp(20px, 2.5vw, 40px);
}

clamp関数はサイズの上限値と下限値をまとめて決められるので、モバイルファーストとデスクトップファーストのどちらのコーディングスタイルにもマッチする自由度があります。

今回は、フォントサイズをレスポンシブ対応する方法を解説しました。

なお、今回ご紹介したmin関数とmax関数、clamp関数の各ブラウザ対応については、次のとおりです。

$Data on support for the css-math-functions feature across the major browsers from caniuse.com$