今までフォントはブレイクポイントで書き換えていた人が多いと思いますが。
CLAMPを使えばそんな手間は無くなります。
自動でfontのサイズを計算して表示してくれるclamp.。
IE対応がなくなった今、使いまくってください。
font-sizeの中に書く
最小サイズ、推奨サイズ、最大サイズで書く
font-size: clamp(1.5rem, 1.436rem + 0.14vw, 1.6rem);
これだけです！中の数字は、最小サイズ、推奨サイズ、最大サイズなので
(スマホ、vw1280pxあたり、それ以上)っていう考え方で触ってます！
これで設定するだけで、レスポンシブでフォントサイズが変わっていきます！
めちゃくちゃ便利ですねー！
真ん中が、足し算になっているのはジェネレーターを使っているからですね。
次はジェネレーターの紹介。
ジェネレーターMin-Max-Value Interpolation
画面幅とフォントサイズを指定する
使用の要件に合わせて、最大最小の画面幅と、文字サイズの最大最小画面幅を指定してジェネレートするとclampの数値を出してくれます。
おすすめ設定は最小767ー最大1920が綺麗かと思います。
微調整はmediaクエリ書いたらできるので、ざっくり用に入れるだけでもかなり手間は省けます。
コーディング案件の場合スマホデザインがない場合もあるので、スマホ時の目星もつけやすいと思います。
ブックマークにいれよう！
Min-Max-Value Interpolation
まとめ
ざっくり設定はclampで細かい設定はmediaクエリを使いましょう！