今回はビューポートのサイズに比例してフォントサイズを変化できるclamp関数、clamp calculatorについて紹介したい。
レスポンシブデザインに対応するにはメディアクエリを用いて、ビューポートのサイズごとにフォントサイズを指定していくが、 clamp関数を使うことでフォントサイズをビューポートサイズに従ったサイズにすることができる。
さらに以下のclump calculatorを使うと 最小フォントサイズ、最大フォントサイズ、最小ビューポート、最大ビューポートの４つを指定すると、ビューポートサイズに比例して最大と最小フォントサイズの中間サイズを生成するclamp関数のコードを出力する。これをコピーしてcssのフォントサイズに貼り付ければよい。
例えば最小フォントサイズ18、最大フォントサイズ48、最小ビューポート365、最大ビューポート1500,ルートフォントサイズ16とすると、
font-size:clamp(1.125rem, 0.522rem + 2.643vw, 3rem);
以下CodePenでは比較のためフォントサイズを24pxに固定した文章と比較できるようにした。
