このページはAIの支援を受けて翻訳されました。正文は英語の原文です。
2005年のオリジナルの推奨は率直なものでした。連続したテキストは直立のローマン体で組むこと。傾いた字形はロービジョンの読者にとって識別しにくいからです。その後の20年間の画面レンダリングの改善、高解像度ディスプレイ、そしてより良い研究は、この助言を覆すことなく洗練させました。直立の書体は本文の正しいデフォルトであり続けています。変わったのは、「なぜか」についての理解と、傾いた書体が本当に有用なときにどうすべきかです。
傾きはひとつのものではありません。真のイタリックは独立したデザインであり、多くの場合、異なる字形の構造(一階建てのaとg、筆記体風の入り筆と抜き筆、より狭いプロポーション)を持ちます。オブリークは、直立のデザインを機械的または光学的に傾けたものです。そして合成された傾きは、イタリックのファイルが利用できないときにソフトウェアがでっち上げるものです。ブラウザーがローマン体のグリフを横方向にせん断するのです。この3つのケースは判読性のプロファイルが大きく異なりますが、2005年の本文はそれらをひとつとして扱っていました。
2005年から変わったこと
第1版は、イタリックを完全に避け、強調には太字を代用することを推奨していました。ヒント付きビットマップをレンダリングする96 DPIの画面では妥当な助言でした。傾いたストロークは階段状にエイリアスし、字形は本当に崩壊していたのです。サブピクセルおよびグレースケールのアンチエイリアシングを備えた現代の高密度ディスプレイでは、よく描かれたイタリックはきれいにレンダリングされ、短い範囲に対する全面的な禁止はもはや正当化されません。
ロービジョンの読者に奉仕する団体のガイダンスにも反映されている現在の合意は、釣り合いの取れたものです。連続したテキスト — 段落、長いキャプション、長い引用 — にはイタリックを避け、一方で伝統的な意味論上の役割 — 単語や句の強調、作品のタイトル、外国語の用語 — には受け入れる、というものです。問題は数語の傾いた単語であったことは一度もなく、何ページにもわたる傾いた文字だったのです。
もうひとつの大きな変化はバリアブルフォントです。OpenType のバリエーションは、おおよそ2018年以降すべての主要ブラウザーでサポートされ、ここに関係する2つの登録済みの軸を導入しました。slnt(スラント)は連続的な角度で、通常は負の度数で表現されます。ital(イタリック)は通常、ローマン体と真のイタリックの構造を切り替えるバイナリのスイッチです。CSSはこれらを font-style プロパティを通じて公開します。font-style: italic は ital 軸またはイタリックのファイルを選択すべきであり、font-style: oblique 8deg は、対応するフォントに特定の傾き角度を要求できます。これは2005年には端的に存在しなかった、精密で意図的な制御をデザイナーに与えます。
真のイタリック、オブリーク、合成された傾き
判読性の序列は一貫しています。真のイタリックはイタリックとして描かれています。ストロークは角度に合わせてバランスが取られ、カウンター(字腔)は開いたまま保たれ、字間は調整されています。タイプデザイナーが設計したオブリーク(グロテスク系サンセリフに多い)は一段下ですが、それでも意図的に補正されています — せん断で歪まないように曲線は描き直されています。合成された傾きは最悪のケースです。素朴なせん断は、あらゆる曲線の片側を細らせ、カウンターを閉じさせ、字間を乱します。その結果は、いかなるデザイナーの目にも一度も触れたことがないものなのです。
実践上の規則はこうです。フェイクのイタリックには決して頼らないこと。出荷する書体にイタリックがないなら、イタリックを読み込むか、イタリックのスタイル指定を一切使わないかのどちらかです。CSSでは、font-synthesis: none(または font-synthesis-style: none)がブラウザーのでっち上げの傾きを無効にし、イタリックの欠落は歪んだせん断ではなく直立体へのフォールバックとなります。フォントの読み込みを監査してください — 驚くほど多くの本番サイトが、実際には読み込まないイタリックスタイルを要求しており、そうした範囲のひとつひとつが合成された傾きでレンダリングされているのです。
ロービジョンへの配慮
2005年の核心的な観察は、視力の低下、中心視野の欠損、白内障によるぼやけのある読者に対して今も有効です。傾いた字形は、なじみの薄い形、より詰まって見える字間、そして — 筆記体風のイタリックでは — 読者が習熟してきたローマン体とは異なる文字の構造を提示します。WCAGはイタリックを禁止していませんが、ロービジョンのユーザーニーズに関連するガイダンスは一貫してその制限を勧めており、テキストを拡大して読む読者は、ぼやけの下ではイタリックが直立体よりも速く劣化すると報告しています。
太字は依然として強力な強調の代替手段であり、強調する内容が機能的に重要な場合 — 警告、重要用語、行動を促す句 — には、しばしばより良い選択です。ウエイトの変化は、傾きの変化よりも、ぼやけや低コントラストに強く生き残るからです。しかし太字とイタリックは意味論的に交換可能ではありません。イタリックはささやき、太字は叫びます。あらゆる強調に太字を使うページは、終始叫んでいるように読めます。分別あるパターンはこうです。読者が見逃してはならない情報には太字、慣習的なタイポグラフィ上の強調にはイタリック、そしてどちらも一度に句を超えて使わないこと。
さらに2つの注意があります。第一に、小さなサイズでのイタリックを避けること — おおよそ14ピクセルを下回ると、角度とカウンターの縮小があっという間に重なり合います。第二に、イタリックを他の判読性の低下要因と組み合わせないこと。イタリックとオールキャップス、イタリックとライトなウエイト、イタリックと低コントラスト。それぞれの劣化は単独なら耐えられますが、積み重なると耐えられません。
実践におけるバリアブル軸
バリアブルフォントが slnt 軸を提供している場合でも、本文で中間の角度を装飾的に使いたい誘惑には抗ってください。見出しへの穏やかな4度の傾きは正当なスタイル上の手法ですが、任意の傾き角度の本文はそうではありません。傾きをアニメーションさせる場合(ホバー状態や強調の遷移で行うインターフェイスもあります)、prefers-reduced-motion を尊重してください — 変形する字形は動きであり、前庭感覚の敏感な読者はそれを動きとして体験します。
また、バリアブルフォントのイタリックの挙動がCSSと一致していることも確認してください。slnt のみのバリアブルを出荷しているファミリーでは、font-style: italic が何も生まなかったり、間違ったインスタンスを生んだりすることがあります。明示的な font-variation-settings、あるいは font-style: oblique 0deg 10deg の範囲を持つ適切な font-face 宣言が、この曖昧さを解消します。
CSSでは
em, cite { font-style: italic; } /* short spans only */
/* Never let the browser fake an italic the family lacks */
body { font-synthesis-style: none; }
/* Variable slant, when the family offers the axis */
.aside { font-variation-settings: "slnt" -6; }推奨事項
- 連続したテキストはすべて直立体で組むこと。2005年の知見は有効です。
- 短い強調の範囲、タイトル、外国語の用語には真のイタリックを許容すること — 句であって、段落ではありません。
- 強調する内容が機能的に重大な場合は、イタリックより太字を優先すること。
- 合成された傾きを決して出荷しないこと。本物のイタリックのファイルを読み込むか、font-synthesis-style: none を設定すること。
- イタリックが生のせん断ではなく補正されたデザインである書体を選ぶこと。
- 約14px未満でのイタリックを避け、イタリックをオールキャップス、ライトなウエイト、低コントラストと決して重ねないこと。
- バリアブルフォントでは、意味論には ital 軸または適切なイタリックのインスタンスを使うこと。slnt 軸はディスプレイ用の手法として扱い、アニメーションさせるなら prefers-reduced-motion を尊重すること。