このページはAIの支援を受けて翻訳されました。正文は英語の原文です。
判読性は文字から始まります。読者が単語を認識できるようになる前に、視覚系は個々の字形を解像しなければなりません — そして文字を解像しやすく、あるいはしにくくするあらゆる要因は、一回の読書における何千もの固視にわたって積み重なります。もとのガイドラインは、決定的な要因として書体のスタイル、ウエイト、傾き、字幅、字間を挙げました。このリストはそのまま生き残っています。変わったのは、それらの文字が描かれる環境と、デザイナーがいま各要因に対して持っているコントロールです。
2005年以降に変わったこと
2005年版は、本文サイズの小文字が高さにしておよそ9〜10ピクセルを占める画面のために書かれました。その解像度では、ピクセルグリッドが支配的な制約でした。ストロークはピクセル単位にスナップされ、細部は消えるかノイズと化し、レンダリング技術 — Windows の ClearType のようなサブピクセル・アンチエイリアシング、それ以外ではグレースケールのアンチエイリアシング — が、デザイナーと同じくらい文字の見た目を決めていました。ヒンティング、すなわちグリッドに合わせる命令をフォントに埋め込む実践は、使える本文書体と使えない本文書体を分けるものでした。
高密度ディスプレイがこの計算を変えました。CSS ピクセルあたり2〜3のデバイスピクセルでは、同じ文字が4〜9倍のピクセル予算で描かれます。高 DPI でのグレースケール・アンチエイリアシングは、曲線、細いストローク、本物の斜線を忠実にレンダリングします。密度がそれを不要にしたため、業界はおおむねサブピクセルレンダリングから離れました。積極的なヒンティングの重要性はかつてよりはるかに下がりました — とはいえ、いまも一般的な標準密度のノート PC やデスクトップのモニターでは依然として重要であり、だからこそ文字レベルの推奨は、まだあらゆる場所で高 DPI を前提にできないのです。
2つ目の構造的変化はバリアブルフォントです。ウエイト(wght)、字幅(wdth)、オプティカルサイズ(opsz)、そして一部のファミリーではグレード(GRAD)が、いまや CSS から扱える連続的な軸になっています。もとのガイドラインは書体のウエイトと字幅を、選択すべき固定の性質として扱いました。それらはいまや調整すべきパラメータです — サイズ、背景色、ユーザー設定に応じて調整するものも含めて。
重要な解剖学
文字認識の研究は2005年以降精緻になり、一貫して少数の構造的特徴を指し示しています。
エックスハイトは、見かけのサイズと小サイズでの判読性を予測する、依然として最も信頼できる単一の指標です。同じ公称サイズの2つの書体でも、どれほど大きく読めるかは劇的に異なりえます。エックスハイトの大きいほうが大きく読めるのです。CSS の font-size-adjust が存在するのはこのためです — フォールバックフォントを目標のエックスハイト比に正規化し、書体の入れ替えが密かにテキストを縮めないようにします。
アパーチャ — c、e、a、s のような文字の開口部 — は、閉じた形の隣人からその文字をどれだけ容易に区別できるかを左右します。開いたアパーチャを持つ書体は、ロービジョンによるぼやけや小さなレンダリングサイズのもとでも、c を o から、e を a から区別し続けます。閉じた、折り込まれたアパーチャを持つ書体は、その区別を最初に失います。過去20年の判読性志向の書体デザインは、開いたアパーチャへと決定的に動いており、ロービジョン研究はその動きを支持しています。
文字の区別が3つ目の柱です。混同されやすいペア — b/d、p/q、そして何より大文字の I、小文字の l、数字の 1 — は、認識が最初に破綻する場所です。もとの版は、ディスレクシアのある読者のために鏡像の文字を差別化するようデザインされた書体として Natascha Frensch の Read Regular を挙げました。そのデザインの方向性はその後主流となり、手早い「Il1」テスト(3文字を並べて組み、違いがあるかを確認する)は、いまやあらゆるインターフェイス用・本文用書体の標準的なスクリーニング手順です。
ストロークの振る舞いがリストを締めくくります。比較的均一なストローク幅、太い線と細い線の中庸なコントラスト、中庸な全体の字幅は、いずれも2005年から生き残っています — 極端な肥痩も極端な圧縮も、ぼやけのもとでは字形を破壊します。そしてぼやけは、ロービジョンと低品質な閲覧条件の両方の妥当なモデルなのです。
連続的な選択としてのウエイト、傾き、字幅
もとの指針 — レギュラーからやや太めのウエイト、傾いたものではなく直立、中庸な字幅 — は有効です。改訂されたのは、その選択のなされ方です。
バリアブルなウエイト軸があれば、「やや太め」はもはや 400 から 700 への跳躍ではありません。450 や 480 でよいのです。暗い背景や小さなサイズのためにストロークを太らせつつ、カウンターを潰さない程度に。オプティカルサイズの軸は、利用できる場合、かつて書体デザイナーがサイズ別に活字を切り分けて行っていたことを自動で行います。小さなサイズではアパーチャを開き、字間を緩め、コントラストを下げ、大きなサイズでは引き締めます。書体が opsz を備えているなら、それを効かせてください — ブラウザはデフォルトでそうします — なぜならそれは、この章が推奨する小サイズ向けの調整を正確にコード化したものだからです。
傾きは、連続するテキストにとって依然として判読性のコストです。イタリックは強調のためのものであって、文章のまとまりのためのものではありません。オブリーク(傾けたローマン)は本物のイタリックより悪いものです。字形を再設計することなく歪めるだけだからです。
文字レベルの字間
画面上の文字は印刷よりゆとりある字間と行間を必要とする、という2005年の知見は、部分的には解像度がもたらした副産物でした — 緩い間隔が、粗いピクセルの文字どうしの癒着を防いでいたのです。しかしそれだけではありませんでした。クラウディングの研究は、詰め込みすぎた文字が周辺視野と低視力の視覚において認識を損なうことを示しており、ロービジョンの読者は小さなサイズでのやや緩い設定から本当に利益を得ます。WCAG 2.2 はこれをユーザーの側から認めています。達成基準 1.4.12(テキストの間隔)は、ユーザーが字間、語間、行間を広げてもコンテンツが損なわれないことを要求します。スタイル上の署名としての詰まった字間はディスプレイサイズなら構いません。本文サイズでは、それは視力の余裕が最も少ない読者への課税です。
CSS では
/* Preserve letterform quality across fallbacks */
body {
font-family: "Source Sans 3", system-ui, sans-serif;
font-size-adjust: 0.5; /* match fallback x-height to the web font */
font-kerning: normal;
}推奨事項
- 書体は分類ではなく構造で選別する。大きなエックスハイト、開いたアパーチャ、均一なストローク幅、中庸な字幅。
- 本文書体を決める前に、Il1 テストを適用し、b/d/p/q の区別を確認する。
- バリアブルフォントの軸を意図的に使う — 文脈に応じた小刻みなウエイトの増分、そして小さなサイズではオプティカルサイズ(opsz)に仕事をさせる。
- 連続するテキストは直立に保ち、傾きは強調のために取っておく。
- 本文サイズでは字間をニュートラルからやや緩めに設定し、WCAG 1.4.12 のユーザーによる間隔の上書きにレイアウトが耐えることを検証する。
- 高 DPI のディスプレイだけでなく、標準密度のディスプレイでもテストする。多くの読者にとって、ピクセルグリッドはいまも存在する。