現在レスポンシブデザインが主流で、確かに @media メディアクエリを使って柔軟にCSSを記述することができます。しかし、font-size はどうでしょうか。常に固定サイズで、画面幅に合わせて自動的に伸縮する訳ではありません。JSを使えば、より柔軟に対応できますが、font-size のためだけにリサイズの度に再計算させるのも無駄なので、CSSでできる範囲で対応してみます。

1次関数の利用

calc() と vw 単位、そして中学で習った1次関数を使います。

最小22px最大34pxで、間は1次関数に任せます。こうすることで、メディアクエリのブレイクポイントで急激に22pxから34pxに変わることはなくなります。

1次関数部分は直線の方程式を求め、それを calc() を使って表現します。

/* 0〜574px */
body {
  font-size: 22px;
}

/* 575〜921px */
@media (min-width: 575px) {
  body {
    font-size: calc(2.877697841vw + 5.45323741425px);
  }
}

/* 922px〜 */
@media (min-width: 992px) {
  body {
    font-size: 34px;
  }
}

わかりやすいように font-size の単位に px を使っていますが、もちろん em/rem でも問題ありません。

1次関数の利用＋α

先ほどの方法は1次関数の直線の方程式を出す必要がありました。今回の方法はできる限り計算は calc() に任せるという感じで、計算部分を必要最小限にしています。

1次関数の部分を平行移動させます。傾きは平行移動前と同じです。傾きさえ計算できればあとは calc() に記述するだけです。

/* 0〜574px */
body {
  font-size: 22px;
}

/* 575〜921px */
@media (min-width: 575px) {
  body {
    font-size: calc(0.02877697841 * (100vw - 575px) + 22px);
  }
}

/* 922px〜 */
@media (min-width: 992px) {
  body {
    font-size: 34px;
  }
}

100vw 575px 22px の部分は固定値で、算出するのは 0.02877697841 の部分だけで非常に簡単に実装できます。

font-size: calc(2.877697841 * (1vw - 5.75px) + 22px);

ちなみに、ブラウザによっては小数点以下の解釈が違うので、このように書き換えるのもいいかもしれません。