みなさんはホームページを見る際、どの媒体で見ることが多いでしょうか。
昔はホームページなどはパソコン上で見るものというイメージがありましたが、スマホが普及した昨今では、わざわざパソコンを立ち上げなくても手軽にスマホで見ることができるようになったため、スマホからホームページを見るという人の数が圧倒的に増えました。
そのため近年は、最初からスマホで見ることを想定してホームページを作ることが多いのですが、パソコンとスマホは液晶画面の大きさが違うので、読みやすい文字のサイズというのが変わってきます。今回は媒体によって読みやすいおすすめの文字サイズをご紹介します。

パソコンサイズで読みやすい文字のサイズ

パソコンは画面サイズが大きいので見出しは20〜36px、本文は16〜18pxがおすすめです。
見出しは、デザインによって36pxを超えることもありますが、もし迷った時は本文の2倍ほどのサイズをh1の目安にするとh2、h3など他の見出しから本文までのサイズが決めやすくなります。
本文は16〜18pxがおすすめとご紹介しましたが、注釈文など本文より小さくしたい部分は12〜14pxに設定することがあります。ですが12px以下はかなり小さく、長い文などに使用するとかなり読みづらくなってしまうので使いどころには注意が必要です。

スマホサイズで読みやすい文字のサイズ

スマホサイズでは見出しは18〜24px、本文は14〜16pxがおすすめです。
見出しはもし迷ったときはパソコンサイズで見た時のh2、h3ほどの見出しの大きさをh1の目安にすると程よく見出しが強調できると思います。
本文は14〜16pxとパソコンサイズでも使用していたサイズか、それより少し小さいサイズで丁度よいサイズになります。パソコンで見て読みやすいサイズなら、それより液晶のサイズが小さいスマホで見た時にかなり小さく見えるのではないか、と思ってしまいますが実際に目にしてみると意外とそんなことはないのが不思議ですよね。

ブラウザで表示できる最小の文字は？

ブラウザによって表示できる文字の最小サイズは決まっており、PC版Chromeでは10pxが表示できる最小の文字サイズです。9px以下に指定した文字は全て10pxに変換されて表示されます。他のブラウザなどでは1pxまできっちり表示されるものもあるのですが、8px程の大きさになると、あまりにも小さすぎて特に漢字など画数の多い文字は潰れて見えなくなってしまいます。
世界で一番使われているブラウザがChromeのため、レイアウト崩れなどを防ぐためにも使える一番小さい文字サイズは10pxと覚えて貰ってもいいかもしれません。

ここまでホームページで読みやすい文字のサイズについてお話してきました。
もちろんご紹介したこれらの文字サイズはあくまで参考であり、場合によって読みやすいサイズというものは変わってきます。
例えば40〜50代の人がターゲットのホームページの場合は、今回ご紹介した文字数では小さく読みにくい場合もあります。そういった場合はサイズを一回り大きくするなどの柔軟な工夫も必要です。
どうやったら文字を読んでもらえるか、読みやすくなるか、としっかりと読む人のことを考えた文字サイズの設定が重要です。