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

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

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

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

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

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

スマホに最適なフォントサイズの調査結果はこちら。
スマホデザインに最適なフォントサイズは何PX？読みやすい文字サイズ、行間などの基準を探るべく50サイトを調査！

この記事の目次

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

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

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

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

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

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

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

外部リンク

参考：Responsive web design basics

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

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

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

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

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

今回調査したサイト

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

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

フォントサイズの目安（PC向け）

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

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

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

各ピクセルを設定しているサイトの数（50サイト分）
12px	1サイト
13px	なし
14px	8サイト
15px	11サイト
16px	15サイト
17px	5サイト
18px	8サイト
19px	1サイト
20px	1サイト

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

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

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

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

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

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

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

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

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

行間の目安

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

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サイトです。

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.4em	1サイト
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～18px	16px、15px、14px-18px
行間（行の高さ）	1.5em～2.0em	1.8em、1.7em、2.0em
改行幅（段落の高さ）	1.5em～2.0em	2.0em-1.6em-1.5em同順

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

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

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