ウインドウサイズの変更に追随してフォントサイズを自動で変更するCSSの書き方のパターンをご紹介します。実装例は以下です。
(埋め込み表示だと分かりづらいのでCODE PEN本体ページで見てもらう方がよいかも。)

コードの解説

フォントサイズの基本となるCSSは以下です。

font-size: clamp(14px, calc(100vw * 16 / 375), 20px);

calc(100vw * 16 / 375) と書くと、viewportが375pxの場合を起点として、
フォントサイズが16px相当のvwの値に変換されます。

メリットは以下です。

• ピクセルでわかりやすく記述することができる。
• ブラウザ側はvw単位として認識するのでフォントサイズが可変するようになる。

次に、この値をclamp関数に入れます。

font-size: clamp(14px, calc(100vw * 16 / 375), 20px);

左から順に、

最小値：14px
推奨値：16px
最大値：20px

と設定されます。ウィンドウ幅375pxを起点として、推奨値のサイズで表示され、
ウインドウを狭めると下限を14pxとしてフォントサイズが小さくなります。
ウインドウを広げると上限を20pxとしてフォントサイズが大きくなります。

さらにメディアクエリを使ってブレイクポイントごとに基準サイズを変更できます。
（下記の例ではmin関数を使いました。）

@media (min-width: 768px) {
  .text {
    font-size: min(calc(100vw * 24 / 768), 32px);
  }
}

コードが長いので、calcをSassのfunction関数に置き換えてみました。

@function pv($pxSize, $bp:375px) {
  @return calc(100vw * $pxSize / $bp);
}

.text {
  font-size: clamp(14px, pv(20px), 34px);
}
@media (min-width: 768px) {
  .text {
    font-size: min(pv($pxSize:24, $bp:768px), 32px);
  }
}

ピクセル単位で直感的にサイズを設定できるのが最大のメリットだと思います！