PC・スマホの文字サイズとは?本文と見出しの目安を初心者向けに解説

PCで作ったデザインをスマートフォンで見たら、文字が小さすぎて読みにくかった、という経験はありませんか。

PCとスマートフォンでは画面の大きさも見る距離も違うため、同じ文字サイズでも見え方が変わります。

この記事では、PC・スマホそれぞれの本文・見出しの文字サイズの目安と、画面ごとにサイズを決めるときの考え方を初心者向けに解説します。

PC・スマホの文字サイズの基本

まずは、PCとスマートフォンで文字の見え方が変わる理由を押さえましょう。

理由が分かると、「スマホでは何を変えて、何を変えなくてよいか」が判断しやすくなります。

同じ16pxでも見え方が変わる理由

PC・スマホの文字サイズを考えるときは、画面の幅と、画面から目までの距離の2つの違いを意識します。

Webで使うpx(ピクセル)は、画面の物理的なドットの数ではなく、端末ごとに見やすく換算される論理的な単位です。

「1px=画面の点(ドット)1個」と思いがちですが、最近のスマートフォンは画面の点がとても細かく、文字を点16個分の大きさで表示すると、1mmにも満たない小ささになり、読めなくなってしまいます。そこでスマートフォンは、CSSの1pxを複数の点で表示して、人が見たときの大きさがおおむねそろうように自動で調整しています(単位の詳しい違いは文字サイズとはで解説しています)。

多くのスマートフォンでは、画面の横幅はこの単位で360〜440px程度しかなく、PCのブラウザの横幅の半分以下になることも珍しくありません。

そのため、同じ16pxの文字でも、スマートフォンでは1行に入る文字数が少なく、見出しのような大きな文字ほど折り返しが増えます。

さらに、スマートフォンは手に持って目に近い距離で見るのに対して、PCは画面から少し離れて見るため、同じサイズでも感じ方が変わります。

もう1つ大切なのが、HTMLのheadに書く「viewport(ビューポート)」の設定です。

ビューポートとは、ブラウザがページを表示する領域のことです。

この設定がないページをスマートフォンで開くと、ブラウザはPC向けの広い画面を想定して表示し、ページ全体を縮小するため、文字がとても小さくなってしまいます(MDN:ビューポートの meta タグ)。

<meta name="viewport" content="width=device-width, initial-scale=1">

上の1行は、「端末の画面幅に合わせて、等倍で表示する」という指定です。

スマートフォンの文字サイズを考える前に、まずこの設定が入っているかを確認しましょう。

スマホの本文はPCより小さくしない

スマートフォンだからといって、本文の文字サイズをPCより小さくする必要はありません。

画面が小さいぶん、つい文字も小さくしたくなりますが、手に持った画面で小さな文字を読み続けるのは負担が大きいからです。

実際、スマートフォンアプリの設計ガイドラインでも、本文の標準はAppleのiOSで17pt、Googleのマテリアルデザインで16spとされています(Apple Human Interface Guidelines:Typography(英語)、Material Design 3:Type scale(英語))。

pt(ポイント)はiPhoneなどのiOSアプリ、sp(スケール非依存ピクセル)はAndroidアプリで使われる、Webでいうpxにあたる画面用の単位です。

iOSアプリのptは、印刷やWordで使うpt(1pt=1/72インチ)とは別もので、Webのpxとほぼ同じ大きさです。spもAndroidの標準の文字設定ではWebのpxとほぼ同じ大きさで、ユーザーが端末の文字サイズ設定を変えると、それに合わせて大きさが変わります。

単位の名前は違っても、17ptも16spも、Webの本文16pxとほぼ同じ水準です。Webでもアプリでも、スマホの本文は16px前後が標準と考えて問題ありません。

スマートフォンでは、画面を手に持って読むことが多く、文字が小さすぎると読むのに疲れてしまいます。

NG:本文12px。画面が小さいと読むのがつらい

スマートフォンでは、画面を手に持って読むことが多く、文字が小さすぎると読むのに疲れてしまいます。

OK:本文16px。スマホでも無理なく読める

スマートフォンの画面幅を想定した見本(実際の端末では、さらに小さく見える場合があります)

左の見本は本文12px、右の見本は本文16pxです。

同じ画面幅でも、左は文字を目で追うのがつらく、右は無理なく読めることが分かります。

Webの本文は、PCでもスマホでも16px前後を基準にすると覚えておきましょう。

PC・スマホ別の文字サイズの目安と決め方

ここからは、画面ごとの具体的なサイズの目安と、決めるときの考え方を紹介します。

本文はほぼ同じまま、見出しの大きさで画面の違いを吸収するのが基本です。

本文・見出し・補足の文字サイズの目安

PC・スマホ別の文字サイズの目安を、役割ごとに表にまとめます。

数値は規格で決まったものではなく、多くのWebサイトで使われている範囲を参考にした出発点です。

役割	PCの目安	スマホの目安
大見出し(記事タイトルなど)	32〜40px	24〜28px
中見出し	24〜28px	20〜22px
小見出し	18〜20px	17〜18px
本文	16〜18px	16px前後
補足・注釈	14px前後	14px前後

表を見ると、本文と補足はPCとスマホでほとんど変わらず、見出しだけが大きく変わっているのが分かります。

本文は「読みやすさ」が最優先なので画面が変わっても大きさを保ち、見出しは「画面に収まるか」に合わせて調整する、という考え方です。

スマホでは見出しを一回り小さくする

スマートフォンでは、見出しの文字サイズをPCより一回り小さくするのが基本です。

画面幅が狭いため、PCと同じ大きさの見出しを使うと何行にも折り返し、肝心の本文が画面の下に押し出されてしまうからです。

デザイン講座が開講

見出しが何行にも折り返すと、本文が画面の下に押し出されてしまいます。

NG:PCと同じ32pxの見出し。短くても折り返す

デザイン講座が開講

見出しを一回り小さくすると、本文まで一画面に収まります。

OK:24pxに下げた見出し。本文との差は保っている

左の見本はPCと同じ32pxの見出しで、9文字の短いタイトルでも2行に折り返しています(画面幅によって折り返し方は変わります)。

右の見本は24pxに下げたもので、本文との差を保ちながら1行に収まり、本文をすぐに読み始められます。

ただし、見出しを小さくすると、本文との大きさの差が縮まり、見出しが目立ちにくくなります。本文に対する見出しの大きさの比率を「ジャンプ率」といい、差が大きいほどメリハリがつきます。

ジャンプ率が小さくなりすぎるときは、見出しの文字を太くしたり(文字の太さを「ウェイト」といい、CSSではfont-weightで指定します)、見出しの上の余白を広めに取ったりして差を補うと、どこが見出しかがひと目で分かり、情報の階層が崩れません。

CSSで画面ごとに文字サイズを切り替える

Webサイトでは、CSSの「メディアクエリ」を使うと、画面幅に応じて文字サイズを切り替えられます。

メディアクエリとは、「画面幅が○px以上のときだけ、このスタイルを使う」といった条件付きの指定ができる仕組みです(MDN:メディアクエリーの使用)。

次のコードは、スマートフォンを基本にして、画面が広いときだけ見出しを大きくする例です。

コードの中のrem(レム)は、ページの基準の文字サイズの「何倍か」を表す単位です。多くのブラウザの初期設定では基準が16pxなので、1rem=16px、1.5rem=24px(16pxの1.5倍)、2.25rem=36px(16pxの2.25倍)になります。pxではなくremで指定しておくと、ユーザーがブラウザの設定で文字を大きくしたときに、ページの文字もそれに合わせて大きくなります(remについては文字サイズとはで詳しく解説しています)。

/* スマートフォン(基本のスタイル) */
h1 { font-size: 1.5rem; }   /* 24px相当 */
body { font-size: 1rem; }   /* 16px相当 */

/* 画面幅が768px以上のとき(タブレット・PC) */
@media (min-width: 768px) {
  h1 { font-size: 2.25rem; } /* 36px相当 */
}

この例では、本文はどの画面でも16px相当のまま、大見出しだけがスマートフォンで24px、画面幅768px以上で36pxに切り替わります。

min-width: 768pxの「min」は「最小」という意味で、「画面幅が少なくとも768pxはあるとき」、つまり768px以上の広い画面のときだけ中の指定が使われます。以上か以下かで迷いやすいところですが、反対に「768px以下のとき」と指定したい場合はmax-width(最大)を使います。

768pxという切り替えの境目は決まった値ではないので、自分のデザインが崩れ始める幅に合わせて決めましょう。

画面幅に合わせて見出しをなめらかに変える方法(clamp())は、レスポンシブタイポグラフィとはで解説しています。

実践のポイント

PC・スマホの文字サイズを決めるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

PCのデザインツールの画面だけで判断して、実際のスマートフォンで見ると文字が小さすぎることに気づかない、という失敗はよくあります。
ブラウザの開発者ツールで画面幅を切り替えて確認できますが、これはあくまで近似なので、最後は実機で確かめましょう(Chrome DevTools:Device Mode)。
PCのChromeなら、ページ上で右クリックして「検証」を選ぶ(またはF12キー、Macならcommand+option+I)と開発者ツールが開き、Ctrl+Shift+M(Macならcommand+shift+M)でスマートフォンの画面幅に切り替えられます。
実機では、公開済みのページなら自分のスマートフォンのブラウザでURLを開くだけで確認できます。公開前のページは、WordPressならスマートフォンでもログインしてプレビューを開くと確認できます。
PC用に作ったデザインを、そのまま全体の比率で縮小してスマートフォン用にしてしまうことがあります。
この方法だと本文まで小さくなるので、本文は保ったまま見出しや余白を調整しましょう。
viewportの設定が抜けていて、スマートフォンでページ全体が縮小表示されていることがあります。
文字が想定より小さいときは、まずHTMLの設定を確認しましょう。
補足や注釈を、スマートフォンでさらに小さくしてしまうことがあります。
小さな画面では小さい文字ほど読みにくくなるので、補足もPCと同じ大きさを保ちましょう。

よくある質問

Q. スマホの本文を14pxにしてもいい?
A. 文字が詰まったデザインでは14pxが選ばれることもありますが、長い文章を読ませる本文には小さめです。
迷ったら16pxを基準にし、どうしても小さくする場合は実機で読みやすさを確認しましょう。
Q. タブレットの文字サイズはどう考えればいい?
A. タブレットは画面幅がPCとスマホの中間なので、本文は16px前後のまま、見出しを中間の大きさにするのが考えやすい方法です。
縦向きと横向きで画面幅が変わる点にも注意しましょう。
Q. PCの本文を18pxにするのは大きすぎる?
A. 大きすぎることはなく、文章をじっくり読ませるサイトでは、PCの本文を17〜18px程度にする例もあります。
ただし1行の文字数が減るので、行の長さとのバランスも確認しましょう。