フォントサイズの基準
Webにおける本文テキストの推奨サイズは16px以上です。これはブラウザのデフォルトフォントサイズでもあり、WCAGが定めるテキストアクセシビリティの基礎となっています。
16px未満のフォントサイズは、弱視の方や高齢者にとって読みにくいだけでなく、健常者でも目の疲れを増加させます。多くのデザインで「スッキリした印象」を出すために12〜14pxを使用しがちですが、注釈・キャプション以外の本文テキストには必ず16px以上を確保してください。
| テキストの種類 | 推奨サイズ |
|---|---|
| 本文（body） | 16px以上 |
| 見出しH2 | 24px以上 |
| 見出しH3 | 20px以上 |
| 注釈・キャプション | 12〜14px（ただし装飾目的でない情報には注意） |
| ボタン・ナビゲーション | 14px以上 |
行間・文字間・段落間の基準
テキストの読みやすさはフォントサイズだけでなく、行間・文字間・段落間のバランスで決まります。WCAGでは以下の数値を目安としています。
行間（line-height）：フォントサイズの1.5倍以上。日本語テキストの場合、1.7〜1.9程度がより読みやすいとされています。詰まった行間は視線の折り返しを難しくし、どこを読んでいるかわからなくなります。
文字間隔（letter-spacing）：フォントサイズの0.12倍以上。日本語では欧文ほど大きな影響はありませんが、フォント依存の微調整が有効です。
段落間（paragraph spacing）：フォントサイズの2倍以上の余白を段落間に設けることで、内容の区切りが視覚的に明確になります。
モバイルでの注意点
スマートフォン表示では、物理的な画面サイズと指での操作が加わるため、デスクトップとは異なる配慮が必要です。
タップターゲットのサイズ：ボタン・リンク・フォーム要素のタップ可能領域は最低44×44px（WCAG 2.1 AAA）、WCAG 2.2では24×24pxが最低基準として追加されました。小さなリンクが密集したメニューは、タップミスを誘発し操作性を著しく下げます。
フォントサイズの自動拡大：iOS Safariなどのブラウザは、フォントサイズが小さいと自動拡大処理を行うことがあります。font-size: 16px を本文に設定しておくことでこの自動処理を回避し、デザインの崩れを防げます。
横スクロールの禁止：コンテンツが画面幅を超えると、ユーザーは横スクロールを強いられます。max-width: 100% や Flexbox・CSS Grid を活用して、どの画面幅でも収まるレイアウトを作ることがモバイルアクセシビリティの基本です。
まとめ
テキストの読みやすさはアクセシビリティの出発点です。「フォントサイズ16px以上・行間1.5倍以上」という2つの数値を守るだけでも、多くのユーザーにとって格段に読みやすくなります。CSSを数行変更するだけで対応できるため、既存サイトの改善としても取り組みやすい施策です。まず自社サイトのフォントサイズと行間を確認してみてください。