【検証】スマートフォンで読み易いfont-sizeとは？
2018.03.29
フォントサイズと行間は、ユーザーにコンテンツをストレスなく読んでもらう為の重要な要素のひとつです。
PCサイトでは、読みやすさはもとより、デザインも考慮した文字の使い方が多いと感じる一方、スマホ化されているサイトでは比較的どれも同じぐらいのフォントサイズが使われている為、ここは改めてどれぐらいのフォントサイズが読みやすく、よく使われているのかを検証しました。
読みやすいフォントサイズとは？読み物系30サイトを検証
検証するにあたり、まず「読みやすい」とは？
読みやすい=多くの人が読んでいる=有名・人気サイト！
と言うことで、今回は記事を読ませる事を目的とした、ポータルサイト、バイラルメディア、キュレーションサイト、WEB系のブログなどから30サイトをピックアップしました。
検証方法は、本文と見出しのフォントサイズと行間をWhatFontというgoogleの拡張機能を使い調べます。
1番多かった文字サイズは！？検証結果
フォントサイズと行間の検証結果です。
フォントサイズの検証では、本文の文字サイズとｈ１見出しの文字サイズ(共にpx表記)を棒グラフにしています。
行間の検証ではどの行間設定が多いか、PCとスマホの本文と見出しに分け、集計しました。
この結果から以下の事がわかりました。
スマートフォンの本文文字サイズの人気は16px 、行間は1.5
文字サイズは16px、そしてその中でも行間は1.5emという設定が1番多く見られました。
yahooやbiglobeといったたくさんの人が目にするポータルサイトで使われているので、無意識に”読みやすい”と感じるフォント設定とも言えるのではないでしょか。
次に多かった設定は、文字サイズ15px、行間1.6emでした。
こちらはretripやキャリアパークなどの人気キュレーションメディアサイトに設定されています。
PCとスマートフォンでフォントサイズを変えているサイトは30サイト中13サイト!?
意外な結果が出ました。PCとスマートフォンでフォントサイズを変えているサイトは30サイト中13サイトにとどまり、残りの約3分の２のサイトでPCとスマートフォンでフォントサイズが同じという事がわかりました。
また、1番多かった本文文字サイズ16pxを指定しているサイトのおよそ半数以上はスマートフォンでも16pxのままでした。この事から、16pxはPCでもスマホでも読みやすい文字サイズという事がわかります。
スマートフォンは文字のジャンプ率が低い
検証結果の棒線の長さがジャンプ率を表していますが、
あきらかに緑の棒すなわちPC時の方がジャンプ率が高い事がわかります。
PCでは大きいジャンプ率を効果的に使う事ができますが、スマートフォンではいくら見出しであろうとも大きなフォントサイズは読みにくいので使わない方が良いですね。
検証したサイトの中では26pxが最大数値でした。
まとめ
以上、スマートフォンで読み易いfont-sizeを改めて認識する為の検証を行い、16px、行間は1.5emが多くのサイトで使われているという事がわかりました。
モバイルファーストインデックスが本格的に導入された事もあり、今後より一層スマートフォンでのデザインが重要になってくるでしょう。
次回は今回の検証結果を踏まえ、実際にレスポンシブサイトを構築する際のマークアップ方法を考察していきたいと思います！
レスポンシブでのフォントサイズについては下記の記事で解説しています。
関連
SEO対策コンテンツSEO
SEO基礎SEO対策
Google関連SEO対策
Webサイト制作Webデザイン
