clamp() でフォントサイズをなめらかに

clamp()で作る、なめらかな見出し

ブラウザの幅をリサイズしてみてください。見出しも本文も、指定した最小値と最大値の間でなめらかにサイズが変わります。従来はメディアクエリで「〇〇px以下はこのサイズ」と段階的に切り替えていましたが、clamp()を使うとその間をなめらかに補間してくれます。

見出し: clamp(24px, 4vw + 1rem, 48px) ／ 本文: clamp(15px, 1vw + 0.8rem, 18px)