Webサイトの段落(pタグ)の推奨文字サイズが変わってきている?HTMLとCSSの勉強

Webサイトを作っていると文字サイズ一つでも何ピクセルにしようかなと悩み時間を使ってしまいます。

段落の文字サイズは16px以上が推奨

段落の文字サイズは昨今の技術の進歩により、最低でも16px以上が読みやすいと言われています。

最低でも16px以上なので18pxでも20pxでも問題ないですが16pxを下回る値 (15pxなど)を指定するのは避けましょう。

Webサイトでは主に16pxがデフォルトとして使用されていますが、画面サイズの拡大に伴い、長く運用する予定のサイトでは18pxなど大きめのサイズも検討してもいいかもしれません。

海外のサイトではフォントにもよりますが、18pxや21pxなどの16px以上の値をpタグに指定しているWebサイトを見かけることが多くなってきました。
(単純にPCを買い替えて1920*1080画質でWebサイトを表示することが増えたからなだけかもしれませんが)

10年くらい前は12pxとか指定してたので、時代とともに指定する文字サイズは大きくなっているのは間違いないようです。

注釈などの文字

また注釈などで使用される段落より少し小さい文字は、段落で使用する文字サイズから2pxほどサイズダウンすることが望ましいとされています。

スマートフォン表示で文字サイズは変える?

スマートフォンでも変わらず、16pxを下回ると読みづらいという見解が多いですが、Webサイトの文字サイズを16pxに指定している場合は14pxくらいまでを今のところ許容しているようです。

スマートフォンでは小さければ簡単に大きく表示できる分そこまでシビアではなさそうです。

おわり

最近いろいろな記事を読み漁っていたらこのサイト読みづらいなと感じたサイトがあり文字サイズを確認したところ1.5rem(15px)が指定されていました。試しに1.6remで指定すると1.5remに比べて読みやすいのが一目瞭然でした。なんで読みづらいんだろうと最初は気づかなかったけれど文字サイズ一つで印象がこうも変わるのかとデザインの奥深さを感じました。

参考元

The Responsive Website Font Size Guidelines

Minimum font size for mobile view

HTML / CSS

Posted by Nakamoto