このページは Cloud Translation API によって翻訳されました。

ウェブ上の可変フォントの概要

フォントファイルのサイズを大幅に削減できる新しいフォント仕様

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

この記事では、可変フォントとは何か、そのメリット、仕事で使用する方法について説明します。まずウェブでのタイポグラフィの仕組みと可変フォントによるイノベーションについて説明します

ブラウザの互換性

2020 年 5 月現在、可変フォントはほとんどのブラウザでサポートされています。可変フォントを使用できますか？とフォールバックをご覧ください。

はじめに

デベロッパーは、フォントと書体という用語を同じ意味で使用することがあります。ただし、違いもあります。書体は、さまざまな組版技術に存在する基盤となる視覚デザインであり、フォントは、デジタルファイル形式で実装された書体の 1 つです。つまり、書体は表示されるものであり、フォントは使用するものです。

見落とされがちな概念のもう 1 つは、スタイルとファミリーの違いです。スタイルは、太字斜体など、単一の特定の書体です。ファミリーは、スタイルの完全なセットです。

可変フォント以前は、各スタイルが個別のフォントファイルとして実装されていました。可変フォントを使用すると、すべてのスタイルを 1 つのファイルに含めることができます。

Roboto ファミリーのさまざまなスタイルの試聴音声とリスト — 左: Roboto 書体ファミリーの例。右: ファミリー内の名前付きスタイル。

デザイナーとデベロッパーの課題

デザイナーが印刷プロジェクトを作成する際には、ページレイアウトの物理的なサイズ、使用できる色の数（使用する印刷機の種類によって決まります）などの制約があります。ただし、書体スタイルはいくつでも使用できます。つまり、印刷メディアのタイポグラフィは豊富で洗練されたものが多く、とても快適に読むことができます。前回、優れた雑誌を閲覧できたときの状況についてお尋ねします。

ウェブデザイナーとデベロッパーには、印刷デザイナーとは異なる制約があります。その中で重要なのは、デザインに関連する帯域幅の費用です。費用がかかることから、より豊かなタイポグラフィエクスペリエンスの実現は難しかったのです。従来のウェブフォントでは、デザインで使用される各スタイルに別々のフォントファイルをダウンロードする必要があり、レイテンシとページのレンダリング時間が長くなります。通常のスタイルと太字のスタイル、およびその斜体スタイルのみを含めると、フォントデータのサイズは 500 KB を超える可能性があります。これは、フォントがレンダリングされる方法、使用する必要があるフォールバックパターン、FOIT や FOUT などの望ましくない副作用に対処する前の話です。

多くのフォントファミリーには、Thin から Black までのウェイト、狭い幅と広い幅、さまざまなスタイルの詳細、さらにはサイズ固有のデザイン（大きなテキストサイズまたは小さなテキストサイズ向けに最適化）など、幅広いスタイルが用意されています。スタイルごとに（またはスタイルの組み合わせごとに）新しいフォントファイルを読み込む必要があるため、多くのウェブデベロッパーはこれらの機能を使用せず、ユーザーの読みやすさを損ないます。

可変フォントの仕組み

可変フォントは、スタイルを 1 つのファイルにパッケージ化することで、これらの課題に対処します。

中央または「デフォルト」のスタイル（通常は「Regular」）から始めます。これは、通常の太さと幅で、プレーンテキストに最も適した直立したローマ字のデザインです。これらは、連続した範囲（「軸」）内の他のスタイルに接続されます。最も一般的な軸は [太さ] で、デフォルトのスタイルを [太字] スタイルに接続できます。個々のスタイルは軸に沿って配置でき、可変フォントの「インスタンス」と呼ばれます。インスタンスによっては、フォントデベロッパーが名前を付けています。たとえば、重み軸の位置 600 は SemiBold と呼ばれます。

可変フォント Roboto Flex には、太さ軸に 3 つのスタイルがあります。レギュラースタイルが中央にあり、軸の両端に 2 つのスタイルがあります。1 つは軽く、もう 1 つは重くなっています。これらのインスタンスは 900 種類から選択できます。

さまざまな太さの文字「A」 — 上記: タイポフェイス Roboto の太さ軸の解剖図。

フォントデベロッパーは、さまざまな軸のセットを提供できます。それらはすべて同じデフォルトスタイルを共有するため、組み合わせることができます。Roboto の幅軸には 3 つのスタイルがあります。Regular は軸の中央にあり、狭いスタイルと広いスタイルの 2 つのスタイルが両端にあります。これらは Regular スタイルのすべての幅を指定し、重み軸と組み合わせて、すべての重みのすべての幅を指定します。

幅と重量のランダムな組み合わせの Roboto Flex

つまり、何千ものスタイルが用意されています。これは過剰に思えるかもしれませんが、この多様な文字スタイルにより、読みやすさの質を大幅に高めることができます。パフォーマンスに影響がなければ、ウェブデベロッパーは、デザインに応じて、必要な数のスタイルを使用できます。

イタリック体

可変フォントでイタリックが処理される方法は興味深いものです。2 つの異なるアプローチがあります。Helvetica や Roboto などの書体には補間対応輪郭があるため、それらの書体間でローマ字と斜体のスタイルを補間し、傾斜軸を使用してローマ字から斜体に変換できます。

その他の書体（Garamond、Baskerville、Bodoni など）には、補間互換性のないローマ字とイタリックのグリフ輪郭があります。たとえば、通常はローマ字の小文字「n」を定義する輪郭は、斜体小文字「n」を定義するために使用される輪郭とは一致しません。Italic 軸は、一方の等高線をもう一方の等高線に補間する代わりに、ローマ字の等高線から斜体の等高線に切り替わります。

書体 Amstelvar の太さ軸の例 — Amstelvar の「n」の輪郭（イタリック（12 ポイント、レギュラー太さ、通常の幅）、ローマン）。画像提供: Font Bureau 書体デザイナー兼タイポグラファー David Berlow

斜体に切り替えた後、ユーザーが使用できる軸は、文字セットが同じであるように、ローマ字の軸と同じである必要があります。

グリフの置換機能は個々のグリフに対しても使用でき、可変フォント設計空間のどこでも使用できます。たとえば、縦棒が 2 つあるドル記号のデザインは、ポイントサイズが大きいほど最適ですが、ポイントサイズが小さいほど、棒が 1 本しかないデザインが適しています。グリフをレンダリングするピクセルが少ないと、2 棒デザインで判読が難しくなることがあります。これを回避するため、イタリック軸と同様に、タイポグラファーが決定したポイントで、光学サイズ軸に沿って、1 つのグリフを別のグリフに置き換えることができます。

要約すると、輪郭が許す限り、タイポグラフィデザイナーは、多次元のデザイン空間でさまざまなスタイルを補間するフォントを作ることができます。これにより、タイポグラフィをきめ細かく制御でき、大きな力を発揮できます。

軸の定義

5 つの登録軸があり、フォントに関する既知の予測可能な特徴（太さ、幅、光学サイズ、傾斜、斜体）を制御します。これらに加えて、フォントにはカスタム軸を含めることができます。これらの値により、タイポグラファーが希望するフォントのデザイン要素（セリフのサイズ、スワッシュの長さ、上付き文字の高さ、i の点のサイズなど）を制御できます。

軸は同じ特徴を制御できますが、異なる値を使用する場合があります。たとえば、Oswald と Hepta Slab の可変フォントでは、使用できる軸は「Weight」のみですが、範囲は異なります。Oswald は可変にアップグレードされる前の範囲（200～700）と同じですが、Hepta Slab は極細の 1 から 900 までです。

登録されている 5 つの軸には、CSS で値を設定する際に使用される 4 文字の小文字のタグがあります。

軸名と CSS 値
重量	`wght`
幅	`wdth`
斜	`slnt`
光学サイズ	`opsz`
斜体	`ital`

可変フォントで使用できる軸とその値はフォントデベロッパーが定義するため、各フォントで提供される内容を確認することが重要です。フォントに関するドキュメントに記載されているか、Wakamai Fondue などのツールを使用してフォントを確認できます。

ユースケースと利点

軸の値の設定は、個人の好みとタイポグラフィのベストプラクティスの適用に帰着します。新しいテクノロジーには不正使用の危険性があります。また、過度に芸術的な設定や探索的な設定も、実際のテキストの読みやすさを低下させる可能性があります。タイトルでは、さまざまな軸を探索して優れた芸術的なデザインを生み出すのは魅力的ですが、ボディコピーでは、テキストが読みづらくなる可能性があります。

エキサイティングな表現

芸術的表現の好例の 1 つが、Mandy Michael の書体 Decovar の探索です。

上記のサンプルの実用的なサンプルとソースコードは、こちらで確認できます。

アニメーション

Font Bureau のタイプデザイナー兼タイポグラファーである David Berlow がアニメーション用にデザインした書体 Zycon。

可変フォントで文字をアニメーション化することもできます。上記は、Zycon のさまざまな軸を使用した例です。Axis Praxis のアニメーション例をご覧ください。

Anicons は、マテリアルデザインアイコンに基づく、世界初のアニメーション化されたカラーアイコンフォントです。Anicons は、2 つの最先端のフォント技術（可変フォントとカラーフォント）を組み合わせたテストです。

Anicon のカラーアイコンフォントによるホバーアニメーションの例

Finesse

Amstelvar は、XTRA を反対方向に少しずつ使用して、単語の幅を均一にしています

Roboto Flex と Amstelvar には、一連の「パラメータ軸」が用意されています。これらの軸では、文字は形の 4 つの基本的な要素（黒または正の形、白または負の形、x と y のディメンション）に分解されます。プライマリカラーを他の色とブレンドして調整できるのと同じように、これらの 4 つの要素を使用して他の軸を微調整できます。

Amstelvar の XTRA 軸では、上記のように「白」の 1 万インプレッションあたりの値を調整できます。反対方向に XTRA を少しずつ使用することで、単語の幅を均一にします。

CSS の可変フォント

可変フォントファイルの読み込み

可変フォントは、従来の静的ウェブフォントと同じ @font-face メカニズムによって読み込まれますが、2 つの新しい機能が追加されています。

@font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex-VF.woff2') format('woff2-variations');
    src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

1. ソース形式: ブラウザが可変フォントに対応していない場合は、ブラウザがフォントをダウンロードしないようにするため、format と tech の説明を追加します。1 つは今後の構文（format('woff2') tech('variations')）で、もう 1 つは非推奨だがブラウザでサポートされている構文（format('woff2-variations')）で追加します。ブラウザが可変フォントと今後の構文をサポートしている場合は、最初の宣言が使用されます。変数フォントと現在の構文をサポートしている場合は、2 番目の宣言が使用されます。どちらも同じフォントファイルをポイントしています。

2. スタイル範囲: font-weight と font-stretch に 2 つの値が指定されています。このフォントが提供する太さをブラウザに伝える代わりに（例: font-weight: 500;）、フォントがサポートしている太さの「範囲」を指定できるようになりました。Roboto Flex の場合、重み軸の範囲は 100～1,000 で、CSS は軸の範囲を font-weight スタイルプロパティに直接マッピングします。@font-face で範囲を指定すると、この範囲外の値は最も近い有効な値に「制限」されます。幅軸の範囲は、font-stretch プロパティと同じ方法でマッピングされます。

Google Fonts API を使用している場合は、この処理はすべて自動的に行われます。CSS には適切なソース形式と範囲が含まれるだけでなく、可変フォントがサポートされていない場合に備えて、Google Fonts から静的フォールバックフォントも送信されます。

重みと幅を使用する

現在、CSS から確実に設定できる軸は、font-weight による wght 軸と font-stretch による wdth 軸です。

従来は、font-weight をキーワード（light、bold）として設定するか、100～900 の範囲で 100 刻みの数値として設定していました。可変フォントでは、フォントの幅の範囲内で任意の値を設定できます。

.kinda-light {
  font-weight: 125;
}

.super-heavy {
  font-weight: 1000;
}

Roboto Flex の重量軸が最小値から最大値に変更されています。

同様に、font-stretch はキーワード（condensed、ultra-expanded）または割合の値で設定できます。

.kinda-narrow {
  font-stretch: 33.3%;
}

.super-wide {
  font-stretch: 151%;
}

Roboto Flex の幅軸が最小から最大に変更されました。

斜体と斜体の使用

ital 軸は、標準スタイルと斜体スタイルの両方を含むフォント用です。軸はオン/オフのスイッチです。値 0 はオフで通常のスタイルになり、値 1 は斜体になります。他の軸とは異なり、遷移はありません。値を 0.5 に設定しても、「半角斜体」にはなりません。

slnt 軸は、新しいスタイルではなく、通常のスタイルを傾斜させるだけである点で、斜体とは異なります。デフォルトでは、値は 0 です。つまり、デフォルトの直立した文字の形になります。Roboto Flex の最大傾斜角は -10 度です。つまり、0 から -10 になると文字は右に傾きます。

これらの軸は font-style プロパティで設定するのが直感的ですが、2020 年 4 月時点では、具体的な方法はまだ検討中です。現時点では、これらをカスタム軸として扱い、font-variation-settings で設定する必要があります。

i, em, .italic {
    /* Should be font-style: italic; */
    font-variation-settings: 'ital' 1;
}

.slanted {
    /* Should be font-style: oblique 10deg; */
    font-variation-settings: 'slnt' 10;
}

Roboto Flex の傾斜軸が最小値から最大値に変更されています。

光学サイズを使用する

書体は、非常に小さい（12 ピクセルの脚注）または非常に大きい（80 ピクセルの見出し）ようにレンダリングできます。フォントは、サイズに合わせて文字の形状を変更することで、サイズの変化に対応できます。サイズが小さい場合は細かいディテールを省略できますが、サイズが大きい場合は、より細かいディテールや細いストロークが適しています。

さまざまな光学サイズで表示される文字「a」 — Roboto Flex の文字「a」をさまざまなピクセルサイズで表示し、同じサイズにスケーリングして、デザインの違いを示しています。 Codepen で実際に試す

この軸に新しい CSS プロパティ font-optical-sizing が導入されました。デフォルトでは auto に設定されているため、ブラウザは font-size に基づいて軸の値を設定します。つまり、ブラウザが最適な光学サイズを自動的に選択します。この機能をオフにするには、font-optical-sizing を none に設定します。

フォントサイズと一致しない光学サイズを意図的に設定する場合は、opsz 軸にカスタム値を設定することもできます。次の CSS では、テキストは大きなサイズで表示されますが、8pt で印刷された場合と同じ光学サイズで表示されます。

.small-yet-large {
  font-size: 100px;
  font-variation-settings: 'opsz' 8;
}

カスタム軸の使用

登録済みの軸とは異なり、カスタム軸は既存の CSS プロパティにマッピングされないため、常に font-variation-settings を使用して設定する必要があります。カスタム軸のタグは、登録済みの軸と区別するために常に大文字で入力します。

Roboto Flex にはいくつかのカスタム軸がありますが、最も重要なのは成績（GRAD）です。成績軸は幅を変更せずにフォントの太さを変更できるため、改行も変わりません。勾配軸を調整することで、全体的な幅に影響する重み軸の変更と、全体的な重みに影響する幅軸の変更を調整する必要がなくなります。

Roboto Flex のグレード軸が最小から最大に変更されました。

GRAD はカスタム軸で、Roboto Flex では -200 ～ 150 の範囲になります。font-variation-settings で対処する必要があります。

.grade-light {
    font-variation-settings: `GRAD` -200;
}

.grade-normal {
    font-variation-settings: `GRAD` 0;
}

.grade-heavy {
    font-variation-settings: `GRAD` 150;
}

Google Fonts の可変フォント

Google Fonts では、可変フォントを使用してカタログを拡大し、定期的に新しいフォントを追加しています。現時点では、このインターフェースはフォントから 1 つのインスタンスを選ぶことを目的としています。希望のバリエーションを選択して [このスタイルを選択] をクリックすると、Google Fonts から CSS とフォントを取得する <link> 要素にこのスタイルが追加されます。

使用可能なすべての軸、または値の範囲を使用するには、Google Fonts API への URL を手動で作成する必要があります。可変フォント概要には、すべての軸と値が一覧表示されます。

Google の変数フォントのリンクツールを使用すると、完全な可変フォントの最新 URL も確認できます。

フォントバリエーション設定の継承

登録済みのすべての軸はまもなく既存の CSS プロパティでサポートされますが、当面は font-variation-settings をフォールバックとして使用する必要があります。フォントにカスタム軸がある場合は、font-variation-settings も必要です。

ただし、font-variation-settings には注意点があります。明示的に設定しないプロパティはすべて、自動的にデフォルトにリセットされます。以前に設定した値は継承されません。つまり、次のようには動作しません。

<span class="slanted grade-light">
    I should be slanted and have a light grade
</span>

まず、ブラウザは .slanted クラスの font-variation-settings: 'slnt' 10 を適用します。次に、.grade-light クラスの font-variation-settings: 'GRAD' -200 が適用されます。ただし、これにより slnt はデフォルトの 0 にリセットされます。結果は、傾斜ではなく、低グレードのテキストになります。

幸い、CSS 変数を使用するとこの問題を回避できます。

/* Set the default values */
:root {
    --slnt: 0;
    --GRAD: 0;
}

/* Change value for these elements and their children */
.slanted {
    --slnt: 10;
}

.grade-light {
    --grad: -200;
}

.grade-normal {
    --grad: 0;
}

.grade-heavy {
    --grad: 150;
}

/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
    font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}

CSS 変数はカスケードされます。そのため、要素（またはその親のいずれか）で slnt が 10 に設定されている場合、GRAD を別の値に設定しても、その値は保持されます。この手法の詳細については、可変フォント継承の修正をご覧ください。

なお、CSS 変数のアニメーション化は（設計上）機能しないため、次のようなことはできません。

@keyframes width-animation {
   from { --wdth: 25; }
   to   { --wdth: 151; }
}

これらのアニメーションは font-variation-settings で直接行う必要があります。

パフォーマンスの向上

OpenType 可変フォントを使用すると、書体ファミリーの複数のバリエーションを 1 つのフォントファイルに保存できます。Monotype は、12 個の入力フォントを組み合わせて、斜体スタイルとローマスタイルの両方で 8 つの太さを 3 つの幅で生成するという実験を行いました。48 個の個別のフォントを 1 つの可変フォントファイルに保存することで、ファイルサイズを 88% 削減できます。

ただし、Roboto Regular などの単一のフォントだけを使用しており、それ以外は何も使用していない場合、多数の軸を持つ可変フォントに切り替えると、フォントサイズの実質的な増加が見られない可能性があります。いつものように、ユースケースによって異なります。

一方、設定間でフォントをアニメーション化すると、パフォーマンスの問題が発生する可能性があります。ブラウザでの可変フォントサポートが成熟すれば改善されますが、現在画面上にあるフォントのみアニメーション化することで、この問題をある程度軽減できます。Dinamo によるこの便利なスニペットは、vf-animation クラスの要素が画面に表示されていないときに、その要素のアニメーションを一時停止します。

var observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    // Pause/Play the animation
    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
    else entry.target.style.animationPlayState = "paused"
  });
});

var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });

フォントがユーザー操作に反応する場合は、入力イベントをスロットリングまたはデバウンスすることをおすすめします。これにより、人間の目では違いがわからないほど前回のインスタンスから変更されていない可変フォントインスタンスがブラウザでレンダリングされるのを防ぐことができます。

Google Fonts を使用している場合は、Google のフォントがホストされているドメインである https://fonts.gstatic.com に事前接続することをおすすめします。これにより、ブラウザは CSS でフォントを見つけたときに、フォント取得場所を早い段階で把握できます。

<link rel="preconnect" href="https://fonts.gstatic.com" />

このヒントは他の CDN にも当てはまります。ブラウザによるネットワーク接続の設定が早ければ早いほど、フォントのダウンロードも早くなります。

Google Fonts の読み込みに関するパフォーマンスに関するその他のヒントについては、Google Fonts を高速化する方法をご覧ください。

フォールバックとブラウザサポート

最新のブラウザはすべて可変フォントをサポートしています。古いブラウザをサポートする必要がある場合は、静的フォントでサイトを構築し、プログレッシブエンハンスメントとして可変フォントを使用できます。

/* Set up Roboto for old browsers, only regular + bold */
@supports not (font-variation-settings: normal) {
  @font-face {
    font-family: Roboto;
    src: url('Roboto-Regular.woff2');
    font-weight: normal;
  }

  @font-face {
    font-family: Roboto;
    src: url('Roboto-Bold.woff2');
    font-weight: bold;
  }

  body {
    font-family: Roboto;
  }

  .super-bold {
    font-weight: bold;
  }
}

/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Roboto';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
         url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
  }

  .super-bold {
    font-weight: 1000;
  }
}

古いブラウザでは、クラス .super-bold のテキストは通常の太字でレンダリングされます。これは、使用できる太字フォントがこれしかないためです。可変フォントがサポートされている場合、実際には最も太い 1, 000 の太さを使用できます。

@supports ルールは Internet Explorer でサポートされていないため、このブラウザではスタイル設定は表示されません。これが問題になる場合は、従来のハッキング手法のいずれかを使用して、関連する古いブラウザをターゲットにできます。

Google Fonts API を使用している場合は、訪問者のブラウザに適したフォントが自動的に読み込まれます。次のように、フォント Oswald の太さが 200 ～ 700 の範囲でリクエストされたとします。

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">

可変フォントに対応している最新のブラウザでは、可変フォントが取得され、200～700 のすべてのウェイトが使用可能になります。古いブラウザには、ウェイトごとに個別の静的フォントが提供されます。この場合、重み 200 用、重み 300 用など、6 つのフォントファイルがダウンロードされます。

ありがとう

この記事は、以下の方々のご協力により作成されました。

Mustafa Kurtuldu、Google の UX デザイナー兼デザインアドボケイト
Roel Nieskens、Kabisa の UX デザイナー / デベロッパー、タイポグラフィエキスパート
Google Fonts、プログラムマネージャー Dave Crossland
Font Bureau、タイプデザイナー兼タイポグラファー David Berlow
Laurence Penney、axis-praxis.org のデベロッパー
variablefonts.dev のデベロッパー、Mandy Michael

ヒーロー画像（Bruno Martins、Unsplash）