スマホサイトのフォント設定は何pxが一般的？読みやすい文字サイズの決め方

スマホサイトを作る時、色やレイアウトより先に決めておいた方がいいのがフォント設定です。

ここが曖昧なまま進むと、ページごとに文字サイズがばらついたり、見出しだけ妙に大きくなったりして、全体の印象がまとまりにくくなります。

特にスマホでは、画面幅が限られているぶん、文字サイズの数pxの差が見え方にかなり効きます。小さすぎると読みにくくなり、大きすぎると改行が増えて窮屈に見えます。

今回は、スマホファーストでサイトを作る時に、どのくらいの文字サイズから始めるのが一般的なのか、実務目線で整理します。

一般的な基準は16px前後。でも16pxが正解とは限らない

Web制作では、本文サイズの出発点として16px前後がよく使われます。ブラウザーの標準サイズもこの付近なので、まずはここを基準に考えるのが自然です。

ただし、16pxがどんなサイトにも最適とは限りません。

たとえば、情報量が多い記事ページなら16pxから18pxくらいでもバランスを取りやすいですが、医院サイトや店舗サイト、案内ページのように、見やすさを優先したいサイトでは18pxから20pxくらいの方がしっくりくることもあります。

つまり、16pxはあくまで基準のひとつです。大事なのは、標準サイズに合わせることよりも、そのサイトの目的に合っているかどうかです。

スマホサイトで本文を23pxにすると、読みやすさは出しやすい反面、1行に入る文字数がかなり減ります。その結果、改行が増えやすくなり、ページ全体が縦に間延びして見えることがあります。

特に、説明文やお知らせ、案内文が多いページでは、文字が大きすぎることで、かえって読みづらく感じることもあります。

そのため、本文サイズで迷ったら、まずは20px前後から試すのがおすすめです。20pxなら十分見やすさを確保しつつ、23pxほど窮屈にもなりにくく、スマホでの実用バランスを取りやすいです。

フォント設定で見落としやすいのが行間です。文字サイズだけ上げても、行間が詰まっていると読みやすくなりません。

たとえば本文を20pxにするなら、行間は1.7前後を目安にすると、かなり落ち着いて見えます。逆に行間が狭すぎると、文字の圧が強くなって読みにくくなります。

スマホはスクロールして読む前提の画面なので、横方向の余白だけでなく、縦方向の呼吸もかなり大切です。文字サイズと行間は、セットで決めるのが基本です。

サイト全体で文字サイズを管理しやすくするなら、各クラスでバラバラにpx指定するより、remを基本にする方が後から調整しやすくなります。

remはhtml要素を基準にした単位なので、見出し、本文、ボタン、注意書きなどのサイズ関係を揃えやすいのがメリットです。

たとえば、本文を20px相当にしたいなら、16px基準では1.25remです。見出しや補足文もremで揃えておけば、後で全体調整が必要になった時に修正しやすくなります。

一方で、親要素に対して少しだけ大きくしたい、小さくしたいといった局所調整ではemを使う方法もあります。

ただ、サイト全体の設計としては、まずremを軸にしておく方が管理しやすいです。

迷ったら、スマホファーストの初期設定として、次のあたりから始めると整えやすいです。

これなら、見やすさを確保しながら、情報量とのバランスも取りやすくなります。

たとえば、文字サイズや行間をまとめて管理したい場合は、次のように:rootで変数を定義しておくと、後から調整しやすくなります。

フォント設定で大事なのは、最初からすべての要素を細かく決め切ろうとしないことです。

まずは本文サイズを決める。次に行間を決める。その後で見出し、ボタン、補足文に広げていく。この順番にすると、全体がかなり整いやすくなります。

スマホサイトは、文字が主役になる場面が多いです。だからこそ、フォント設定は最後に整える飾りではなく、最初に土台として決めておく方が、結局いちばん早くまとまります。

スマホサイトの本文サイズとしてよく使われるのは16px前後ですが、見やすさを重視するサイトでは18pxから20pxくらいも十分現実的です。

本文23pxはやや大きめなので、迷ったら20px前後に落として、行間を1.7前後で合わせると、読みやすさと情報量のバランスが取りやすくなります。

また、各クラスで個別に文字サイズを指定する時は、pxを並べるよりもremを基準に設計した方が、後から調整しやすくなります。

スマホサイトの文字設定で迷ったら、まずは本文20px、行間1.7前後、このあたりを基準にスタートしてみてください。