【2026年最新】Webデザインのフォントサイズ完全ガイド｜PC・スマホ別の最適な数値と設定方法
目次
見出し（h1〜h6）のフォントサイズ目安【早見表】
本文だけでなく、見出しのサイズ設計も可読性を大きく左右します。PC・スマホ別のおおまかな目安を早見表にまとめました。数値は絶対的な正解ではなく、本文16pxを基準にジャンプ率（見出しと本文のサイズ差）で強弱をつけるのがポイントです。
| 要素 | PC（px） | スマホ（px） | 用途 |
|---|---|---|---|
| h1 | 32〜40 | 26〜32 | ページタイトル（1ページ1つ） |
| h2 | 26〜30 | 22〜26 | 大見出し |
| h3 | 20〜24 | 18〜20 | 中見出し |
| h4 | 18〜20 | 16〜18 | 小見出し |
| 本文 | 16〜18 | 16 | 段落テキスト |
remで組むと、ルート（html）の16pxを基準に全体を一括調整できます。以下は上表をremに置き換えた実装例です。
html { font-size: 16px; }
body { font-size: 1rem; } /* 16px */
h1 { font-size: 2.25rem; } /* 36px */
h2 { font-size: 1.75rem; } /* 28px */
h3 { font-size: 1.375rem; } /* 22px */
h4 { font-size: 1.125rem; } /* 18px */
@media (max-width: 768px) {
h1 { font-size: 1.75rem; } /* 28px */
h2 { font-size: 1.5rem; } /* 24px */
h3 { font-size: 1.25rem; } /* 20px */
}本文は16pxを基準にするのが鉄則です。スマホで16pxを下回るとiOS Safariの自動ズームが働いたり、可読性が落ちたりするため、見出しは16pxより大きく、本文は16px以上を守ると失敗しにくくなります。
この記事の結論
Webデザインのフォントサイズは、可読性やUXだけでなくSEO評価やアクセシビリティにも影響する重要な要素です。PCの本文は16〜18px、スマートフォンの本文は最低14px・推奨16pxが基準で、12px未満はGoogleのモバイルフレンドリーテストで「小さすぎるテキスト」として警告される可能性があります。単位はデザインの再現性が高いpx、ルート要素を基準にサイト全体を一括調整できアクセシビリティに優れるrem、要素基準のemがあり、それぞれの特性を理解して使い分けることが大切です。
生徒ペン博士、Webデザインでフォントサイズを決めるのって難しいです…。大きすぎると読みにくいし、小さすぎると見えないし…。どうやって最適な数値を決めればいいんですか？
ペン博士よい質問じゃな。フォントサイズは可読性とデザイン性の両立が鍵じゃ。しかも、PCとスマホで見え方が全然違うから、ただpxを指定するだけでは不十分なんじゃ。今日は具体的な数値から設定手順まで、徹底的に解説するからよーく聞くのじゃぞ。
生徒ありがとうございます！ぜひお願いします！
「Webサイトのフォントサイズは何pxが正解なの？」
「スマホとPCで見え方が違うけど、どう調整すればいいの？」
「remとpx、結局どちらを使えばいいの？」
そんな疑問を抱えているWebデザイン初心者の方も多いのではないでしょうか。
フォントサイズの設定は、ユーザーの「読みやすさ」に直結するだけでなく、SEO評価やコンバージョン率にも影響する重要な要素です。適切なサイズを設定できているかどうかで、サイトの印象と成果は大きく変わります。
本記事を読むことで、以下の情報が得られます。
- PC・スマホ別の最適なフォントサイズと具体的な数値の根拠
- px・rem・emの違いと使い分けの判断基準
- デバイスやターゲットユーザーに応じたフォントサイズ調整方法
- デザイン性と可読性を両立させるタイポグラフィ設計テクニック
- 実際のCSSコードで学ぶレスポンシブ対応の手順
ユーザーに伝わる文字設計を身につけ、デザインの質と成果を高めましょう。
Webデザインでフォントサイズが重要な理由
Webサイトにおけるフォントサイズは、単なる「見た目の好み」ではありません。ユーザーエクスペリエンス（UX）・アクセシビリティ・SEOの3つの観点から、サイトの成否を大きく左右する要素です。
可読性とUXへの影響
文字が小さすぎると、ユーザーは読むのを諦めてページを離脱します。Googleのユーザビリティ調査によると、モバイルページでフォントサイズが小さすぎる場合、直帰率が大幅に上昇することが報告されています。逆に大きすぎると1行に表示される文字数が減り、読み進めるリズムが崩れます。
SEO評価への影響
Googleは「Core Web Vitals」やモバイルフレンドリー評価の中で、テキストの可読性をランキング要因として考慮しています。特にモバイル端末でのフォントサイズが12px未満の場合、Google Search Consoleで「小さすぎるテキスト」として警告が表示されることがあります。適切なフォントサイズはSEO改善にも直結するのです。
アクセシビリティへの配慮
Web Content Accessibility Guidelines（WCAG）2.1では、視覚的に読みやすいテキストの提供が推奨されています。高齢者や視覚障がいを持つユーザーにとっても読みやすいサイト設計は、より多くの人に届くコンテンツ作りの基本です。
Webデザインのフォントサイズ｜PC・スマホ別の最適な数値
「結局、何pxにすればいいの？」という疑問に対して、デバイス別・要素別に具体的な推奨数値を解説します。
PCサイト（デスクトップ）の推奨フォントサイズ
| テキスト要素 | 推奨サイズ | 備考 |
|---|---|---|
| 本文（body text） | 16px〜18px | 最も読まれる要素。16pxが業界標準 |
| h1（ページタイトル） | 32px〜48px | ページの主題を明確に示す |
| h2（大見出し） | 24px〜32px | セクション区分を明確に |
| h3（中見出し） | 18px〜24px | 本文との差を意識する |
| キャプション・注釈 | 12px〜14px | 補足情報のみ使用 |
| ナビゲーション | 14px〜16px | クリックしやすさも考慮 |
スマートフォン（モバイル）の推奨フォントサイズ
| テキスト要素 | 推奨サイズ | 備考 |
|---|---|---|
| 本文（body text） | 14px〜16px | 最低14px。Googleは16px推奨 |
| h1（ページタイトル） | 24px〜32px | PCより小さくしてバランスを取る |
| h2（大見出し） | 20px〜24px | 本文との差を保つ |
| h3（中見出し） | 16px〜20px | 本文と差をつけることが重要 |
| キャプション・注釈 | 11px〜13px | 12px未満はGoogle警告対象になることも |
| ボタンテキスト | 14px〜16px | タップ領域は44px以上を確保 |
フォントサイズの単位｜px・rem・emの違いと使い分け
フォントサイズを指定する単位には主に「px」「rem」「em」の3種類があります。それぞれの特性を理解して適切に使い分けることが、プロのWebデザイナーへの第一歩です。
px（ピクセル）
特徴：画面上の絶対的なサイズを指定します。ブラウザの基本フォントサイズ設定に影響されません。
メリット：指定した通りのサイズで表示されるため、デザインの再現性が高い。
デメリット：ユーザーがブラウザの文字サイズを変更しても反映されないため、アクセシビリティの観点では劣る場合がある。
/* pxの使用例 */
body {
font-size: 16px;
}
h1 {
font-size: 32px;
}
rem（ルートem）
特徴：HTMLのルート要素（<html>）に設定されたフォントサイズを基準とする相対単位です。ブラウザのデフォルトは16px。
メリット：ルートのフォントサイズを変更するだけで、サイト全体のフォントサイズを一括調整できる。アクセシビリティにも優れる。
デメリット：指定サイズを計算する必要があります（例：24px ＝ 1.5rem）。ただし、ルート要素に font-size: 62.5% を指定すると1rem＝10pxとなり、1.6rem＝16px のように直感的に扱えます。
/* rem の使用例（62.5%トリックで計算をラクにする） */
html {
font-size: 62.5%; /* 16px × 62.5% = 10px を基準に */
}
body {
font-size: 1.6rem; /* = 16px */
}
h1 {
font-size: 3.2rem; /* = 32px */
}em（要素基準の相対単位）
特徴：その要素自身、または親要素のフォントサイズを基準とする相対単位です。1em は基準フォントサイズと同じ大きさになります。
メリット：親要素に対して相対的に拡大・縮小できるため、ボタンやコンポーネント単位でまとめてサイズ調整したいときに便利です。
デメリット：入れ子になると倍率が掛け合わさって「emの複利問題」が起こり、意図せず文字が大きく／小さくなりがちです。
/* em は親のフォントサイズを基準にする */
.card {
font-size: 16px;
}
.card .title {
font-size: 1.5em; /* 16px × 1.5 = 24px */
}
.card .title .badge {
font-size: 0.75em; /* 24px × 0.75 = 18px（親の.titleが基準） */
}px・rem・em の違い早見表
| 単位 | 基準 | 一括調整 | アクセシビリティ | 主な用途 |
|---|---|---|---|---|
| px | 画面の絶対値 | × | △ | 枠線・細かな固定要素 |
| rem | ルート(html) | ◎ | ◎ | 本文・見出しなど全体 |
| em | その要素/親 | ○ | ○ | ボタン等コンポーネント内 |
本文や見出しの基本サイズは rem、コンポーネント内の相対調整は em、枠線など固定したい箇所は px——このように使い分けるのが現代的なベストプラクティスです。
レスポンシブ対応｜メディアクエリでPC・スマホを出し分ける
PCとスマホで最適なフォントサイズは異なります。@media（メディアクエリ）で画面幅ごとにサイズを切り替えるのが基本の実装です。
/* モバイルファースト：まずスマホ向けを書く */
body {
font-size: 16px;
line-height: 1.8;
}
h1 { font-size: 24px; }
h2 { font-size: 20px; }
/* 768px以上（タブレット・PC）で大きくする */
@media (min-width: 768px) {
body { font-size: 18px; }
h1 { font-size: 40px; }
h2 { font-size: 28px; }
}ブレークポイントは 768px（タブレット）と 1024px（PC）を目安に設定するとバランスよく対応できます。
clamp()で作る流体タイポグラフィ（fluid typography）
メディアクエリで段階的に切り替える代わりに、画面幅に応じて文字サイズをなめらかに変化させるのが「流体タイポグラフィ（fluid typography）」です。CSSの clamp() 関数1つで実現できます。
/* clamp(最小値, 推奨値, 最大値) */
h1 {
/* スマホでは28px、画面が広がるほど拡大し、最大48pxで止まる */
font-size: clamp(28px, 5vw, 48px);
}
body {
font-size: clamp(16px, 1.2vw + 14px, 18px);
}clamp(MIN, 推奨, MAX) は「推奨値を基本にしつつ、MINより小さくもMAXより大きくもしない」という指定です。vw（ビューポート幅）を混ぜることで、ブレークポイントごとの記述を減らしながら、どの画面幅でも読みやすいサイズを保てます。
最小値は必ず16px前後を確保するのがポイントです。vwだけで指定すると、狭い画面で文字が極端に小さくなり可読性・アクセシビリティを損ないます。
フォントサイズと一緒に整える「行間・字間・行長」
フォントサイズは単体で決めるものではありません。読みやすさは 行間（line-height）・字間（letter-spacing）・1行の長さ（行長） とのバランスで決まります。
| 要素 | 推奨値 | ポイント |
|---|---|---|
| 行間 line-height | 1.5〜1.8 | 本文は1.75前後が読みやすい。単位なしで指定 |
| 字間 letter-spacing | 0〜0.05em | 日本語は詰めすぎ注意。見出しは少し広げても良い |
| 1行の長さ（行長） | 全角35〜45字 | 長すぎると視線が戻りにくい。max-widthで制御 |
.article-body {
font-size: 16px;
line-height: 1.8; /* 行間は単位なしがおすすめ */
letter-spacing: 0.02em;
max-width: 40em; /* 1行が約40字で折り返す */
}特に line-height は単位なし（1.8など）で指定するのが鉄則です。px指定すると子要素で行間が崩れることがあります。
iOS Safariの自動ズームを防ぐ「フォーム16pxルール」
意外と知られていない落とし穴が、iOS Safariは入力フォームの文字が16px未満だと自動でズームするという挙動です。問い合わせフォームや検索窓でこれが起きると、レイアウトが崩れてUXを損ないます。
/* 入力欄は16px以上にしてiOSの自動ズームを防ぐ */
input,
textarea,
select {
font-size: 16px; /* 15px以下だとiOSがズームしてしまう */
}見た目の都合で小さくしたい場合でも、フォーム要素だけは16px以上を守るのが安全です。
アクセシビリティ｜ユーザーの文字サイズ設定を尊重する
ブラウザやOSには「文字を大きくする」設定があります。px で固定するとこの設定が無視されてしまうため、本文は rem など相対単位で指定することがアクセシビリティの基本です。
- 本文・見出しは
remで指定し、ユーザーの拡大設定に追従させる - コントラスト比は本文で 4.5:1 以上（WCAG AA）を確保する
min()やclamp()で下限16px前後を担保する- important でユーザースタイルを打ち消さない
WCAG 2.1では、テキストを200%まで拡大しても情報が失われないことが求められています。相対単位での設計は、より多くの人に届くサイトづくりの土台になります。
フォントサイズ設計でよくある失敗と対処法
| よくある失敗 | 何が問題か | 対処法 |
|---|---|---|
| スマホ本文を12px以下にする | Googleが「小さすぎるテキスト」と警告・離脱増 | 本文は最低14px、推奨16px |
| px固定でサイト全体を組む | ユーザーの文字拡大が効かずa11y低下 | 本文・見出しはremで指定 |
| フォームを15px以下にする | iOS Safariが自動ズームしてレイアウト崩れ | input等は16px以上 |
| 見出しと本文の差が小さい | 階層が伝わらず読みにくい | ジャンプ率を意識し1.5倍以上差をつける |
| line-heightをpxで指定 | 子要素で行間が崩れる | 単位なし(1.5〜1.8)で指定 |
実装前チェックリスト
- 本文：PC 16〜18px / スマホ 14〜16px を満たしているか
- スマホの最小文字が12px未満になっていないか
- 本文・見出しを rem など相対単位で指定したか
- フォーム要素（input等）は16px以上か
- line-heightは1.5〜1.8・単位なしで指定したか
- 1行の長さは全角35〜45字に収まっているか
- 見出しと本文にジャンプ率（1.5倍以上）の差があるか
- clamp()やメディアクエリでレスポンシブ対応したか
まとめ｜フォントサイズは「数値」と「相対設計」の両輪で決める
Webデザインのフォントサイズは、感覚ではなく根拠のある数値で決めることが大切です。最後に要点を振り返りましょう。
- 本文は PC 16〜18px / スマホ 14〜16px。スマホ12px未満はNG
- 単位は本文・見出しに
rem、コンポーネント内にem、固定要素にpx clamp()で流体タイポにすればどの画面幅でも読みやすい- 行間1.5〜1.8・行長35〜45字までセットで整える
- フォームは16px以上でiOSの自動ズームを防ぐ
フォントサイズは「読みやすさ＝成果」に直結する。
数値の基準を押さえ、rem＋clamp()で相対的に設計しよう。
まずは自分のサイトの本文と見出しのサイズを見直すところから始めてみましょう。
よくある質問（FAQ）
Q1. PCとスマホで推奨される本文のフォントサイズは何pxですか？
A. PC（デスクトップ）の本文は16px〜18pxが基本で、16pxが業界標準です。スマートフォンの本文は最低14px、推奨16pxとされています。かつてPCは14pxが主流でしたが、高解像度ディスプレイの普及により現在は16px〜18pxが標準となっています。
Q2. フォントサイズはSEOに影響しますか？
A. 影響します。GoogleはCore Web Vitalsやモバイルフレンドリー評価でテキストの可読性をランキング要因として考慮しており、特にモバイルでフォントサイズが12px未満の場合はGoogle Search Consoleで「小さすぎるテキスト」として警告が表示されることがあります。適切なフォントサイズはSEO改善に直結します。
Q3. px・rem・emはどう使い分ければよいですか？
A. pxは画面上の絶対的なサイズを指定し再現性が高い一方、ユーザーのブラウザ文字サイズ変更が反映されずアクセシビリティで劣る場合があります。remはHTMLのルート要素のフォントサイズ（デフォルト16px）を基準とする相対単位で、ルートを変更するだけでサイト全体を一括調整でき、アクセシビリティにも優れます。emは要素を基準とする相対単位です。
Q4. 見出しのフォントサイズはどれくらいが適切ですか？
A. PCではh1が32〜48px、h2が24〜32px、h3が18〜24pxが目安です。スマートフォンではh1が24〜32px、h2が20〜24px、h3が16〜20pxとPCより小さくしてバランスを取ります。いずれも本文との差を意識してつけることが重要です。
Q5. clamp()を使った流体タイポグラフィとは何ですか？
A. clamp(最小値, 推奨値, 最大値)というCSS関数を使い、画面幅に応じて文字サイズをなめらかに変化させる手法です。たとえばfont-size: clamp(28px, 5vw, 48px);とすると、狭い画面では28px、広い画面では最大48pxまで拡大し、その間はvwに応じて連続的に変わります。メディアクエリの記述を減らしつつ、どの画面幅でも読みやすいサイズを保てます。最小値は16px前後を確保するのがポイントです。
Q6. remの計算が面倒です。ラクにする方法はありますか？
A. ルート要素にfont-size: 62.5%を指定する方法が定番です。ブラウザ標準の16px × 62.5% = 10pxが基準になるため、1.6rem＝16px、3.2rem＝32pxのように10倍で直感的に換算できます。計算の手間が大きく減り、remのメリット（サイト全体の一括調整・アクセシビリティ）はそのまま活かせます。
Q7. スマホのフォームで勝手にズームされるのを防ぐには？
A. input・textarea・selectなどのフォーム要素のfont-sizeを16px以上にしてください。iOS Safariは入力欄の文字が16px未満だと、フォーカス時に自動でズームする仕様があり、レイアウト崩れの原因になります。見た目上小さくしたい場合でも、フォーム要素だけは16px以上を守るのが安全です。
Q8. 行間（line-height）の目安はどれくらいですか？
A. 本文では1.5〜1.8が目安で、日本語の長文は1.75前後が読みやすいとされています。指定は単位なし（line-height: 1.8;）で行うのが鉄則です。pxで指定すると、フォントサイズの異なる子要素で行間が崩れることがあります。あわせて1行の長さを全角35〜45字に収めると、さらに読みやすくなります。
Q9. フォントサイズの単位は結局どれがおすすめですか？
A. 本文や見出しなどサイト全体の文字にはremが最もおすすめです。ルート要素を変えるだけで全体を一括調整でき、ユーザーの文字拡大設定にも追従するためアクセシビリティに優れます。ボタンやカードなどコンポーネント内で相対的にそろえたいときはem、枠線など固定したい細部にはpxを使う、という使い分けが現代的なベストプラクティスです。
関連記事
- Webデザイナーはきつくて大変！克服する方法もご紹介！
- Web制作はオワコン？理由と真相、対策ポイントを解説
- Webデザインはオワコン？ 真相とデザイナーが生き残るための3つの戦略
- 【完全保存版】Webアクセシビリティ方針策定テンプレート｜WCAG・JIS準拠ガイド
- 【完全ガイド】JIS X 8341-3の適合レベル確認方法｜A・AA・AAAの違いと試験手順を徹底解説
- Webデザインとは？初心者でもわかる解説
- Webデザイン|セクション区切りで見やすさが決まる実装ガイド
- Webデザイン初心者向け|6つのレイアウトパターン完全ガイド
参考リンク（公式・一次情報）
CSS・Webデザイン実装の総まとめ
CSSの実装テクニックを「レイアウト・装飾・アニメーション・基礎・トラブル解決」の目的別に探せる総まとめページを用意しています。実装で迷ったときの索引としてどうぞ。
あわせて読みたい（実装ガイド）
あわせて読みたい：CSSで行間・字間を調整する方法｜line-heightとletter-spacing
WithCodeを体験できる初級コース公開中！
初級コース(¥49,800)が完全無料に！
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
