フォントサイズ「vw」の使い方について
tasanフォントサイズの指定に「vw」というものがあります。
font-size:3vw;
こんな感じの記述の仕方ですね。
このvwは、画面幅に対する相対的なサイズ指定方法で、画面幅が小さくなればそのまま文字サイズも小さくなるというものです。
ですがこの指定・・・使いにくい！
実際これを使うと、PC画面では異様に大きくなってしまったり、スマートフォン画面では小さすぎて文字が見えづらくなってしまったりします。本文より見出しが小さくなってしまうこともあるので要注意です。
では、このvwはどのように使うのが正解なのでしょうか？
基本的にはウェブページの文章は”読みやすい”が基本になりますが、中にはデザイン性を重視するようなテキストもあるかと思います。
例えばですが、メインビジュアルに乗せるテキストなんかですね。
恰好よく見せたいのに画面幅が変わると改行してしまう・・・となるとちょっと困ってしまうのでいろいろな画面幅で一行に抑えたい、そういったケースはあるかと思います。
ウェブページには、「見せる文章」と「読ませる文章」のふたつがあるとして、vw指定は主に「見せる文章」で利用すると考えておくとよいかもしれません。
「読ませる文章」はそもそも視認性が悪くなると困ってしまうので、px指定などでどんな環境でも読みやすくすることを意識し、キャプションや見出しなどではvw指定で格好よくデザイン的に見せるという使い分けができるとよいのかなと思います。
なんにしてもユーザビリティをおいてきぼりにしてはいけないので、ユーザビリティを常に追求することは重要かと思います。
Follow me!
