はてなブログ：フォントサイズを動的に変化させる min(), max(), clamp()

そろそろこのサイトのデザインを変えようかと思い始めての tips チップス（２）。

フォントサイズをビューポート（表示幅）に応じて自動で変化させます。

• 表示幅によってフォントサイズを可変にする
• 最大フォントサイズにする表示幅をコンテンツ表示幅にする
• CSS関数 min(), max() を使う
• CSS関数 clamp() で完成
• ブラウザ対応

表示幅によってフォントサイズを可変にする

例として下の画像のタイトルを表示幅に応じて拡大させます。

Chrome のデベロッパーツールを使っています。

表示幅 320px の場合のフォントサイズを 30px としてスタートし、最大フォントサイズを 50px にまで拡大します。CSS の単位 vw を使いますのでフォントを最大にする表示幅を決める必要があります。1920px としてみます。

#title{
  font-size: calc(30px + ((1vw - 3.2px) * 1.25));
}

確かに表示幅を 1920px にしてみますとフォントサイズは 50px になっています。

計算式の書式は、

font-size: calc ( 最小フォントサイズ + ( ( 1vw – 最小表示幅 / 100 ) * ( 最大フォントサイズ – 最小フォントサイズ ) / ( 最大表示幅 – 最小表示幅 ) * 100 ) );

こうなります。

最大フォントサイズにする表示幅をコンテンツ表示幅にする

これでフォントサイズを可変にすることはできましたが、これですとコンテンツ表示幅に最大値を設定している場合にはコンテツ表示幅が固定されてからもタイトルだけ大きくなってしまいます。上の場合ですと表示幅 1000px の時のフォントサイズは 38px です。

これを解消するにはフォントサイズを最大にする表示幅をコンテンツ表示の最大値に設定すればいいはずです。例としてコンテンツ表示最大幅を 1000px でやってみます。

( 50 – 30 ) / ( 1000 – 320 ) * 100 = 2.94117647059

ですので、

#title{
  font-size: calc(30px + ((1vw - 3.2px) * 2.9412));
}

でやってみます。

1000px で 50px のフォントになっています。

ただしこれですと最初のケースの拡大比率を大きくしているだけですので 1000px を越えれば同じようにフォントサイズも大きくなっていきます。

こういうことですね。フォントサイズが 77px になっています。

CSS関数 min(), max() を使う

これを解消するためには CSSの関数を使います。よく使う calc() も CSS関数です。

• min() – CSS: カスケーディングスタイルシート | MDN
• max() – CSS: カスケーディングスタイルシート | MDN

min() と max() は複数の値（式）を設定でき、min() はその中から最小値を取り出し、max() は最大値を取り出します。つまり、min() は最大値を決める場合、max() は最小値を決める場合に使います。

ですので、今回の場合は、

#title{
  font-size: min( 50px, calc(30px + ((1vw - 3.2px) * 2.9412)));
}

となり、表示幅が 1000px でフォントサイズは 50px となり、そこでとまり 1920px でも 50px で表示されます。

なお、Sass でコンパイルする場合は、unquote() 関数を使って

#title{
  font-size: unquote( 'min( 50px, calc(30px + ((1vw - 3.2px) * 2.9412)))' );
}

としないと、Error: "calc(30px + ((1vw - 3.2px) * 2.9412))" is not a number formin’` とエラーになります。

CSS関数 clamp() で完成

• clamp() – CSS: カスケーディングスタイルシート | MDN

clamp() は CSS の関数で、値を上限と下限の間に制限します。 clamp() によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。
clamp(MIN, VAL, MAX) は max(MIN, min(VAL, MAX)) と同等です。

VAL が MIN と MAX の間の値であれば VAL の値が使われるということですので、

#title{
  font-size: clamp( 30px, calc( 30px + (( 1vw - 3.2px ) * 2.9412 )), 50px );
}

これでフォントサイズは表示幅に応じて 30px と 50px の間で自動的に変化します。

なお、clamp() の場合は Sass でもエラーにならないようです。

ブラウザ対応

• Can I use… Support tables for HTML5, CSS3, etc

もう IE は捨ててもいいでしょう。