ウィンドウサイズに合わせて文字サイズを可変させるCSS

ウインドウ幅の変更に追随してフォントサイズを自動で変更するCSSの書き方のパターンをご紹介します。

コードの解説

font-size: clamp(12px, calc(100vw * 18 / 375), 36px);

上記コードは最小値：12px、推奨値：18px、最大値：36pxで設定されています。

ウィンドウ幅375pxに合わせると18px、そこからウインドウを広げていくと徐々に大きなサイズに変化し、36pxに達するとそれ以上大きくなりません。

逆にウインドウを狭めると下限を12pxとしてフォントサイズが小さくなります。

コード上はpxで指定していますが、実際の単位はvwになります。ピクセル単位で直感的にサイズを設定できつつ、ブラウザのフォントサイズ変更も効くのが良いなと思っています。

コードが長いので、推奨値の設定箇所をSassのfunction関数に置き換えてみました。

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

.text {
  font-size: clamp(12px, px-to-vw(18px), 36px);
}