The Universal Web

1.6 選ばれた書体

名前ではなく、測定可能な判読性の基準 — エックスハイト、アパーチャ、文字の区別、字間 — で書体を選び、「アクセシブルなフォント」というマーケティングの主張には知識に裏づけられた懐疑をもって臨む。

12 min read

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

この章の2005年版は、当時のあらゆるガイドがしていたことをしました。名前を挙げたのです。Verdana、Georgia とその一群 — 画面のために委嘱された Microsoft のコアウェブフォント — は、デザイナーがユーザーのマシンにプリインストールされたフォントだけに頼らざるを得なかった時代の、擁護できる推奨でした。20年後、その制約は消えました。ウェブフォントは確実に読み込まれ、バリアブルフォントは主流になり、利用可能な書体のカタログは十数種から数万種へと成長しました。候補リストを名指しすることは、もはや有用ではありません。基準を教えることが有用なのです。

この転換は、より誠実でもあります。かつてのリストが優れていたのは、それらのフォントが魔法だったからではなく、特定の、確認可能な性質を体現していたからです。ゆとりあるエックスハイト、開いたアパーチャ、緩めの字間、そして粗いレンダリングに耐えるよう描かれた字形。これらの性質 — おおむね、もとの章が引用した Boyarski 時代の基準 — はいまも正しいテストであり、どんな候補書体にも数分で適用できます。

2005年以降に変わったこと

3つあります。第一に、配信の問題が消滅しました。@font-face と WOFF2 圧縮によって、選んだ書体を届けることは日常になり、「デフォルトの画面フォント」と「埋め込みフォント」はもはや意味のある別カテゴリーではなくなりました。もとの章が指摘したライセンスへの不安も、ウェブライセンスの慣行とオープンソースの書体によって、おおむね吸収されています。

第二に、目的特化の「アクセシブルな書体」というジャンルが生まれました。真剣な取り組みもあります。Braille Institute の委嘱による Atkinson Hyperlegible は、ロービジョンの読者のために、混同されやすい文字どうしの違いを誇張しています。Lexend は、広めの字間と特定のプロポーションが読みの流暢さを高めるという仮説を軸に設計されました。APHont は American Printing House for the Blind によってロービジョンの印刷・画面利用のために開発されました。Luciole はフランスで、視覚障害のある読者のために特化して設計されました。これらは、問題を研究した人々による本物のプロジェクトです。

第三に — これが必要な但し書きですが — エビデンスの蓄積はマーケティングに追いついていません。読書速度と理解度についての独立した研究は、一般に、読者間の個人差がまっとうな書体どうしの差を圧倒すること、そして親しみやすさそれ自体が判読性の要因であることを見いだしています。とりわけ、大きく喧伝されたディスレクシア特化フォントの主張は、対照研究において繰り返し再現に失敗してきました。そうした研究では、ディスレクシアのある読者は、専用のディスレクシア向けフォントでも、間隔の行き届いた通常の書体と比べて速く読めるわけではなく、しばしばなじみのある書体を好みます。「アクセシビリティのために設計された」はデザイン上の意図であって、成果の保証ではありません。ラベルではなく、目に見える、確認可能な性質で選んでください。

重要な基準

Version 1 のリストは驚くほどよく持ちこたえています。ここに、更新し、テスト可能なかたちにしたものを示します。

  • 文字の区別。 Il1 という文字列を打ち、次に 0O、m の隣に rn、d の隣に cl を打ってみてください。大文字の I、小文字の l、数字の 1 は、一目で区別できなければなりません — セリフ、テールつきの l、あるいは上が平らな 1 によって。これは最も速い失格判定であり、人気のあるジオメトリック・サンセリフの多くがこれに落ちます。
  • 開いたアパーチャ。 a、c、e、s の開口部は広くあるべきです。閉じたアパーチャは、ぼやけ、小さなサイズ、ロービジョンのもとで e を o へと潰してしまいます。
  • ゆとりあるエックスハイト、ただし節度の範囲で。 大きなエックスハイトは、文字の同一性の大半を担う部分を拡大します。極端は裏目に出ます。エックスハイトがアセンダーを圧迫すると、h と n が似通い始め、d と a の区別が失われます。
  • 快適な字間。 本文サイズでわずかに緩い字間は、流行の詰まった字間に勝ります。また、ユーザーが字間の拡大を適用しても(WCAG 1.4.12)崩れないことを確認してください。
  • 中庸なストロークコントラストと頑丈な接合部。 コントラストの強いモダン系は、小さなサイズと低解像度で細い線を失います。中庸で、モノトーンに近いウエイトが安定してレンダリングされます。
  • 2階建ての a、判別できる g、曖昧さのない字形。 字形はニュアンスではなく構造によって異なるべきです。鏡像のペア(b/d、p/q)には非対称なディテールが有効です。
  • 本物のイタリックと使えるボールド。 1.3章と1.4章で述べたとおり、誠実な強調スタイルが必要になります。それを欠くファミリーは合成を強います。
ちなみに、セリフ対サンセリフは依然として引き分けです。研究の合意は、現代の画面上ではどちらのカテゴリーにも一般的な判読性の優位はない、というものです。上記の性質は、その区分を横断します。Georgia はこれらのテストの大半に合格します。よくできたヒューマニスト・サンセリフも同様です。

システムスタックと親しみやすさの配当

現代のシステムフォントスタック — Apple プラットフォームの San Francisco、Windows の Segoe UI、Android の Roboto を font-family: system-ui 経由でレンダリングするもの — は、特筆に値します。これらの書体はそれぞれのプラットフォームのレンダリングに合わせて設計され、フルレンジのウエイトと本物のイタリックを備え、読み込みコストがゼロで(これはパフォーマンス上の利点であり、遅い回線ではそれ自体がアクセシビリティ上の利点です)、読者が一日中目にしている書体です。親しみやすさは測定可能な判読性の資本です。システムスタックは決して刺激的な選択ではありませんが、アプリケーション UI と実用的なテキストにおいては、ほとんど非の打ちどころがありません。

編集的な声(エディトリアルな個性)については、誠実な立場はこうです。多くの通常の、よくできた本文書体 — ヒューマニスト・サンセリフも頑丈な本文用セリフも — は、上記の基準をすべて満たします。先に挙げたアクセシビリティ重視の書体も妥当な候補であり、ロービジョンの読者が主要な読者層である場合はとりわけ Atkinson Hyperlegible が有力です。重要なのは、その選択が基準に照らして、そして実際のレンダリング対象と実際のサイズで、テストされることです。

Georgia、Verdana、Tahoma で組んだ Handgloves 123 — システム書体はゼロバイトで、フォントの入れ替えを起こさず、すべての読者になじみがある。

CSS では

/* Criteria first, then names: distinct Il1/0O, open apertures */
body {
  font-family: "Atkinson Hyperlegible", Seravek, Verdana,
    system-ui, sans-serif;
  font-size-adjust: 0.53;   /* keep fallback x-heights consistent */
}

推奨事項

  • 名前や「アクセシブル」というブランディングではなく、基準で選ぶ。Il1、0O、rn/m、アパーチャの開き、字間を自分でテストする。
  • アクセシビリティ特化フォントは、同じテストに合格しなければならない候補として扱う — いくつか(Atkinson Hyperlegible、Lexend、APHont、Luciole)は信頼に足るが、どれも銀の弾丸ではない。
  • ディスレクシア向けフォントの主張には懐疑的であること。対照研究は読書速度の利益を裏づけておらず、間隔の行き届いた通常の書体が同等の成績を示す。
  • セリフ対サンセリフは問いではない。造形の品質こそが問いである。
  • UI と実用的なテキストにはシステムフォントスタックを自信を持って使う — 親しみやすさとレンダリング品質は実在する利点である。
  • 採用するファミリーには本物のイタリックと、少なくともひとつのしっかりしたボールドを要求する。
  • 決定する前に、選んだ書体が WCAG のテキスト間隔の調整、200% ズーム、そして本番での最小サイズに耐えることを検証する。
  • 書体、レンダリング環境、読者層が変わったら再テストする — 基準は安定しているが、合格リストはそうではない。

参考文献