このページはAIの支援を受けて翻訳されました。正文は英語の原文です。
ウェブタイポグラフィの最初の20年間、書体とは凍結されたインスタンスの集合でした。レギュラー、イタリック、ボールド、予算が許せばライトとブラック。そのあいだの選択はすべて、固定された点のあいだの選択でした。バリアブルフォント — 2016年に OpenType Font Variations とともに導入され、いまや主要なブラウザすべてでサポートされています — は、その点を連続的な範囲に置き換えます。ひとつのファイルがデザインスペース全体を含み、タイポグラファーも、スタイルシートも、読者も、その中の任意の位置を選べるのです。
これがアクセシビリティにとって重要なのは、この出版物が推奨してきた調整の多く — 小さなサイズでのわずかなウエイトの追加、ロービジョンの読者のためのやや広い字幅、不利な条件でのより頑丈な字形 — が、ファウンドリーがたまたまその正確なインスタンスを用意していない限り、以前は不可能だったからです。いまや、それらは数値です。
軸
バリアブルフォントは、名前のついたバリエーションの軸を公開します。OpenType 仕様には5つが登録されています。
- wght(ウエイト) — 100刻みの段階ではなく、ヘアラインからブラックまで連続。
- wdth(字幅) — 機械的な拡大縮小による歪みなしに、コンデンスドからエクステンデッドまで。
- opsz(オプティカルサイズ) — 読まれるサイズに適応した字形。
- slnt(スラント) と ital(イタリック) — 傾きの角度と、本物のイタリック字形への切り替え。
font-weight、font-stretch、font-style、font-optical-sizing — に対応しており、スタイルが予測可能にカスケードし組み合わさるよう、低レベルの font-variation-settings よりもこれらを優先すべきです。
オプティカルサイズ — 古い道具の帰還
オプティカルサイズは新しいものではありません。とても古いものであり、デジタルの書体からそれが欠けていたことのほうが異常でした。金属活字では、各サイズは別々に彫られ、父型彫刻師が補正を施しました。小さなサイズには頑丈なストローク、広い字間、大きなエックスハイト、開いたカウンターを。ディスプレイサイズには繊細なコントラストと詰まった字間を。写植とそれに続くデジタルフォントはこれを放棄し、ひとつのマスターをあらゆるサイズに拡大縮小しました — 小さなデジタルテキストの多くが細く、詰まって感じられてきたのはこのためです。
opsz 軸がこの実践を復活させます。オプティカルサイズ軸を備えたよくできたバリアブルフォントは、font-optical-sizing: auto が有効なとき(これがデフォルトです)、キャプションサイズのテキストを頑丈で開いた字形で、見出しのテキストを洗練とともに、自動的にレンダリングします。範囲の「小さく、負荷の高い」端で生きるロービジョンの読者にとって、これは直接的な判読性の利得であり、デザイナーに求められるコストは、それをサポートするフォントを選ぶことだけです。
グレード — リフローなきウエイト
グレード軸は、グリフの幅を変えることなくストロークの濃さを変えます。この区別こそがすべてです。font-weight を調整すると文字の幅が変わり、したがってテキストがリフローしますが、グレードの調整はそうなりません。テキストは視覚的に重くも軽くもなり、しかもすべての改行位置はそのままです。
前章では、暗い面の上の明るいテキストは、白の上の同じ活字より太く見えることを指摘しました。グレードはその補正のための精密な楽器です。ダークモードでグレードをわずかに下げれば、2つのテーマは見かけのウエイトで一致し、読者がテーマを切り替えてもレイアウトシフトは起こりません。グレードはホバーや選択状態にも、また活字を意図より重く、あるいは軽くレンダリングするディスプレイ間の補正にも、同じように役立ちます。
パフォーマンスはアクセシビリティである
かつて6つも8つものフォントファイルを必要としたファミリーが、1つか2つ(ローマンとイタリック)で出荷できます。バリアブルファイルはどの単一の静的インスタンスよりも大きいものの、それが置き換えるインスタンスの合計よりはほぼ常に小さく、ネットワークリクエストも少なくて済みます。遅い回線とささやかなデバイスの読者 — アクセシビリティの仕事が仕える読者層と大きく重なる人々 — にとって、これは見えないテキストやフォールバックのテキストを見つめる時間が減り、ウェブフォントがようやく届いたときの耳障りな入れ替わりが減ることを意味します。サブセット化と現代的な圧縮形式が、コストをさらに下げます。
アクセシビリティの配当を伴うデザイン上の利点もあります。すべてのウエイトが利用できるとき、デザイナーは擬似ボールドと擬似イタリックを間に合わせに使うことをやめ、それが唯一読み込まれていたファイルだったというだけの理由で細すぎるウエイトを選ぶこともやめるのです。
パーソナライゼーション — より大きな約束
最も深い機会は、いまなおほとんど実現されていません。読者に活字を調律させることです。バリアブルフォントの上に築かれた読書アプリケーションや長文サイトは、ウエイトのスライダー、字幅の調整、間隔のコントロールを提供できます — 連続的で、即時で、可逆的に。デフォルトのウエイトを細いと感じるロービジョンの読者は、「ノーマル」と「ボールド」の二択ではなく、好みに合わせて太くできます。年配の読者は字形をわずかに広げられます。これらはまさに、ロービジョン研究が長らく有効だと示唆してきた調整であり、バリアブルフォントはその提供を安価にします。
これを行うサイトはまだ少なく、そのための標準的なインターフェイスも存在しません。しかし技術的な障壁は崩れました。この出版物の立場は、読者が調律できる活字こそ画面のタイポグラフィが向かうべき場所だ、というものです。デザイナーはよく考え抜かれたデフォルトを設定し、読者はそこから離れてよいのです。
この章が新設された理由
初版が世に出たとき、ウェブページはそもそもフォントを確実に埋め込むことができませんでした — タイポグラフィとは、読者のマシンにインストールされたひと握りの書体から選ぶことを意味しました。ウェブフォントの埋め込みは2010年頃に到来し、バリアブルフォントは2016年に仕様化され、その後数年で広範なブラウザサポートに達しました。スタイルシートがウエイトを 435 と指定できるという発想も、オプティカルサイズがファイル内の軸を通じて金属活字の時代から帰還するという発想も、書かれるべきものとして存在すらしていなかったのです。
CSS では
body {
font-optical-sizing: auto; /* opsz: text forms at text sizes */
}
@media (prefers-color-scheme: dark) {
/* grade trims dark-mode weight bloom without reflow */
body { font-variation-settings: "GRAD" -20; }
}推奨事項
- 新しいプロジェクトではバリアブルフォントを選ぶ。静的ファイルの山ではなく、ローマン1ファイルとイタリック1ファイルを出荷する。
- 多くのサイズでテキストを組むインターフェイスには、オプティカルサイズ軸を持つ書体を選び、
font-optical-sizing: autoを有効のままにしておく。 - (利用できる場合)グレード軸を使い、リフローを起こさずにダークモードでの見かけのウエイトを補正する。
- 可能な限り、生の
font-variation-settingsではなく高レベルの CSS プロパティ(font-weight、font-stretch)を使う。 - 擬似ボールドと擬似イタリックには決して頼らない。バリアブルファイルは本物の字形を利用可能にする。
- 長文の読書がプロダクトであるなら、読者にウエイトと字幅の直接的なコントロールを提供することを検討する — そしてその選択を記憶する。