スマートフォン・PCで読みやすいフォントサイズ＆行間とは？国内のメディアサイトを調べてみた。

2021.06.25

WEB

ユーザビリティ・UX・UI

過去記事「可読性の高い文章をデザインするポイント」でも紹介しましたように、webサイトに限らず文章の読みやすさを左右する要素に「フォントサイズ（文字サイズ）」「行間」があります。
フォントサイズが小さく、行間が詰まった文章は視認性や可読性が低く、ユーザにストレスを与えてしまいます。

では、webコンテンツで読みやすい文章にするためには、具体的にどれくらいのフォントサイズ・行間を設定すればよいのでしょうか？

そこで今回は、主に文章を読んでもらうことを目的とした国内のメジャーなニュースサイト・メディアサイトを調査し、スマートフォン・PCのデバイス毎に最適なフォントサイズと行間を導き出したいと思います。

INDEX

調査方法

CSSで行間を設定する際に用いるline-heightでは、文字と上下の余白を含めた行の高さを指定します。
font-size16pxのテキストに対して、上下それぞれに4pxづつ余白を設けたい場合にはline-heightに24pxを記述します。

また、絶対値となるpx（ピクセル）に対して、em（エム）は相対値となります。
例えば、font-size16pxのテキストに対してline-heightに1.5emを記述すると、行の高さがフォントサイズの1.5倍（24px）になり上下それぞれに4pxづつの余白が設けられます。

今回の調査結果をまとめると、

本文テキストのフォントサイズは、PCサイト・スマホサイトともに16pxが多い
本文テキストの行間は、PCサイト・スマホサイトともに1.6～1.8emに集中している
h1（ページタイトル）テキストのフォントサイズは、webサイトによってばらつきはあるものの、PCサイトに比べてスマホの方がフォントサイズが小さい（スマホサイトは、20～24pxに集中している）
h1（ページタイトル）テキストの行間は、PCサイト・スマホサイトともに1.3emが多い

この結果を踏まえて、筆者が推奨したい読みやすいフォントサイズ・行間をまとめました。

当ブログもこのサイズで設定されています。

ちなみに、Googleがモバイルフレンドリーテストで推奨しているフォントサイズも16pxになります。

田村奈優太事業開発部　次長: 印刷会社の営業を経て、2008年にアーティスへ入社。webディレクターとして多くの大学・病院・企業のwebサイト構築・コンサルティングに携わる。2018年より事業開発部として新規サービスの企画立案・マーケティング・UI設計・開発に従事している。
資格：Google広告認定資格・Yahoo!プロモーション広告プロフェッショナル