第2.0版 — 2026年改訂増補

The Universal Web.

画面上のテキストのアクセシビリティのためのタイポグラフィ指針。Rhode Island School of DesignにてMarkle Foundationの支援を受けて始まり、現代のウェブに合わせてここに改訂しました。高精細ディスプレイ、バリアブルフォント、WCAG 2.2、そして20年分の新しい判読性研究を踏まえています。

このページはAIの支援を受けて翻訳されました。正文は英語の原文です。

目次

  1. 01はじめにUniversal Web ガイドラインの20年ぶりの改訂:2005年当時のタイポグラフィのアクセシビリティに関する知見を、高密度ディスプレイ、バリアブルフォント、WCAG 2.2、そして現代のレスポンシブウェブに照らして再検証する。10 min read
  2. 021.0 文字画面上の字形の判読性を左右するデザイン要因 — スタイル、ウエイト、傾き、字幅、字間 — を、高密度レンダリング、アパーチャ研究、バリアブルフォントの軸に合わせて更新。12 min read
  3. 031.1 フォントスタイル「画面ではサンセリフを使え」という2005年のルールが高解像度ディスプレイではもはや成り立たない理由 — そして代わりに評価すべきもの:エックスハイト、アパーチャ、文字の識別性、レンダリング品質。11 min read
  4. 041.2 フォントサイズ固定の14ポイント最小値から、しなやかなシステムへ:本文の下限としての16px、ユーザー設定を尊重するremベースのサイズ指定、WCAG 1.4.4のサイズ変更要件、そしてclamp()によるフルイドなスケーリング。12 min read
  5. 051.3 フォントウエイト「レギュラーからやや太め」のルールを2026年向けに再構築:連続的なバリアブルウエイト軸、グレードによるダークモードのウエイト補正、細いウエイトの流行という問題、そしてウエイトとWCAGコントラストの相互作用。12 min read
  6. 061.4 フォントの傾き連続したテキストには直立のローマン体が今も正しい選択です。イタリックは短い強調の範囲に用い、真のイタリックは常に疑似的なオブリークに勝ります。13 min read
  7. 071.5 フォントの幅レギュラーからやや狭めの幅が最も判読しやすいことに変わりはありません。バリアブルの wdth 軸は幅をレスポンシブデザインの道具にしました — ただし水平スケーリングで偽造しないことが条件です。12 min read
  8. 081.6 選ばれた書体名前ではなく、測定可能な判読性の基準 — エックスハイト、アパーチャ、文字の区別、字間 — で書体を選び、「アクセシブルなフォント」というマーケティングの主張には知識に裏づけられた懐疑をもって臨む。12 min read
  9. 092.0 単語画面読書における単語レベルの可読性 — 大文字・小文字、間隔、行長、階層、平明な文章 — を、目と心が実際にどう読むかについての現代的な理解に基づいて。13 min read
  10. 102.1 単語の大文字・小文字連続するテキストにはセンテンスケースが依然として正しい — しかし単語形状による説明は死んだ。読者は文字を並列に認識しており、オールキャップスが遅く読まれるのは、シルエットではなく、習熟と文字の類似性によるものである。14 min read
  11. 112.2 カーニングと語間カーニングと語間が画面上の読書をどう形作るか、なぜ両端揃えはハイフネーションなしでは今も失敗するのか、そしてWCAG 1.4.12がスペーシングの決定に何を要求しているか。13 min read
  12. 122.3 字間(トラッキング)字間の調整はサイズに依存します。スモールキャップスやラベルには役立ち、本文にはたいてい害となり、そして WCAG 1.4.12 が保証するユーザーの上書きに耐えなければなりません。12 min read
  13. 132.4 行間画面読書のための行間設定 — 単位なしの CSS line-height、1.5 を許容することを求める WCAG 1.4.12、そして適切な値が行長に依存する理由。12 min read
  14. 142.5 行長55〜65字という行長の指針は20年を経ても揺らがず、いまでは ch 単位で CSS に直接記述でき、WCAG の80字ガイダンスと 320px リフロー要件によって範囲が定められています。13 min read
  15. 152.6 フォントの階層2026年の文字の階層設計:clamp()によるモジュラースケールとフルイドスケール、WCAG 1.3.1が要求する構造的な見出しのセマンティクス、そしてサイズだけに頼らずウエイトと余白で築く階層。13 min read
  16. 163.0 色とコントラストコントラスト比の仕組み、WCAG 2.x の計算式の限界、そしてコントラストを高めることがすべての読者にとって必ずしも良いとは限らない理由。13 min read
  17. 173.1 ダークモードと読書面表示極性の研究が明るい読書面と暗い読書面について示していること、それぞれが誰の役に立つのか、そして判読性を保つダークテーマの作り方。12 min read
  18. 183.2 バリアブルフォントバリアブルフォントがウエイト、字幅、オプティカルサイズを、判読性、パフォーマンス、読者のパーソナライゼーションのための連続的な楽器へと変える仕組み。11 min read
  19. 193.3 フルイドタイポグラフィとレスポンシブタイポグラフィフルイドな文字サイズのスケール、コンテナクエリ、そして最新のCSSテキスト制御が、読者自身の設定を上書きすることなく、あらゆる画面に対応する方法。11 min read
  20. 203.4 モーションと読書動くテキストがなぜ読めないテキストなのか、アニメーションが前庭感覚に敏感な読者を身体的に傷つけうる仕組み、そして敬意あるモーションのあり方。13 min read
  21. 213.5 読書と認知テキストの認知的アクセシビリティ — プレインランゲージ、ディスレクシア向けフォントに関する誠実なエビデンス、そして真のフロンティアとしてのパーソナライゼーション。14 min read