レスポンシブデザインでスマホ閲覧を意識すると気になるのがフォントサイズ。
フォントサイズはpx単位で設定することが多いですが、いざ自分のサイトに設定すると、何度見直してもスマホ画面で文字が読みにくい気がして悩みます。
では検索エンジンで上位表示されているサイトは何pxに設定しているのか？
これが分かれば、少なくとも読みにくいフォントサイズではないはずです。
ということで今回、様々なジャンルの国内50サイトで独自調査しました。
スマホデザインで使うフォントサイズの目安にしていただければと思います。
関連記事
パソコンに最適なフォントサイズの調査結果はこちら。
パソコンで読みやすいフォントサイズの目安は？基準となりそうな文字サイズや行間、改行幅が知りたいので調査！
この記事の目次
スマホに最適なフォントサイズと行間
スマートフォンでの文字の読みやすさはモバイルフレンドリーに直結する内容ですが、視覚要素なので本当に見やすいフォントサイズなのか1人では迷います。
14px？15px？16px？
様々なジャンルの有名サイトでスマホ用に設定されているフォントサイズを調べればある程度の基準が決められると思い、僕が調査しました。
フォントサイズのGoogle推奨値
この手の設定に関してはGoogleの推奨値を真似するのが一番問題なさそう！
ということで調べました。
2021年現在、明確に何pxと記述されたページは見つけれませんでした。
が、16pxが推奨値とされている（いた？）ようです。
スマホ、PCと明記されていませんのでこれが両方の基準となりそうです。
また12px未満だと「テキストが小さすぎて読めません」というエラーが出ますので、フォントサイズは12px以上に設定しておくのが良いです。
視覚要素なので難しいですが、モバイルフレンドリーテストでテキストについて問題が出なければとりあえずSEO上は問題なさそうです。
国内有名サイト50件の調査結果
各項目まとめていますので、画像は見ていただかなくてOKです。
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程度。
- 基本的にパソコン用のフォントサイズ以下に設定。
一般的に文章が読みやすいといえそうな値が出ました・ｗ・
これを目安にHタグ系のフォントサイズを設定するのが良さそうです。
行間の目安（スマホ向け）
続いて行間についての調査結果です。
データにできたのは35サイトです。
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サイト分しかデータを取れませんでした。
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版の調査結果も記事上部にリンクしているので見てね・ｗ・
