Webサイトに適切なフォントサイズ・行間は?Google推奨基準と読みやすさについて

視認性の高いWebサイトを作るには、フォントサイズと行間の設定が重要です。本記事では、Googleが推奨する基準を基に、ユーザーにとって読みやすいフォントサイズ・行間の設定方法をわかりやすく解説します。
フォントサイズの重要性とは?
フォントサイズは、Webサイトの視認性とユーザーエクスペリエンス(UX)を左右する重要な要素です。適切なフォントサイズの設定は、単なるデザインの選択ではなく、情報伝達の効果やユーザー行動にも直接影響を与えます。
- 視認性の向上
大きな文字は読みやすく、小さな文字は読みにくくなります。特に高齢者や視覚に制限のあるユーザーにとっては、読みやすさがサイトの評価に直結します。 - アクセシビリティの確保
視力に制約があるユーザーにとって、適切なフォントサイズは欠かせません。Webアクセシビリティ基準(WCAG)は、最低限の視認性基準として16px以上を推奨しています。 - SEOへの影響
見やすい文字は滞在時間の増加や直帰率の低下につながり、結果的にSEO評価の向上が期待できます。視認性が高いと、Googleのモバイルフレンドリー評価も向上します。
Google推奨のフォントサイズと行間
Googleは、視認性とアクセシビリティを向上させるために、以下のフォントサイズと行間の基準を推奨しています。これらの設定は、ユーザーが快適に情報を得られる環境を整えるための基本です。
項目 | 推奨設定 |
---|---|
推奨フォントサイズ | 16px以上 |
行間 | フォントサイズの1.5倍~2倍 |
見出しサイズ | H1~H6の段階的なサイズ設定を推奨 |
モバイル対応 | ビューポートに応じてフォントサイズを自動調整 |
一般的なフォントサイズ
Webサイトで使用されるフォントサイズは、サイトの種類やデザイン目的によって異なりますが、以下が一般的です。
項目 | 推奨サイズ |
---|---|
本文テキスト | 16px~18px (標準的な読みやすさを考慮) |
見出しテキスト | H1: 32px以上 H2: 24px~28px |
キャプション・補足 | 12px~14px (必要最低限の視認性を確保するため) |
最小フォントサイズ | 小さくても10px以上が推奨 (ユーザビリティ的には12px以上が理想) |
フォントサイズのサンプル
8pxの文章です(NGサイズ)
10pxの文章です(最小サイズ)
12pxの文章です
14pxの文章です
16pxの文章です(本文の推奨サイズ)
18pxの文章です(PCで多いサイズ)
20pxの文章です
24pxの文章です
30pxの文章です
一般的な行間
行間は、フォントサイズの 1.5倍~2倍 が推奨されます。行間が狭すぎると文字が詰まり、読みづらさを引き起こします。一方、行間が広すぎると文章が分断され、情報の連続性が失われるため、適切なバランスを見極めることが重要です。
- 本文テキスト(16px)の場合、行間は 1.5〜2.0 が理想的。
- 長文コンテンツでは広めの行間を設定すると読みやすくなります。
行間サンプル
フォントサイズ16px 行間1.5の場合
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。(青空文庫より)
フォントサイズ16px 行間2.0の場合
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。(青空文庫より)
一般的な字間
字間(文字間のスペース)は、テキストの視認性とデザインの美しさに影響します。文字間が狭すぎると詰まった印象になり、広すぎると間延びして見えます。
だいたい、文字サイズの5%〜10%に文字間を設定すると読みやすくなります。
推奨設定:
- 標準字間: 0em ~ 0.05em(一般的な文章)
- 見出し字間: 0.1em ~ 0.2em(強調効果を高めるために使用)
字間のサンプル
16px 字間 0emの場合
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。(青空文庫より)
16px 字間 0.05emの場合
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。(青空文庫より)
これらの設定により、情報の整理がしやすく、ユーザーが心地よくコンテンツを読むことができます。
適切なフォントサイズ設定のポイントまとめ
1. 本文は16px以上に設定する
標準的な本文サイズは16px以上が理想です。小さすぎると読みづらく、視認性が低下します。
2. ターゲットユーザーに合わせる
Webサイトのターゲットユーザーによってフォントサイズの選択基準は変わります。年齢層や利用シーンを考慮して、以下のように設定しましょう。
- ご高齢者向け
18px以上の本文サイズがおすすめです。視認性が高く、情報がわかりやすくなります。見出しは24px以上に設定し、文字の読みやすさを優先しましょう。 - 子供向け
明るい色と大きなフォント(20px以上)を使い、楽しい印象を与えます。行間を広く取ることで視覚的な混乱を避けられます。 - ビジネスユーザー向け
明確で洗練された印象を与えるため、本文16px~18px、見出しは20px~24px程度が最適です。行間は1.5倍程度に設定しましょう。
3. 見出しのサイズを段階的に設定する
H1、H2、H3の順にサイズを大きくし、情報の階層をわかりやすく整理しましょう。
4. サイズに合わせて行間と字間を設定する
文字サイズに合わせて、文字の行間、字間の調整も重要です。
行間はフォントサイズの 1.5倍~2倍 が目安です。文字が詰まりすぎると読みづらく、広すぎると間延びしてしまいます。長文には広めの行間を設定しましょう。
字間(文字間のスペース)は、視認性とデザインのバランスに影響します。標準的な字間は 0em ~ 0.05em、見出しでは 0.1em ~ 0.2em 程度が適切です。
5. ジャンプ率を意識する
ジャンプ率とは、フォントサイズに対する文字の高さ(縦方向の比率)を指します。ジャンプ率が高いと文字が大きく見え、低いと小さく見えます。
- 高いジャンプ率: 子供向けのサイトやカジュアルなデザインに最適。文字が目立ち、親しみやすい印象を与えます。
- 低いジャンプ率: ビジネス向けサイトやフォーマルなデザインに適しており、落ち着いた印象を与えます。
適切なジャンプ率を選ぶことで、フォントデザインと全体の見た目が調和し、視認性とブランドの印象を高めることができます。
6. モバイルデバイスに対応する
モバイル端末では文字が小さくなりがちです。ビューポートに応じたレスポンシブデザインを心がけましょう。
よくある質問
まとめ
Webサイトのフォントサイズと行間の設定は、視認性とユーザーエクスペリエンスを大きく左右します。Googleが推奨する基準に従い、読みやすいテキストデザインを心がけましょう。視認性を改善することで、ユーザーの満足度が向上し、SEO評価の向上も期待できます。