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

Estimated font size for smartphones_eyecatch

レスポンシブデザインでスマホ閲覧を意識すると気になるのがフォントサイズ。

フォントサイズはpx単位で設定することが多いですが、いざ自分のサイトに設定すると、何度見直してもスマホ画面で文字が読みにくい気がして悩みます。

では検索エンジンで上位表示されているサイトは何pxに設定しているのか?
これが分かれば、少なくとも読みにくいフォントサイズではないはずです。

ということで今回、様々なジャンルの国内50サイトで独自調査しました。
スマホデザインで使うフォントサイズの目安にしていただければと思います。

スマホ向けのフォントサイズの他、行間や改行幅についても調査しました。

スマホに最適なフォントサイズと行間

スマートフォンでの文字の読みやすさはモバイルフレンドリーに直結する内容ですが、視覚要素なので本当に見やすいフォントサイズなのか1人では迷います。

14px?15px?16px?
様々なジャンルの有名サイトでスマホ用に設定されているフォントサイズを調べればある程度の基準が決められると思い、僕が調査しました。

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

この手の設定に関してはGoogleの推奨値を真似するのが一番問題なさそう!
ということで調べました。

2021年現在、明確に何pxと記述されたページは見つけれませんでした。
が、16pxが推奨値とされている(いた?)ようです。
スマホ、PCと明記されていませんのでこれが両方の基準となりそうです。

また12px未満だと「テキストが小さすぎて読めません」というエラーが出ますので、フォントサイズは12px以上に設定しておくのが良いです。

視覚要素なので難しいですが、モバイルフレンドリーテストでテキストについて問題が出なければとりあえずSEO上は問題なさそうです。

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

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

スマホ用フォントサイズの調査結果_001

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

調査時、当サイトに使うつもりがなかったのでExcelに殴り書きで申し訳ないです。
(悪いことはしていないのですが、一応サイト名は伏せています…)

今回調査したサイト

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

僕なりにジャンルが偏らないようにしたつもりです。
これらの50サイトでスマホデザインでの文字サイズ、行間、改行幅を調査しました。
字体に関してはメモですので気にしないでください。

スマホデザインでのフォントサイズの目安

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

スマホ用フォントサイズ設定値(50サイト分)
最小フォントサイズ12px
最大フォントサイズ28px
平均フォントサイズ15.5px

今回調べたサイトの中で一番小さいフォントサイズ設定は12pxでした。
一番大きくフォントサイズを設定しているところで28pxでした。
50サイトのフォントサイズの平均値は15.5pxでした。

各ピクセルを設定しているサイトの数(50サイト分)
12px1サイト
13px4サイト
14px12サイト
15px6サイト
16px21サイト
17px1サイト
18px4サイト
19px~27pxなし
28px1サイト

スマホデザインで一番多く採用されているフォントサイズは16pxでした。
続いて多いのが14px、そして15px、18px,13pxと続きます。

何も設定していない場合や1remなどの設定にしているサイトでは16pxがスマホ閲覧時の標準フォントサイズとなるようです。

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

PC用とスマホ用のフォントサイズが同じ設定の所が21サイトと意外と多いです。
スマホ閲覧時にPCよりもスマホの文字サイズを小さく設定している所は21サイト。
スマホ閲覧時、PCよりも文字サイズを大きく設定している所は7サイトありました。

スマホ用フォントサイズの調査結果まとめ

・一番多いのは16px。
・スマホのフォントサイズの目安は14px~16px程度。
・基本的にパソコン用のフォントサイズ以下に設定。

一般的に文章が読みやすいといえそうな値が出ました・w・
これを目安にHタグ系のフォントサイズを設定するのが良さそうです。

行間の目安(スマホ向け)

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

スマホデザイン最適な行間_001

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

行間とは文章と文章の上下の間の余白です。
フォントサイズも大事ですが、文字のバランスを決める行間も大切なポイントです。

行間についても計算上、繰り上げ計算を行っています。
(pxの他にremやemなどを使っており、設定がバラバラの為)

スマホ用行間の設定値(height-line)
行の高さの最小値1.3em
行の高さの最大値2.25em
行の高さの平均値1.762em

1.762emが35サイトの行間の平均値になりました。

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

使用頻度が高い行間は1.8emでした。
続いて1.7em、2.0em,1.5emと続きました。

emのポイント

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

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

行間はパソコン表示の方が広くとってあったり、モバイル表示の方が広くとってあったりとサイトによってマチマチです。

スマホ用行間の調査結果まとめ

・一番人気は1.8em(29px程度)でした。
・スマホデザインの行間の目安は1.5em~2.0emあたり。

(文字サイズが16pxの場合、24px~32px程度になる。)
・パソコン、スマホ共に1.5em~2.0emあたりで設定しているサイトが多い。

改行幅の目安(スマホ向け)

最後に改行幅についての調査結果です。
改行幅(段落の高さ)については1ブロックごとに文章を固めて記述してあるサイトも多く、16サイト分しかデータを取れませんでした。

スマホデザイン最適な改行幅_001

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

改行幅とは文章の塊同士の余白です。読みやすさにはこれも大切です。

スマホ用改行幅の設定値(16サイト分)
改行幅の最小値0.5em
改行幅の最大値2.0em
改行幅の平均値1.570em

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

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

使用頻度が高かったのが2.0emでしたが、1.5em付近の値も多いです。
フォントサイズが16pxですと2.0emは32px分の余白です。
最近はテキスト間の余白は広めが主流のようです。

改行幅の関係
パソコン = スマホ1サイト
パソコン > スマホ6サイト
パソコン < スマホ9サイト

改行幅に関してはスマホデザインの方が広めにとっているところが多いことが判明。
画面サイズが小さいのに文章同士の余白は大きくとってあるということ。

確かにスマホでは文章が固まっているよりも分散していた方が読みやすいかもしれませんね。

スマホ用改行幅の調査結果まとめ

・人気なのは1.5em~2.0emあたり。
・スマホの方が改行幅を広くとっているところが多い。
・執筆中に自分で改行を入れるのかどうかによって大きく異なりそう。

スマホデザイン用フォント設定の目安

2021年、人気がある50サイトが実際に使用しているフォントサイズと行間、改行幅を調査してみた結果でした。

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

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

という結果になりました。

これを基準に見出しタグなどを設定すると文字全体のバランスが良くなりそうです。
今回は50サイトだけでしたが、もう少し調査数を増やしても似たような結果になると思われます。

皆さんのスマホ向けフォントサイズ設定の手助けになれば幸いです。
良ければPC版の調査結果も記事上部にリンクしているので見てね・w・

-SEO

© 2021 ソロ学