コピペで実装できるレスポンシブな可変フォントサイズ

ブラウザの表示領域 (ビューポート) に応じてフォントサイズを変化させる「流体タイポグラフィ (Fluid Typography)」とも呼ばれるレスポンシブな可変フォントサイズを簡単に実装するためのHTMLコードとCSSコードを紹介します。

流体タイポグラフィをコピペで実装

1. 次のCSSコードをCSSファイル、もしくはHTMLファイル内のstyle要素にコピペします。

[style~="--min-font-size:"][style~="--max-font-size:"] {
  --min-vw: 320;
  --max-vw: 1280;
  font-size: clamp(0.0625rem * var(--min-font-size), 100vw * ((var(--max-font-size) - var(--min-font-size)) / (var(--max-vw) - var(--min-vw))) + 0.0625rem * (var(--min-vw) * ((var(--max-font-size) - var(--min-font-size)) / (var(--max-vw) - var(--min-vw))) * -1 + var(--min-font-size)), 0.0625rem * var(--max-font-size));
}

2. HTMLファイル内の流体タイポグラフィを適用したい要素のstyle属性に、次のような設定を行います。

<span style="--min-font-size: 16; --max-font-size: 32;">流体タイポグラフィ</span>

これだけで流体タイポグラフィが実装できます。ブラウザの幅を変化させて確認してみてください。

流体タイポグラフィの実装が難しい部分

流体タイポグラフィを実装するには、

• 最小フォントサイズ
• 最大フォントサイズ
• フォントサイズが最小になるビューポートの幅
• フォントサイズが最大になるビューポートの幅

の、4つの数値が必要になります。例えば、ビューポートの幅が320pxのときフォントサイズが1rem (16px)、1280pxのとき2rem (32px) になる流体タイポグラフィのCSSコードは次のようになります。

font-size: clamp(1rem, 1.666666vw + 0.666666rem, 2rem);

このclamp関数の推奨値 (2つ目の引数の部分) を導き出すには、複雑な計算が必要で、4つの数値のうち、1つでも変更されれば、再計算する必要があります。

数値を入れるだけで推奨値を計算してくれる Min-Max-Value Interpolation のようなサイトもありますが、正直、それすらも面倒ですよね。

ならば、CSS変数に代入した4つの数値をcalc関数で計算させればいい、ということで出来たのが今回の流体タイポグラフィのコードになります。

流体タイポグラフィのコード解説

HTMLコード

スタイル属性に設定する必要があるCSS変数は、最小フォントサイズのピクセル数を設定する --min-font-size と、最大フォントサイズのピクセル数を設定する --max-font-size の2つです。

<span style="--min-font-size: 16; --max-font-size: 32;">流体タイポグラフィ</span>

単位 (px) は計算するとき邪魔になるので省きます。最終的には、これらの数値に0.0625rem (1px) が乗算されて、16は1rem、32は2remになります。

フォントサイズが最小になるビューポートの幅を設定したい場合は --min-vw、最大になるビューポートの幅を設定したい場合は --max-vw を追加で設定します。

<span style="--min-font-size: 16; --min-vw: 320; --max-font-size: 32; --max-vw: 1280;">流体タイポグラフィ</span>

CSSコード

要素のstyle属性に --min-font-size と --max-font-size が設定してある場合に適用されるコードになります。

[style~="--min-font-size:"][style~="--max-font-size:"] {
  --min-vw: 320;
  --max-vw: 1280;
  font-size: clamp(0.0625rem * var(--min-font-size), 100vw * ((var(--max-font-size) - var(--min-font-size)) / (var(--max-vw) - var(--min-vw))) + 0.0625rem * (var(--min-vw) * ((var(--max-font-size) - var(--min-font-size)) / (var(--max-vw) - var(--min-vw))) * -1 + var(--min-font-size)), 0.0625rem * var(--max-font-size));
}

HTMLコードで、ビューポートの幅の設定が必須ではない理由は、初期値として --min-vw に320、--max-vw に1280が設定してあるためです。流体タイポグラフィを適用するデザインやレイアウトに応じて、初期値を変更してください。

要となるclamp関数の部分ですが、見やすいように分割すると次のようになります。

--val-x: calc((var(--max-font-size) - var(--min-font-size)) / (var(--max-vw) - var(--min-vw)));
--val-y: calc(var(--min-vw) * var(--val-x) * -1 + var(--min-font-size));
--val: calc(100vw * var(--val-x) + 0.0625rem * var(--val-y));
--min: calc(0.0625rem * var(--min-font-size));
--max: calc(0.0625rem * var(--max-font-size));
font-size: clamp(var(--min), var(--val), var(--max));

なぜ、この計算でclamp関数の推奨値が求められるのか、正直よく分かっていませんが、こういう計算が行われています。

〆

CSSはどんどん便利になっていきますね。だけど、計算式を導き出せない頭がイタい。