Webサイトのフォントサイズ｜基準の決め方

01はじめに｜この記事でわかること

要点：この記事は、デザイン案を見て「なんとなく文字が小さい気がする」と感じたものの、どう伝えればよいかわからない方に向けたものです。基準となる数値と、その決め方の考え方を整理します。制作前の設計についてはワイヤーフレームの作り方もあわせてご覧ください。

デザイン案が届きます。全体の雰囲気は悪くありません。ただ、本文を読もうとすると、少しだけ目を細めてしまう。

この違和感を「文字が小さいです」とだけ伝えると、次の案では本文だけが大きくなり、見出しとの差が詰まった状態で戻ってきます。サイズは1か所だけ動かしても解決しません。本文・見出し・注釈・行間は、互いに影響し合っているからです。

この記事では、2000年創業のWeb制作会社ZenWeb Japanが企業サイトの制作で使っている決め方を、専門用語なしでまとめました。

まずは、サイズの考え方を全体から見ておきましょう。次の動画も参考になります。

02本文16pxが基準とされる理由

要点：16pxは、ほとんどのブラウザで初期設定になっている文字サイズです。デジタル庁のデザインシステムでも、本文とUIは16px以上を基準値と定めています。読み手が見慣れた大きさであり、拡大操作をしなくても読める下限でもあります。書体選びはWebフォントの選び方もあわせてご覧ください。

16pxという数字には、根拠が2つあります。

• ブラウザの初期値である。ChromeやSafariなどの主要なブラウザは、指定がなければ16pxで文字を表示します。読み手が日ごろ見ている大きさに合います。
• 公的な基準が示している。デジタル庁デザインシステムのタイポグラフィ定義では、本文やUIにおいて16 CSS px以上を基準値とし、14 CSS px未満の使用は原則として許容されないとされています。

注意したいのは、16pxが上限ではないことです。同じ定義でも読み物向けには17pxが用意されています。企業サイトの本文なら、16pxから18pxの範囲で選ぶのが現実的です。

03デバイス別・本文サイズの推移

要点：企業サイトの本文サイズは、この4年で1〜2px大きくなりました。2022年はパソコンで15px、スマートフォンで14pxが中心でしたが、2026年にはどちらも16px以上が標準です。16px未満のサイトは12%まで減っています。

大きくなった理由は、閲覧の中心がスマートフォンに移ったことです。手に持った画面は近くなりますが、1行に入る文字数が少ないぶん視線の移動は増えます。仕組みはレスポンシブデザインの基本で扱っています。

04日本語サイトで16pxが小さく見える理由

要点：同じ16pxでも、日本語は欧文より小さく見えます。ひらがなや漢字は正方形の枠に収められ、枠いっぱいには広がらないためです。枠に対して文字がどれだけ大きいかは書体ごとに違うので、フォントを変えると見た目の大きさも変わります。

和文フォントは、1文字ずつが「仮想ボディ」と呼ばれる正方形の枠に収められています。実際に描かれている部分は、その枠より少し内側です。一方の欧文フォントは、文字ごとに幅も高さも違い、枠をいっぱいに使います。同じ指定でも、和文は余白のぶんだけ小さく見えます。

書体を変えて「小さくなった気がする」と感じるのは、この差です。実務では次の順番で確認します。

• フォントを先に決める。サイズは書体によって見え方が変わるため、書体の確定が先です。
• 実機で本文を読む。デザインツールの画面ではなく、スマートフォンの実機で数行読んでみます。
• 必要なら1px上げる。枠に対して文字が小さい書体を選んだ場合、16pxではなく17pxが適切なことがあります。

05見出しと本文｜サイズの比率の決め方

要点：見出しは本文の1.25倍から2.25倍程度が目安です。大切なのは個別の数字ではなく、本文を1としたときの倍率を先に決めることです。倍率が決まっていれば、あとから本文を1px上げても全体のバランスは崩れません。案の見方はデザインカンプの確認もご覧ください。

表の右の列が、この記事でいちばんお伝えしたい考え方です。多くの現場では、pxの数字だけを決めて進めます。すると本文を17pxに上げた瞬間、小見出しとの差が詰まり、見出しらしさが消えます。倍率で決めておけば、本文が動いても全体が同じ比率で動きます。

06本文サイズ別・スマートフォンでの読了

要点：スマートフォンの本文サイズを14pxから16pxに上げると、ページ下部まで到達した人の割合が3割から5割へ伸びました。17pxでもう一段伸びますが、18pxではほぼ変わりません。上げれば上げるほど読まれるわけではありません。

18pxで頭打ちになるのは、1行に入る文字数が減るためです。文字は大きくなっても行数が増え、読み終えるまでのスクロールが長くなります。表示に課題が残るサイトについてはスマートフォン未対応のリスクで詳しく扱っています。

07行間・字間はフォントサイズとセットで決める

要点：文字を大きくしても、行間が狭いままでは読みやすくなりません。デジタル庁のデザインシステムは、本文の行の高さを文字サイズの1.5倍以上とし、一般的な本文では1.6〜1.7倍を目安としています。見出しは1.4倍程度に詰めます。

• 本文の行間は1.6〜1.7倍。16pxなら行の高さは26〜28px程度です。長い文章を読ませるページほど広めにします。
• 見出しの行間は1.4倍程度。文字が大きいぶん、行間は詰めたほうがひとまとまりに見えます。
• 字間は0〜2%。小さい文字ほど、わずかに広げると読みやすくなります。

文字を大きくしても読みやすくならない場合、原因は行間であることが多いです。行間を変えずに文字だけ大きくすると、行と行が近づいて読みにくくなります。文字と背景の見え方についてはWebデザインの配色の決め方もあわせてご覧ください。

08px・rem・%｜指定単位の違いと選び方

要点：pxは固定の大きさ、remはブラウザの初期設定を基準にした相対的な大きさです。ブラウザ側で文字を大きくしている人に対応したい場合はrem、見た目を厳密にそろえたい場合はpxが向きます。企業サイトでは、本文をremで組む例が増えています。

発注する側が単位を選ぶ必要はありません。ただ「ブラウザの文字サイズ設定に対応しますか」と聞いておくと、制作会社の設計方針がわかります。対応する方針なら、本文にはremが選ばれます。考え方の全体像はWebアクセシビリティ対応で扱っています。

09文字サイズを200%に拡大したときの崩れ

要点：ブラウザの表示を200%に拡大したとき、何らかの崩れが出たサイトは半数を超えました。最も多いのはグローバルナビゲーションで、文字が重なるかメニューがはみ出します。文字を大きくできても、レイアウトが耐えられなければ意味がありません。

アクセシビリティの国際的な指針は、コンテンツを200%まで拡大しても内容や機能が失われないことを求めています。デジタル庁もタイポグラフィのアクセシビリティで同じ考え方を示しています。見積りの段階で、拡大時の確認が作業に含まれるかを聞いておきましょう。

10高齢のお客様が多いサイトの考え方

要点：読者層が60代以上中心のサイトでは、本文を17〜18px、行間を1.7倍に広げるところから始めます。ただし全体を一律に大きくすると、1画面に入る情報が減ります。読ませたい本文だけを上げ、補助的な情報は据え置くのが現実的です。

• 本文だけを上げる。見出しは元の倍率のまま、本文を1〜2px上げます。全体の印象は大きく変わりません。
• 注釈は14pxを下限にする。小さくしてよい箇所でも、14px未満には下げません。
• 申し込み導線は特に大きく。電話番号や入力欄は迷いが生まれやすい箇所です。問い合わせフォームの作り方もあわせてご覧ください。

すべてを18pxにすると1画面の情報が減り、目的の場所までのスクロールが長くなります。読みやすさは、探しているものにすぐたどり着けるかでも決まります。

11公開後にフォントサイズを変えた理由

要点：公開後1年以内にフォントサイズを変えたサイトで最も多い理由は、社内から「読みにくい」という声が上がったことでした。平均すると公開の約2か月後です。制作中の確認が、パソコンの画面上だけで終わっていたケースが目立ちます。

どの理由も、公開前に実機で数行読んでいれば気づけたものです。本文の最初の3行を声に出して読んでみると、サイズの違和感はすぐにわかります。公開後の直しの扱いについては修正回数と追加費用の考え方も参考になります。

12制作会社に確認しておきたい5つの質問

要点：フォントサイズについて聞くことは5つです。本文の基準値、見出しの倍率、行間、ブラウザ設定への追従、そして拡大時の確認。この5つが決まっていれば、公開後に「読みにくい」で揉めることはほとんどありません。

1. 本文は何pxですか。16px以上か、17px以上かを最初に確認します。
2. 見出しは本文の何倍ですか。pxの数字ではなく倍率で答えが返るかを見ます。
3. 本文の行間はいくつですか。1.5倍を下回っていれば、その理由を聞きます。
4. ブラウザの文字サイズ変更に追従しますか。対応する方針かどうかを確認します。
5. 200%に拡大した確認は作業に含まれますか。見積りの範囲かどうかを確認します。

この5つは、見積りをもらう段階で聞くのがいちばん効きます。制作が始まってからだと、答え次第では設計のやり直しになるためです。複数社を比べるときの進め方は相見積りの取り方にまとめています。

13まとめ｜数字ではなく基準を決める

要点：本文は16pxから。見出しは倍率で。行間は1.6〜1.7倍。この3つを決めておけば、あとの調整は本文サイズを1か所動かすだけで済みます。見え方は書体と端末に左右されるので、必ず手元のスマートフォンで確かめてください。

Webサイトのフォントサイズは、数字を1つ決めれば終わる話ではありません。本文を起点にした基準をつくり、その基準を制作会社と共有しておくこと。それが、公開後の作り直しを避けるいちばん確実な方法です。

ZenWeb Japanのホームページ制作では、本文サイズ・倍率・行間の3点を最初の打ち合わせで決め、拡大時の確認まで含めて進めています。日本品質を適正価格で、が創業以来の考え方です。

14よくある質問

要点：フォントサイズについて、発注される方からよくいただく質問をまとめました。書体そのものの選び方はWebフォントの選び方もあわせてご覧ください。

1. Webサイトの本文フォントサイズは何pxが正解ですか？

16pxが基準です。デジタル庁のデザインシステムでも本文とUIは16px以上とされています。文章量の多いページでは17pxを選ぶこともあります。書体で見え方が変わるため、実機で確認してから決めてください。

2. スマートフォンとパソコンで文字サイズを変えるべきですか？

本文はどちらも16px以上でかまいません。変えるのは見出しです。パソコンで32pxの見出しはスマートフォンでは大きすぎるため、24px前後まで下げます。本文はそろえ、見出しだけ調整します。

3. 14pxの文字を使ってはいけませんか？

本文には使いません。フッターの補足や表の注釈など、表示領域に制約がある箇所に限って使います。デジタル庁のデザインシステムでは14px未満は原則として許容されないため、14pxを下限と考えてください。

4. 文字を大きくしたのに読みにくいままです。なぜですか？

行間が足りていない可能性が高いです。文字だけを大きくすると、行と行の間隔が相対的に狭くなります。行の高さを文字サイズの1.6〜1.7倍に設定し直すと、多くの場合は解消します。

5. 公開後にフォントサイズを変えるのは大変ですか？

変更そのものは難しくありませんが、修正回数の枠を使うか追加費用になることがあります。本文だけ変えると見出しとの比率が崩れるため、倍率を含めた見直しが必要です。制作中の確認が確実です。