中小企業のIT化を「ワンストップ」支援

VW（ビューポート幅）を使ったfont-size指定は、画面の幅に応じてフォントサイズが変わるので、レスポンシブデザインには役立ちます。但しvwだけで指定すると極端に小さくなったり、大きくなったりと読みずらいサイトになる場合もあるため注意が必要です。その際にはclamp()を使うことで最小フォントや最大フォントが指定できます。
参考：
body {
font-size:5vw;
}
上記ケースでは　
画面幅が1000pxの場合、フォントサイズは50px
画面幅が320pxの場合、フォントサイズは16px
となります。
この場合も問題点は
小さい画面ではフォントが小さくなりすぎて読めないことがある。
大きい画面ではフォントが大きすぎてバランスが崩れることがある。

clamp()を使った調整例
clamp()を使うとフォントサイズの最小値と最大値の設定が可能になります。

clamp()の挙動：

• 最小値 (16px)：小さい画面でフォントが小さくなりすぎるのを防ぎます。
• 最大値 (32px)：大きい画面でフォントが大きくなりすぎるのを防ぎます。
• 推奨値 (5vw)：画面幅に応じてフォントサイズを調整します。

実用的なポイント

1. clamp()を優先的に使う： vwだけでは極端なサイズ変化が起きやすいので、clamp()で制御すると安心です。
2. ブラウザ対応： clamp()は主要なモダンブラウザでサポートされています（IEは非対応）。
3. 適切なテスト： 小さいスマートフォンから大きなディスプレイまで、フォントサイズの見え方を確認しましょう。

総括

vwでのフォントサイズ指定は、レスポンシブデザインには便利ですが、そのまま使うと使いにくい場合があります。実際のプロジェクトでは、clamp()を活用して柔軟に対応するのがおすすめです。