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

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

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

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

この記事では、可変フォントの概要、メリット、作業での活用方法について説明します。まずウェブでのタイポグラフィの仕組みと可変フォントがもたらすイノベーションを確認しましょう

ブラウザの互換性

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

はじめに

デベロッパーの間では、フォントと書体という用語が同じ意味で使用されていることがよくあります。ただし、違いがあります。書体は、さまざまなタイプセット技術に存在する基本的なビジュアルデザインであり、フォントはデジタルファイル形式での実装の一つです。つまり、書体とはユーザーが見るもので、フォントとはユーザーが使用するものです。

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

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

Roboto ファミリーの試料構成とさまざまなスタイルのリスト — 左: Roboto 書体ファミリーのサンプル。右: ファミリー内の名前付きスタイル。

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

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

ウェブデザイナーとデベロッパーには、印刷デザイナーとは異なる制約があります。重要なのは、デザインに関連する帯域幅コストです。これは、コストがかかるため、より豊かなタイポグラフィエクスペリエンスの難点となっています。従来のウェブフォントでは、デザインで使用されるスタイルごとに、ユーザーが個別のフォントファイルをダウンロードする必要があるため、レイテンシとページレンダリング時間が長くなります。Regular と Bold のスタイルと、それに対応する斜体を含めた場合、フォントデータは 500 KB 以上になります。これは、フォントのレンダリング方法、使用する必要があるフォールバックパターン、FOIT や FOUT などの望ましくない副作用を扱う前の段階です。

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

可変フォントの構造

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

これは、中央のスタイルまたは「デフォルト」スタイル（通常は「Regular」）から始めることで機能します。これは、書式なしテキストに最も適した典型的な太さと幅を持つ直立ローマ字のデザインです。これは、「軸」と呼ばれる連続した範囲の他のスタイルに接続されます。最も一般的な軸は重みで、デフォルトのスタイルを太字スタイルに接続できます。個々のスタイルは軸に沿って配置できます。可変フォントの「インスタンス」と呼ばれます。一部のインスタンスには、フォントデベロッパーによって名前が付けられています。たとえば、体重軸の場所 600 はセミボールと呼ばれます。

変数フォント Roboto Flex には、体重軸に 3 つのスタイルがあります。Regular スタイルは中央にあり、軸の両端には 2 つのスタイル（1 つは明色、もう 1 つは重いもの）があります。次の 900 個のインスタンスから選択できます。

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

幅と高さのランダムな組み合わせの Roboto Flex

つまり、何千ものスタイルがあります。これは、過剰に思えるかもしれませんが、このような多様な書体によって、読書エクスペリエンスの質が大幅に向上します。また、パフォーマンスが損なわれないのであれば、ウェブデベロッパーは好みのスタイルを使用できます。これはデザイン次第です。

イタリック体

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

その他の書体（Garamond、Baskerville、Bodoni など）には、補間と互換性のないローマ字や斜体のグリフ輪郭があります。たとえば、ローマ数字の小文字の「n」を定義する輪郭が、斜体の小文字の「n」の定義に使用される輪郭と一致しません。斜体軸は、一方の輪郭が他方の輪郭に補間されるのではなく、ローマ字から斜体の輪郭に切り替わります。

書体 Amstelvar の重み軸の例 — アムステルバールの「n」という等高線の斜体（12 ポイント、通常の太さ、通常の幅）とローマ字。画像提供: フォントビューローのタイプデザイナー兼タイポグラファー、David Berlow

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

グリフ置換機能は個々のグリフでも使用でき、可変フォントのデザインスペースの任意の場所で使用できます。たとえば、2 本の垂直バーがあるドル記号のデザインは、ポイントのサイズが大きいほど効果的ですが、ポイントサイズが小さいほど、棒が 1 つしかないデザインが適しています。グリフをレンダリングするピクセルが少ない場合、2 本バーのデザインは判読できなくなる可能性があります。これに対処するため、斜体軸と同様に、Optical Size 軸に沿ってタイプデザイナーが決定した点でグリフを別のグリフに置換できます。

要約すると、タイプデザイナーは、輪郭によって許容される範囲で、多次元のデザイン空間のさまざまなスタイル間を補間するフォントを作成できます。これにより、タイポグラフィを細かく制御でき、非常に強力です。

軸の定義

5 つの登録軸があり、フォントの既知の予測可能な機能（太さ、幅、光学サイズ、傾斜、斜体）を制御します。それに加えて、フォントにはカスタム軸を含めることができます。これにより、タイプデザイナーが希望するフォントのデザイン要素（セリフのサイズ、スワッシュの長さ、アセンダーの高さ、i のドットのサイズなど）を制御できます。

軸は同じ対象物をコントロールできますが、異なる値が使用されることがあります。たとえば、Oswald と Hepta Slab の変数フォントでは 1 つの軸（ウェイト）しか使用できませんが、範囲は異なります。Oswald の範囲は、可変にアップグレードされる前と同じ 200 から 700 ですが、Hepta Slab の極端な髪の太さは 1 で、最大で 900 になります。

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

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

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

ユースケースと利点

軸の値の設定は、個人の好みと、タイポグラフィのベストプラクティスの適用に応じて決まります。新しいテクノロジーが悪用される危険性があります。また、過度に芸術的であったり探索的だったりする設定によって、実際のテキストの読みやすさが低下する可能性もあります。タイトルの場合、さまざまな軸を模索して優れた芸術的なデザインを作成することは楽しいですが、本文のコピーではテキストが読みにくくなるリスクがあります。

ワクワクする表情

芸術表現の良い例の 1 つは、Mandy Michael による書体 Decovar の調査です。

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

アニメーション

Typeface Zycon は、フォントビューローのタイプデザイナー兼タイポグラファーである David Berlow 氏がアニメーションのためにデザインしました。

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

アニコンは、マテリアルデザインアイコンをベースにした世界初のアニメーションカラーアイコンフォントです。アニコンは、可変フォントとカラーフォントという 2 つの最先端のフォント技術を組み合わせた試験運用版です。

Anicon のカラーアイコンフォントを使用したホバーアニメーションの例

フィネス

Amstelvar: XTRA を逆方向に少し使用し、単語の幅を均等にする

Roboto Flex と Amstelvar では、「パラメトリック軸」のセットが用意されています。これらの軸では、文字は 4 つの基本的な形状（黒または正の形状、白または負の形状、x 次元と y 次元）に分解されます。プライマリカラーを他の色とブレンドして調整できるのと同様に、これらの 4 つのアスペクトを使用して他の軸を微調整できます。

アムステルバールの XTRA 軸を使用すると、上記のように「白」のパーミル値を調整できます。少しずつ 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 の説明を追加します。将来の構文（format('woff2') tech('variations')）に 1 回、非推奨だがブラウザ間でサポートされている構文（format('woff2-variations')）に 1 回追加します。ブラウザが可変フォントをサポートし、次の構文をサポートしている場合は、最初の宣言が使用されます。可変フォントと現在の構文をサポートしている場合は、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 を使用している場合、この処理はすべて行われます。Google Fonts では、適切なソース形式と範囲が CSS に含まれるだけでなく、可変フォントがサポートされていない場合は静的な代替フォントも送信されます。

太さと幅の使用

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

従来は、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 を入手することもできます。

Font-variation-settings の継承

登録されたすべての軸はまもなく既存の 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 変数はカスケードされるため、要素（またはその親の 1 つ）が slnt を 10 に設定している場合は、GRAD を他の値に設定しても、その値が維持されます。この手法の詳細については、可変フォントの継承を修正するをご覧ください。

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

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

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

パフォーマンスの向上

OpenType 可変フォントを使用すると、タイプファミリーの複数のバリエーションを 1 つのフォントファイルに保存できます。Monotype は、12 個の入力フォントを組み合わせて 3 つの幅、斜体とローマ字の両方のスタイルで 8 つの太さを生成するテストを実施しました。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 でサポートされていないため、このブラウザではスタイルが表示されません。これが問題となる場合は、oldschool ハックのいずれかを使用して、関連する古いブラウザをターゲットにすることをおすすめします。

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

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

可変フォントを処理できる最新のブラウザは可変フォントを取得し、200 ～ 700 のすべての太さを使用できます。古いブラウザでは、太さごとに静的フォントが個別に配信されます。この場合、6 つのフォントファイル（1 つは太さ 200、もう 1 つは太さ 300 など）がダウンロードされます。

ありがとう

この記事は、以下の人々の協力がなければ成し遂げられなかったでしょう。

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

ヒーロー画像（作成者: Bruno Martins、Unsplash）