ブログの最適なフォントサイズを考察する

こんにちは。プロブロガーのアキラです。

今回は、ブログの文章をもっと読みやすくするために、フォントの適切なサイズについて考えてみたよ、というお話です。

最適なフォントサイズ

いろいろネットで調べた結果、「サイトの種類にもよるが」と留保しつつ、PCとスマホともに、

16pxが最適だ

と、結論付けている記事が多かったです（※指定単位については後述）。

理由は、グーグルが読みやすいフォントとして16pxを提唱したことがあることや、ヤフーとか多くの大手ニュースサイトが採用していることが、主な理由でした。

Googleの提唱するフォントサイズは16px

引用元：モバイルフレンドリー対応_GoogleとAppleの推奨フォントは？

2014年あたりに、グーグルから「16pxが良いよ」みたいなアナウンスがあったらしいです。

ニュースサイトとブログは違う

注意点としては、16pxが最適というのは、基本的には、ヤフーといったようなニュースサイトの場合の話なんですよね。

文字サイズを決める前にどうゆうサイトなのかをはっきりさせておく必要があります。

例えばニュース系のサイトでは、大き目の文字を使用し、ブログなどのややレイアウトを重視するサイトでは、小さめの文字を使用しています。

具体的には、大体16pxあたりがニュース系で良く利用され、14pxあたりがブログなどで使用されています。

引用元：読みやすい行間と文字サイズ

ニュースサイトと個人ブログは、個人ブログのスタイルにもよりますけど、文章の並び方、文章の見た目がかなり異なります。

・改行や見出しの頻度による、文字のつまり具合
・太字、赤字、アンダーラインといった、文字装飾をするか、しないか

これらの点で、ニュースサイトとブログで、かなり異なります。

なので、とくにブログにおいては、「一概に16pxが最適とは言えない」と考えます。

考慮すべきは、文章の装飾の仕方ですね。

頻繁に文章を太字にしたり、赤字にしたりするブログでは、「16px」だと、文字がうるさくなって読みづらい場合があります。

なので、ブロガーは14pxとか15pxも考慮に入れるとよいでしょう。

フォントサイズの指定単位

フォントサイズの指定単位は、「pxじゃないほうが良い」とする意見もよく聞きます。

最近だと、「em」とか「rem」、とくに「rem」が推奨されてるようですね。

行間

フォントサイズのついでに、「行間」についても述べておきます。

行間については、読みやすさの点から、 line-heightを「1.5」から「2」の範囲内に設定することが、多くの記事で推奨されていました。

具体的には、スマホで「1.5」、PCだと「それより若干広め」に設定するのが人気のようです。

なお、「行間の指定単位」については、フォントサイズの場合（「rem」推奨）と異なり、「指定単位無し」とするのがおすすめです。

単位なし（数値のみ）←オススメ！

→ 相対的な比率を決めておくと、フォントサイズに応じて行高が決まる。line-height: 1.5のように値だけで書く。

引用元：【CSS】line-heightで行間を調整する方法：おすすめの値は？

PCとスマホでフォントサイズを変えるべきか

調べてみて驚きだったのは、PCとスマホで、フォントサイズを変えてるサイトが少数派だったことです。

PCとスマートフォンでフォントサイズを変えているサイトは30サイト中13サイト

引用元：【検証】スマートフォンで読み易いfont-sizeとは？

「スマホではフォントサイズを小さくするなど、PCとスマホで、フォントサイズを変えるのが王道」だと思っていましたが、わたしの勘違いでしたね。

PCとスマホで、フォントサイズを変えないサイトのほうが、現在では、多数派でした。

どちらも16px（相当のサイズ）にしてるサイトが多かったです。

まとめ

それでは、今回のまとめです。

ブログの最適なフォントサイズを決める場合は、

という結論になります。

迷ったら、PCスマホともに16px(=1rem)にしておけば間違いないでしょう。

補足:このブログの設定

ちなみにこのブログでは、

フォントサイズ

・スマホ　0.9375rem（※15pxに相当）
・PC　1.125rem（※18pxに相当）

行間

・スマホ　1.6（指定単位無し）
・PC　1.8（指定単位無し）

に設定しています。

理由

フォントサイズについては、スマホでは、0.9375rem（※15pxに相当）としました。これは、やや文字を小さくして、文章の一覧性を高め、スタイリッシュさを出すためです。

また、14pxまで小さくしないことで、目の悪い人にも配慮しました。

一方PCは、　1.125rem（※18pxに相当）と、やや大きめにしました。

これはブログはこれぐらい大きいほうが読みやすいという、わたしの経験則に基づくものです。イケダハヤトさんのブログも、PCだと、これぐらの大きさだったと思います。

行間については、フォントサイズとの兼ね合いで、読みやすくなるよう調整していったら、この数値に落ち着いた感じです。

行間の値については、フォントサイズによって、読みやすい行間の数値も変わってきます。

「どのフォントサイズにも妥当する適切な行間の値」といった絶対的な数値は存在しません。

ご参考まで。

フォントサイズについて参考になる記事

↑いろいろなサイトのフォントサイズを比較していて、記事も最近（2018年）に更新されたもので、分かりやすいのでオススメ。

その他、フォントサイズについて参考になった記事は、記事中で引用した以外だと、以下になります。

これらを参考にして記事を書きました。