このページはAIの支援を受けて翻訳されました。正文は英語の原文です。
2005年版は、サイズの問いにひとつの数字で答えました。アクセシブルな本文には最小14ポイント、Verdana でおよそ19ピクセル、というものです。その時代においては擁護できる数字でした。印刷の伝統的な9ポイントや10ポイントは粗い画面には明らかに不向きであり、Verdana の非常に大きなエックスハイトのおかげで19ピクセルは快適に読めたのです。しかし過去20年のより深い教訓は、単一の数字は答えになりえないということです。いまやサイズの最終的な決定権を握っているのはデザイナーではなく読者だからです。デザイナーの仕事は、正しいサイズを選ぶことから、読者の選択に耐えるシステムを構築することへと移りました。
2005年から変わったこと
3つの発展がこの問いを再構築しました。
第一に、ブラウザーのデフォルトが下限を確定させました。すべての主要ブラウザーはデフォルトのテキストサイズとして16 CSSピクセルを備えており、ユーザーは設定でこれを引き上げられます。16ピクセルは、プラットフォームと読者の間の実質的な契約となりました。本文をデフォルト以上のサイズにすることはその契約を尊重することであり、それを下回る本文は、ユーザーが意図的に設定したかもしれない好みを上書きすることです。昔の「Verdana で19ピクセル」という数字は、Verdana の突出したエックスハイトと当時のレンダリングを補正するものでした。典型的な現代の本文書体では、16pxは同等の読みやすさになります。エックスハイトの小さい書体では、17〜18pxが正直な等価値です — 名目上のサイズよりエックスハイトが重要だという2005年の洞察はそのまま完全に生きており、CSSはいまやそれを font-size-adjust プロパティとして符号化しています。フォールバックフォントを一貫したエックスハイト比にスケールすることで、フォントの入れ替わりが黙ってテキストを縮ませることがなくなります。
第二に、アクセシビリティ標準は、サイズではなくサイズ変更可能性をテスト可能な要件にしました。WCAGの達成基準1.4.4(テキストのサイズ変更)は、コンテンツや機能を失うことなくテキストを200パーセントに拡大できることを要求し、1.4.10(リフロー)は、高倍率ズーム時に二次元スクロールなしでコンテンツがリフローすることを要求します。ゆとりのある固定サイズで組まれたページでも両方に不合格になりえますし、しなやかなレイアウトを持つ16pxのページは合格します。標準の重心は、出発点ではなくズームの経路にあります。
第三に、高密度ディスプレイが昔の上限側の圧力を取り除きました。テキストは拡大しても劣化しなくなり、スケーリング時のレイアウト安定性に関する2005年の不安には、いまやタイポグラフィではなくエンジニアリングの答えがあります。
ユーザーの尊重:pxではなくrem
採用すべき最も重要な実践は、文字サイズを rem 単位で指定することです。rem はルートフォントサイズに相対的で、それはブラウザーのデフォルトから継承されます。したがってデフォルトを16pxから20pxに引き上げたユーザーには、remで指定されたすべての要素が比例して拡大して見えます。pxで固定された文字は、その好みを完全に無視します。
よくある擁護 — 「pxでもユーザーはズームできる」— は部分的にしか正しくなく、その違いが重要です。ページ全体のズームはpxのテキストも拡大します。それは確かです。しかし、ブラウザーのテキストサイズ設定 — ページごとの調整なしにすべてのサイトで持続するからこそ、多くのロービジョンユーザーが頼りにしているもの — は、pxで指定されたテキストにはまったく影響しません。文字をピクセルで固定することは、プラットフォームの最も堅牢なアクセシビリティ機構を静かに無効化することなのです。同じ論理は、ルート要素の font-size をpx値に設定することにも反対します(昔ながらの「html { font-size: 62.5% }」の技は比例的なので許容できますが、「html { font-size: 10px }」はそうではありません)。
行間も同じ規律に属します。単位なしで指定してください(本文には1.5が健全なデフォルトです)。そうすればテキストが最終的にどんなサイズになっても行間はそれに比例し、デザイナーのビューポート向けに計算されたpx値で凍結されることがありません。
下限を失わないフルイドなサイズ指定
レスポンシブデザインは、新しい道具と新しい失敗様式を加えました。clamp() 関数はサイズをビューポートとともに呼吸させます — clamp(1rem, 0.9rem + 0.5vw, 1.25rem) は下限、フルイドな中間値、上限を設定します。これは見出しや、大画面で大きくなるべき本文には本当に有用です。
失敗様式は、ビューポートのみのサイズ指定です。純粋にvw単位で指定されたテキストはズームに応答しません。ユーザーがズームするとビューポートのCSS幅は比例して縮小し、テキストはほぼ同じ見かけのサイズに再計算されて、WCAG 1.4.4を無効化してしまいます。防御策は推奨パターンに組み込まれています。フルイドな式には必ずrem項を含め、clamp()にはremベースの最小値を置くこと。そうすればユーザー設定とズームの両方が効力を保ちます。そのうえで、実際に200パーセントにズームしてテキストが2倍の大きさになったことを確認して検証してください。
現代的なサイズの設計
これらの部品を組み合わせると、アクセシブルな読書のための堅実なタイプスケールは次のようになります。本文は最低1rem(デフォルト設定で16px、エックスハイトの小さい書体ではそれ以上)、補助的なテキストは約0.875remを下限とし、持続的な読書には決して使わないこと、見出しはremで表現された控えめな比率のスケールに置き、必要に応じてclamp()のフルイド性を加えること、そしてpx固定のfont-sizeはすべて欠陥として扱うこと。小さな文字に関する2005年の指針は、更新された形で維持されます — 本当に小さな文字が許容されるのは短い付随的な文字列だけで、連続した文章には決して使えません。そしてWCAGのコントラスト規則は小さな文字に対して厳しくなります。18pt標準(または14pt太字)未満のテキストには、大きなテキストに許される3:1ではなく4.5:1のコントラスト比が要求されます。サイズとコントラストが互いにトレードオフの関係にあることの明示的な承認です。
ロービジョンの読者にとって、これらはどれも拡大の代わりにはなりません。拡大を機能させるためのものです。成功の尺度は、100パーセントでページがどう見えるかではなく、200パーセントと400パーセントのズームでも読みやすい単一のカラムであり続けるかどうかです。
CSSでは
html { font-size: 100%; } /* the reader's choice is the unit */
body { font-size: 1rem; } /* 16px floor for continuous text */
h1 {
/* the rem term keeps user settings and zoom in charge */
font-size: clamp(2rem, 1.2rem + 3vw, 4rem);
}
small { font-size: 0.875rem; } /* captions only, never body text */推奨事項
- 16px(1rem)を本文の下限として扱うこと。エックスハイトの小さい書体では引き上げること。
- すべての文字サイズをremで指定し、行間は単位なしで指定すること(本文はおよそ1.5)。
- 本文をpxで固定しないこと。ルートのfont-sizeをpx値に設定しないこと。
- フルイドな文字にはclamp()を使い、必ずrem成分を含めて、ズームとユーザー設定が引き続き効くようにすること。
- font-size-adjust を使い、フォールバックフォントが意図したエックスハイトを保つようにすること。
- 200パーセントズーム(WCAG 1.4.4)と400パーセントリフロー(WCAG 1.4.10)でのテストを日常のQAとすること。
- 本文未満のサイズは短い付随的なテキストに限定し、小さな文字にはそれが要求するより厳しい4.5:1のコントラストを与えること。