レスポンシブルにフォントサイズを変更し、最小サイズ・最大サイズを指定する方法

2022-04-14 : 最近は clamp() という便利な CSS 関数があるので、ページ幅などをメディアクエリで細かく指定したい場合を除けば clamp() 関数で実装するのが楽です。

最近、ViewPort の幅 (vw) を使用してレスポンシブルなフォントサイズ指定をしているサイトをよく見かける。vw を使った文字サイズの動的な拡大・縮小は少々難儀で、上手く調整してやらないと文字サイズが小さくなりすぎたり大きくなりすぎたりしてしまう。

そんな中、今回は以下のような仕様のページを作ってみる。

3つ目が難しく、適当に vw を利用してフォントサイズを指定すると、メディアクエリの閾値のところで急にフォントサイズが変わってしまい、違和感が出る。

色々調べていたら良いやり方を見つけたので共有する。

目次

デモ

先にデモ。

コチラのデモページを開き、ウィンドウ幅を 860px あたりから 1280px あたりまで大きくしたり小さくしたりしてみてほしい。フォントが流動的に拡大・縮小され、メディアクエリの「繋ぎ目」っぽさがない仕上がりだ。

ちなみに当方環境だと、Windows Firefox のみ、若干小さめに計算されてしまった。Chrome・Edge・IE11 では問題なし。

実装方法

それでは実装方法を紹介する。

まずは最小フォントサイズと最大フォントサイズを指定する。最小フォントサイズの 16px は、ココ最近のブラウザのデフォルトサイズから取った。最近は 100% = 16px = 12pt = 1rem らしい。

/* 最小フォントサイズ : 16px */
html {
  font-size: 16px;
}

/* 最大フォントサイズ : 幅 1280px 以上は 24px */
@media (min-width: 1280px) {
  html {
    font-size: 24px;
  }
}

次に、最小サイズから最大サイズに拡大し始めるポイントを決める。今回はウィンドウ幅が 860px になったら拡大を開始し、1280px に達したところでフォントサイズが 24px になるようにする。

/* 最小フォントサイズ : 16px */
html {
  font-size: 16px;
}

/* 
 * レスポンシブフォントサイズ
 * ウィンドウ幅 860px から 1280px まで、
 * フォントサイズが 16px から 24px に流動的に変化する
 */
@media (min-width: 860px) {
  html {
    font-size: /* TODO */ ;
  }
}

/* 最大フォントサイズ : 幅 1280px 以上は 24px */
@media (min-width: 1280px) {
  html {
    font-size: 24px;
  }
}

それではいよいよ、レスポンシブルにフォントサイズを変化させるための計算式を紹介する。計算式は以下のとおり。

font-size : calc(1rem + ((1vw - XX) * YY)) ;
/* 
 * - XX : ViewPort の最小幅 / 100 (単位 : px)
 * - YY : 100 * フォントサイズの差 / ViewPort 幅の差 (単位 : なし)
 */

XX と YY にあたる数値を計算する必要がある。

今回の例でいくと、XX は次のように計算する。「ViewPort の最小幅」、つまりフォントサイズを動的に変え始める最小サイズは 860px 指定したので、860px / 100 で 8.6px となる。

続いて YY だが、コチラは「フォントサイズの差」が 24px - 16px = 8px、「ViewPort 幅の差」が 1280px - 860px = 420px となる。100 * 8(px) / 420(px) で 1.90476... となる。四捨五入して 1.9048 という数値を使うことにしよう。

こうして導いた値を利用すると、以下のようになる。

/* 最小フォントサイズ : 16px */
html {
  font-size: 16px;
}

/* 
 * レスポンシブフォントサイズ
 * ウィンドウ幅 860px から 1280px まで、
 * フォントサイズが 16px から 24px に流動的に変化する
 */
@media (min-width: 860px) {
  html {
    font-size: calc(1rem + ((1vw - 8.6px) * 1.9048));
  }
}

/* 最大フォントサイズ : 幅 1280px 以上は 24px */
@media (min-width: 1280px) {
  html {
    font-size: 24px;
  }
}

コレでできあがり。メディアクエリで分断される感じがなくなって良い。

参考文献

今回紹介した計算式は以下のサイトで紹介されていた。以下のサイトはジェネレータも公開しているので利用してみてほしい。