このページはAIの支援を受けて翻訳されました。正文は英語の原文です。
ウエイトに関する2005年の指針は簡潔かつ正確でした。テキストはレギュラーからやや太めのウエイトで組むこと。細い書体は避けること — そのストロークはロービジョンの読者にとってコントラストが足りません。そしてヘビーからブラックの書体も避けること — 閉じたカウンターは誰にとっても判読性を損ないます。20年経っても、目標は動いていません。変わったのはその周囲のすべてです。ウエイトはいまや2つか3つのカットのメニューではなく連続変数となり、ダークインターフェイスがウエイトを文脈依存のものにし、そして流行は、この章が警告するまさにその方向へと、この間の大半を費やしてインターフェイスのタイポグラフィを引っ張ってきました。
2005年から変わったこと
2005年には、ウエイトは離散的な選択でした。ファミリーはレギュラーとボールド、ことによるとライトとブラックを備えて出荷され、デザイナーはそのひとつを選びました。バリアブルフォントはその制約を溶かしました。wght 軸はウエイトを連続体として公開します。典型的には100から900までで、CSSから font-weight または font-variation-settings で指定できます。「レギュラーからやや太め」は、もはや400から700への急転換ではありません — ライトモードの本文には430、暗い背景では380、補強が必要な小さなラベルには500、といった指定が可能です。推奨は生き残り、それを実行できる精度が新しくなったのです。
さらに進んで、グレード軸(GRAD)を公開するファミリーもあります。Google の Roboto Flex などのファミリーによって広まった慣行です。グレードは文字幅を変えずにストロークの太さを変えるため、調整してもテキストはリフローしません。この違いは、ウエイトがレイアウトを動かさずに文脈 — ダークモード、ホバー状態、レンダリングの差異 — に応答しなければならないあらゆる場面で重要です。
第二の変化は、prefers-color-scheme で問い合わせ可能な、第一級のモードとしてのダークインターフェイスの台頭です。ウエイトと極性は相互作用しますが、明るい地に暗い文字がほぼ普遍的だった時代に書かれた2005年のガイドラインは、これを扱う必要がありませんでした。
ダークモードとウエイト補正
暗い地の上の明るいテキストは、ポジティブ極性の同じテキストより太く読めます。明るいストロークは暗い周囲に対して膨張して見えます — この効果は一般にハレーション、つまり明るい領域からの光の広がりとして説明され、発光型の画面で、また乱視や光の散乱を伴う状態の読者において顕著です。明るい地に暗い文字で正しく見えるよう調整された書体は、暗い地に明るい文字ではわずかに膨らんでぼやけて見えます。カウンターは詰まり、小さなサイズでは文字がつぶれ始めます。
実践的な補正は、ダークモードでウエイトをわずかに減らすことです。バリアブルの wght 軸があれば、本文を20〜50ユニット程度 — たとえば400から370へ — 下げることで、意図したストローク密度が回復します。GRAD 軸がある場合はそちらのほうが良い道具です。負のグレードはリフローなしにストロークを細くします。まさにグレードが設計された目的のユースケースです。スタティックなファミリーには良い調整手段がなく、そのこと自体が、両方のカラースキームに取り組むプロダクトにおけるバリアブルフォントの採用理由になります。
ダークモードには、関連する第二の調整があります。純黒の上の純白のテキストはハレーションを最大化します。わずかに和らげた前景(オフホワイト)と、持ち上げられた暗い面は、コントラストを実質的に犠牲にすることなくまぶしさを減らします。ウエイト補正と明度の緩和は連携して機能します。
細いウエイトの問題
この章が行う最も強い改訂は、ルールそのものではなく、その緊急性についてです。2005年には、細い文字はレンダリングできないがゆえに稀でした — 96 DPIの画面ではヘアラインのストロークは単に消えたのです。高密度ディスプレイがウルトラライトのウエイトをレンダリング可能にすると、流行はただちに追随しました。シンやエクストラライトのウエイトは、ブランディング、インターフェイス、大きなディスプレイテキストにおけるエレガンスとモダンさの記号になったのです。
レンダリングできることは、読めることではありません。デザイナーの高DPI画面で生き残る200ウエイトのストロークは、標準密度のモニターで劣化し、低いディスプレイ輝度や強めのナイトシフトフィルターの下でさらに薄れ、ロービジョンの読者にとっては有用なストロークコントラストの閾値を完全に下回りかねません。細い文字は、すべての読者が優れた視力と高級な画面と最大輝度を持っているという、積み重ねられた賭けです。測定されたコントラスト比もまた、細い文字の実際の性能を過大に示します。WCAGの計算式は前景色と背景色を比較しますが、ストローク幅を考慮しないため、100ウエイトの書体は、同じ色の400ウエイトの書体よりはるかに使い物にならないコントラストしか提示していないのに、技術的には4.5:1に合格しうるのです。WCAG 3.0ドラフトに供給されているAPCAの研究は、まさにこのギャップに取り組んでいます。そのモデルはコントラスト、サイズ、ウエイトを相互作用する変数として扱い、より細く小さなテキストにはより厳しい明度コントラスト要件を課します。この進行方向は2005年の直感を裏付けています。現行の計算式がそう言うかどうかにかかわらず、ウエイトはコントラストの一部なのです。
もう一方の極については、あらためて争う必要はあまりありません。ヘビーやブラックのウエイトは、本文サイズでは依然としてカウンターを閉じさせ、字形を融合させます。それらはディスプレイ用の道具のままです。ボールドは強調と階層のための正当な役割を保持しています — WCAG自体も、大きなテキストのコントラスト閾値をレギュラーの18ptに対して太字では14ptに引き下げることで、ボールドの寄与を認めています。
実践におけるウエイト
現代的なウエイトの方針は次のようになります。本文はおおよそ400から500の間に置き、ファミリーごとに選びます — 400では細めに描かれていて450のほうがよく読める書体もあります。強調は本文のウエイトから200〜300ユニット引き上げ、曖昧ではなく明白なものにします。ダークモードでは wght、望ましくは GRAD で控えめに差し引きます。本文サイズでは約300未満のものを一切登場させず、ディスプレイサイズでそれを下回るものは、現実的な輝度の標準密度画面で確認します。バリアブルフォントが利用できない場合は、これらの目標に最も近いスタティックなカットを適用し、ダークモードの補正は代わりに色の緩和に切り替えます。
CSSでは
body { font-weight: 400; }
strong { font-weight: 600; } /* semibold beats bold for emphasis */
@media (prefers-color-scheme: dark) {
/* light-on-dark reads heavier — pull back with a variable axis */
body { font-variation-settings: "GRAD" -20; }
}推奨事項
- 本文は400〜500の範囲に保ち、利用可能ならバリアブルの wght 軸で書体ごとに調整すること。
- ダークモードではウエイトをわずかに減らすこと。ファミリーが提供している場合はGRAD軸を優先すること。グレードの変更はテキストをリフローさせません。
- ダークモードでは純白と純黒の組み合わせを和らげ、ハレーションを抑えること。
- おおよそ300未満のウエイトはディスプレイ専用として扱い、標準密度の画面で検証すること。連続したテキストには決して使わないこと。
- 本文サイズでのヘビーからブラックのウエイトを避けること。ボールドは本文ウエイトから200〜300ユニット上の、意図的な強調の一段として使うこと。
- WCAGのコントラスト比に合格したからといって細いストロークを容認しないこと — WCAG 3.0ドラフトの背後にあるAPCAの研究が明示するとおり、ウエイトは実効的なコントラストの一部です。