BLOG

アクセシビリティを意識したフォントサイズについて

Written by okoshi

INDEX

本文=16px?

現在、ほとんどのブラウザの標準の文字サイズ（推奨）は16pxです。

しかし、なんとなくデフォルトのフォントサイズだからということで使っていないでしょうか？

これは印刷において一般的に腕を伸ばした状態で読みやすいとされているサイズの12ptを CSSピクセル（96dpi）で換算した数値になります。（※諸説あり）

16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake に12ptで印刷された本と、ディスプレイに表示された16pxを並べた比較画像があるのですが、だいたい同じくらいになっているのがわかると思います。

1ptは 1/72インチなので、当初、印刷とディスプレイ表示を一致させるために macは72dpiを採用していたらしいのですが、Windowsは紙とディスプレイでは目からの距離が異なるため 96dpi にしたとのこと。

※今では様々な解像度のディスプレイがあるので一概に96dpiとは言えないのですが、CSS上では 12pt = 12 * 96 / 72 = 16px という計算だと覚えておいてください。

MDNの「ウェブアクセシビリティ: 色と輝度を理解する」にも「16px のフォントサイズは、一般的に正常な視力の人にとって読み取り可能なサイズです」というような記述があり、アメリカのアクセシビリティに関する Section 508（リハビリテーション法508条）でもウェブサイトでは 11 or 12pt（15〜16px）を使用するようにと記載されています。

For websites and documents, the user has control over “zoom” so use a typical font size of 11 or 12pt, or 15 to 16px.

ということで、16pxはアクセシビリティの観点から見ても妥当なサイズであると言えるのではないでしょうか。

※実装上の問題として、iOSのSafariではフォーム要素のフォントサイズが16pxより小さい場合、フォーカスした際に画面がズームしてしまうので、これを避けるためにも16px以上に設定しておく必要があります。

参考

定義によれば、これは閲覧者の目から腕の長さまで離れた位置での、画素密度 96DPI の単一ピクセルの物理的サイズです。

この96DPIは、実は72DPIを1/3だけ増やしたもの。72DPIの4/3とも言い換えることができる。なぜ1/3を増やしたのか？　Microsoftによれば、これは、ディスプレイと紙の印刷物では、目からの距離が異なるため、その分を調整したのだという。

In general, 12pt (16px) font is often recommended as the minimum font size for the body text of a website to be accessible. Text any smaller than this may be illegible on many platforms, which can create additional accessibility issues.

見出し・注釈

では、見出しや注釈はどうでしょう？

WCAG2.1の達成基準 1.4.3 コントラスト（最低限） では、「18 ポイントのテキスト又は 14 ポイントの太字のテキスト」をサイズの大きなテキストとしています。

利用者が目にする文字の実際のサイズは、コンテンツ制作者が指定したサイズと利用者のディスプレイあるいはユーザエージェントの設定の両方に依存している。多くの主流となっている本文テキストで用いられるフォントにおいて、14 ポイントと 18 ポイントは、1.2em と 1.5em、又は、 (本文フォントが 100％であると仮定して) デフォルトサイズの 120%と 150%に、おおよそ同等である

これをpxに換算すると、18pt = 24px、太字の場合は 14pt = 18.67 px が大きいサイズのテキスト。要するに見出しに適したサイズということになります。

冒頭でも紹介したMDNの「ウェブアクセシビリティ: 色と輝度を理解する」には「視力 20/20 のユーザーにとって、文字サイズが約 96px を超えると、読むスピードが低下します」とあるので、本文と16pxとした場合、見出しは18〜96pxの範囲ということになります。96dpi で換算すると 96pxは1インチ（25.4mm）。グラフィックならともかく読むにはちょっと大きすぎますね。

小さいサイズ、一般的に脚注などは本文の80%〜90%で設定されていることが多く、16px の 80%〜90%というと 12.8px 〜 14.4px。

たまに本文が16pxで注釈が15pxのデザインがあがってくることがあるのですが、ヴェーバー・フェヒナーの法則 によると、人間がサイズが異なると認知できるのは10%以上の差異が必要なので、15px（16pxの93.75%）では差が小さすぎるということになります。

また、印刷物の判読性について書かれた Legibility of Print（1963 / Miles A.Tinker ）によると、行間などが正しく設定されていれば9〜12ptの文字サイズが可読性が高く、8pt以下は読み取り速度が低下したとあります。9pt ≒ 12px が可読性が担保できる最小サイズと考えると、12〜14px が注釈としては妥当なサイズかと推測されます。

※ LighthouseのSEO監査では12px未満のフォントサイズは小さくて読みにくいという警告がでます。

デジタル庁のデザインシステムでは本文やUIにおいては16 CSS px以上を基準値としており、標準サイズの使用が難しい箇所に限り14pxを使用し、視覚的なインパクトが必要なデザイン要素は48〜64pxと定義しているので、上記の条件にも合致しています。

ブラウザのデフォルトスタイルシートではどうなっているかというと、Chrome ではh1は2em（xx-large相当）、h2は1.5em（x-large相当/サイズの大きなテキスト）、h3は1.17em（large相当/太字の大きなテキスト）、h4は指定なし（medium/本文と同等）。単に注釈というと語弊がありますが、 <small> タグには smaller（small 相当）が設定されています。

Chrome / Safari

Firefox

Normalize.css

h1

2em ( 32px)

2em (32px)

2em (32px)

h2

1.5em (24px)

1.5em (24px)

ブラウザ準拠

h3

1.17em (18.72px)

1.17em (18.72px)

ブラウザ準拠

h4

指定なし (16px)

1em (16px)

ブラウザ準拠

h5

0.83em (13.28px)

0.83em (13.28px)

ブラウザ準拠

h6

0.67em (10.72px）

0.67em (10.72px）

ブラウザ準拠

p

指定なし (16px)

指定なし (16px)

ブラウザ準拠

small

smaller (13.3333px）

smaller (13.3333px）

80% (12.8px)

参考：キーワードによるfont-size（<absolute-size> ）

font-size

拡大率

16px換算

ブラウザでの数値

xx-small

3/5

9.6px

9px (※Chromeは10px)

x-small

3/4

12px

10px

small

8/9

14.2px

13px

medium

1

16px

16px

large

6/5

19.2px

18px

x-large

3/2

24px

24px

xx-large

2/1

32px

32px

xxx-large

3/1

48px

48px

タイプスケール（ジャンプ率）

さて、見出しや注釈のサイズの目安はわかりましたが、読みやすい文章のためにはサイズの変化に一定のルールを持たせたタイプスケール（ジャンプ率）の設計が必要になってきます。

これが正解！というものはないですが、調和数列のような一定の倍率を用いたもの、Tailwind（0.125 rem）や Bootstrap（0.25rem）のように一定の数値を加算していくもの、IBMのCarbon Design Systemのように、 Xn = Xn-1 + {INT[(n-2)/4] + 1} * 2 という計算式に基づいたものなど、様々な設計方法が存在します。

用途やサイト全体のデザイン（例えば8pxグリッド等）にあわせて選択すると良いでしょう。

調和数列についてはModular ScaleやTypeScaleのようなジェネレーターを使うのが良さそうです。

※「サイズの大きなテキスト」が太字/120%、ということを考えると1.2倍のminor thirdや1.25倍のmajor third あたりが無難かもしれません。

line-heightも含めて考えるバーティカルリズムという手法もあるので参考までに。

参考

流体タイポグラフィ（Fluid Typography)

ここまで本文は16pxということで進めてきましたが、スマートフォンやPC、タブレットやVRゴーグルなど閲覧するデバイスも多様化しており、ディスプレイから目の距離も一定とは言えません。（12ptがちょうど良いとされるのは画面からの距離が65cmまで。だいたい24インチディスプレイ程度までだそうです）

そこでブラウザ幅に応じて文字サイズを可変させる流体タイポグラフィという手法がでてきました。可変といっても際限なく大きくしたり小さくしたりするわけにもいかないので、 clamp() を使って上限と下限を設定します。

font-size: clamp(1rem, 0.75rem + 1vw, 1.5rem);

たとえば、上記ではフォントサイズが画面サイズにあわせて16px〜24pxに変化します。

  • 画面幅 400px以下は16pxで固定
  • 画面幅 400px 〜 1200pxの間は16〜24pxで可変（画面幅 800pxのとき20px）
  • 画面幅 1200px以上は24pxで固定

WCAG2.1の達成基準の1.4.8に、1行あたりの文字数は「幅が 80 字を越えない (全角文字の場合は、40 字)」とあります。

本文の文字サイズが16pxで固定だった場合、ブラウザ幅が1200pxを超えてきたとしても、1行あたりの幅は最大640pxということになってしまい、デザインしにくい部分がでてくるかもしれません。

しかし、先ほど設定したフォントサイズを適用すると下記のように画面幅に応じて変化させることが可能です。

  • 画面幅 400pxのとき1行の最大幅は 16px × 40em = 640px
  • 画面幅 400px 〜 1200pxの間は 640px〜960px（画面幅800pxのとき 20px × 40em = 800px）
  • 画面幅 1200pxのとき1行の最大幅は 24px × 40em = 960px

フォントサイズをvwで指定すれば良いという意見もあるかもしれませんが、それでは 達成基準1.4.4 テキストのサイズ変更 に対応できなくなってしまうため、remと画面幅をあわせたこちらの手法がより適切かと思われます。

ただ、これを実装するときの計算が少々厄介なので、基準となるデザインの幅と最小値・最大値を決めたら、Type Fluidity や Modern fluid typography editor のようなジェネレーターを使うのがよさそうです。

参考

最後に

いろいろと書いてきましたが、Webサイトは情報を届けるものと捉えるならアクセシビリティを切り離して考えることはできません。写真やグラフィックも大事ですがそれが何なのか伝えるための文章がとても重要になってきます。

人間にも、さらにはChatGPTやClaude CodeのようなAIツールなどにも正しい情報を届けるために、読みやすい文字サイズの設計を心がけていきましょう。

PICK UP