パソコンで読みやすいフォントサイズの目安は?基準となりそうな文字サイズや行間、改行幅が知りたいので調査!

Estimated font size for PC_eyecatch
サイト、ブログを運営している人なら一度は迷う?フォントサイズについて。

特に文章がメインのWebページの場合、文字の読みやすさは非常に大切です。
パソコン表示用に設定するフォントサイズの基準はいくらぐらいなのか?

今回、国内の有名サイト50件で実際に設定されているfont-sizeを調査しました!
有名なサイト=アクセスがある=万人に読みやすい文字の大きさ?

PCデザインでのフォントサイズ設定の参考にしていただければと思います。

PCデザインでの文字サイズの他、行間や改行幅についても調査しました。

パソコンに最適なフォントサイズと行間

検索エンジンで上位表示されている様々なジャンルのサイト50件で実際に使用されているフォントサイズ、行間、改行幅などを調べました。

フォントの字体やサイトのデザイン、文章の書き方によって読みやすさが変わりますので、目安としてご参考下さい。
最適ではないかもしれませんが、少なくとも間違いではないはずです。

フォントサイズのGoogle推奨値

2021年現在、フォントサイズについては明記されていませんでした。

一昔前までは16pxと記述されていたらしいですが、最近はCSSも発展しており単にフォントサイズのみで読みやすい文字と決めつけることは出来ないためでしょうか。

一応、最適なテキストの説明がありますが英文が例なのであまり参考になりません…

【参考外部リンク:】
Responsive web design basics

なお、一般的なWebブラウザの標準フォントサイズは16pxとなっているようです。
小さすぎるフォントサイズ(12px未満)でなければ問題はなさそうです。

国内有名サイト50件の調査結果

各項目まとめていますので、画像は見ていただかなくても大丈夫です。

PC用フォントサイズの調査結果_001

2021年度フォントサイズの調査結果

スマホ用の設定も書き込んでいるため、別記事にも使っている画像ですみません。
サイト名は迷ったのですが、伏せました。

今回調査したサイト

・大手サイトのライティング(記事)ページ
・ショッピングサイトの商品ページ
・人気個人ブログの記事ページ
・掲示板系のサイト
・大人向けのサイト

ジャンルが偏らないように考えたつもりです。
これらの50サイトでPC表示での文字サイズ、行間、改行幅を調査しました。

フォントサイズの目安(PC向け)

計算上、小数点以下は四捨五入しました。

PC用フォントサイズ設定値(50サイト分)
最小フォントサイズ12px
最大フォントサイズ20px
平均フォントサイズ15.94px

一番小さく設定しているサイトが12px。
一番大きく設定しているサイトが20px。
50サイトの設定値の平均は15.94pxでした。

各ピクセルを設定しているサイトの数(50サイト分)
12px1サイト
13pxなし
14px8サイト
15px11サイト
16px15サイト
17px5サイト
18px8サイト
19px1サイト
20px1サイト

パソコン向けのフォントサイズ設定で一番多く採用されているサイズは16pxでした。
続いて多いのが15px、そして14px、18pxが同順でした。

スマホデザイン用に一番多く採用されていたフォントサイズも同じ16pxでした。
少し大きめの18pxをパソコン用に設定してあるのが多いと思っていたのですが、今回の調査では50サイト中8サイトと意外と少ないですね。

当サイトは18pxにしていますので、少し大きめなのかもしれません。

ただ次の項目を見ていただくと分かるのですが、フォントサイズが設定されていない場合や1remと指定している場合はブラウザのデフォルト値の16pxが使用されるのでこれが原因かな?

フォントサイズの関係
パソコン用 = スマホ用22サイト
パソコン用 > スマホ用21サイト
パソコン用 < スマホ用7サイト

パソコンとスマホのフォントサイズが同値の場合が22サイトありました。
パソコンかスマホのどちらか、または両方のフォントサイズを変更しているサイトでは「パソコン用>スマホ用」とサイズ分けされている所が多いですね。

パソコン用フォントサイズの調査結果まとめ

・一番多いのは16pxでした。
・PCデザイン用のフォントサイズの目安は14px~18px程度。
・「PC>スマホ」としているサイトも多い。

ブラウザのデフォルト値が16pxなこともあり、これが至極当然の結果なのかも。
これを目安に見出しやサイトデザインの変更を行うと良いかもしれません。

行間の目安

続いて行間についての調査結果です。
データにできたのは44サイトでした。

パソコン表示での最適な行間_001

Webページでの行間(行の高さ)

行間とは文章と文章の上下の間の余白です。

行間についてはemの方が良さそうなのでそちらで確認しましょう。
(小数点以下が増えるとややこしいので切り上げ計算しました。)

パソコン用行間の設定値(height-line)
行の高さの最小値0.5em
行の高さの最大値2.3em
行の高さの平均値1.763em

1.763emが44サイトの行間の平均値となりました。

各行間を設定しているサイトの数(44サイト分)
※細かくなるので、em台ごとに分けました。
0.5em台1サイト
0.6em~1.3em台なし
1.4em台3サイト
1.5em台1サイト
1.6em台6サイト
1.7em台9サイト
1.8em台11サイト
1.9em台3サイト
2.0em台8サイト
2.1em台なし
2.2em台1サイト
2.3em台1サイト

使用頻度が高い行間は1.8emでした。
次いで1.7em、2.0em、1.6emと続きます。

emのポイント

・1emは1文字分の長さです。
フォントサイズが16pxの場合、1.8emは28.8pxとなります。
フォントサイズが16pxの場合、2.0emは2倍の高さで32pxです。

スマホ用の設定でも1.8emが最多だったんですよねぇー
emは相対値での指定のため、1.8emに設定しておけばパソコンでもスマホでもいい感じになるということだと思われます。

行間の関係
パソコン = スマホ4サイト
パソコン > スマホ16サイト
パソコン < スマホ15サイト

行間についてはサイトごとにマチマチなのでノーコメントです。

パソコン表示用の行間の調査結果まとめ

・一番人気は1.8em。
・目安はスマホ、PCともに1.5em~2.0emあたりとなりそうです。

改行幅の目安

最後に改行幅です。
データを取れたのは22サイトでした。
サイトによって1ブロックの塊ごとに文章をまとめて記述してあるサイトがあるため22サイトです。

パソコン表示での最適な改行幅_001

Webページでの改行幅(段落の高さ)

画像の赤色の所が改行幅(段落の高さ)です。

パソコン用改行幅の設定値(22サイト分)
改行幅の最小値0.75em
改行幅の最大値2.0em
改行幅の平均値1.513em

1.513emが22サイトの改行幅の平均値になりました。

各改行幅を設定しているサイトの数(22サイト分)
※細かくなるので、em台ごとに分けました。
0.75em~0.99em台2サイト
1.0em台3サイト
1.1em~1.3em台なし
1.4em1サイト
1.5em台5サイト
1.6em台5サイト
1.7em台1サイト
1.8em~1.9em台なし
2.0em台5サイト

使用頻度が高かったのが2.0em及び1.6em、1.5emでした。

スマホ用の設定でも似たようなものでした。
パソコンでもスマホでもおおよそ1.5em~2.0emあたりが文章の読みやすい改行幅となりそうです。

パソコン用改行幅の調査結果まとめ

・人気なのは1.5em~2.0emあたり。
・スマホの方が改行幅を広くとっている所も多い。
・テキストの入れ方にも関係するのであまりあてにならないかも。

調査結果のまとめ

今回の調査を全部まとめると以下。

■読みやすいフォント設定の目安(PC表示)
項目設定値の目安使用頻度順
フォントサイズ14px~18px16px、15px、14px-18px
行間(行の高さ)1.5em~2.0em1.8em、1.7em、2.0em
改行幅(段落の高さ)1.5em~2.0em2.0em-1.6em-1.5em同順

という結果になりました。
うーんスマホ用の最適なフォントサイズと行間と改行幅について先に記述したのですが、ほとんど同じ結果になりました。。。

パソコン用の設定の方が若干各項目の設定値の幅は広い感じがします。

パソコン、モバイル共に同じ設定にしているサイトも多く、両端末で問題なく対応できる16pxが圧倒的人気のフォントサイズですね。

余談ですが若者向けの情報サイト、高齢者向けの年金に関するページが同じフォントサイズであったりと、閲覧者の年齢層とフォントサイズについてはそれほど関係性がないようです。

良かったらスマホ版の調査結果も記事上部にリンクしているのでどうぞ・w・
(目安値はほとんど同じ結果だけどw)

-SEO

© 2021 ソロ学