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


サイト構築

スマホに最適なフォントサイズの目安_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サイト分)
12px 1サイト
13px 4サイト
14px 12サイト
15px 6サイト
16px 21サイト
17px 1サイト
18px 4サイト
19px~27px なし
28px 1サイト

スマホデザインで一番多く採用されているフォントサイズは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あたり。
  • (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.99em 1サイト
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サイトが実際に使用しているフォントサイズと行間、改行幅を調査してみた結果でした。

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

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

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

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

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

-サイト構築
-

site-logo
ありがとうございました!
良かったらシェアしてネ・w・
当サイトはピンバックを受け付けます。

© 2023 ソロ学