[CSS] vwでのフォントサイズ指定のメリットとデメリット

vw は、ビューポートの幅（ブラウザの表示領域）を基準とする相対単位です。
1vw は、ビューポート幅の 1% に相当します。

vw を使うと、画面幅に応じてフォントサイズが自動で変化するのが特徴です。

メリット

• 画面幅に応じてフォントサイズが自動調整されるため、統一感のあるデザインを作りやすい
• ブラウザのズーム設定による改行位置のズレの影響を受けにくい
• 親要素のフォントサイズに依存せず、影響を受けない

デメリット

• 画面幅が極端に小さい／大きい場合、文字サイズが読みにくいほど変化してしまうことがある
• アクセシビリティの低下：ユーザーがブラウザ側の「フォントサイズ設定」を変更しても反映されない
  （例：Chrome の「設定 > デザイン > フォントサイズ」を「大」にしても変更されない）
  → そのため、視覚に障がいのあるユーザーや高齢者にとって読みづらくなる可能性がある

DEMO

デモ

おすすめの使い方

本文には使用せず、見出しや強調したい部分のみに使用するのがおすすめです。

まとめ

• vw はデザインに一体感を出せる便利な単位
• ただしアクセシビリティ面の注意点があるため、使う場面を慎重に選ぶことが重要