フォントの代替機能の改善

Katie Hempenius
Katie Hempenius
X

概要

この記事では、フォント フォールバックと size-adjust、ascent-override、descent-override、line-gap-override API について詳しく説明します。これらの API を使用すると、ローカルフォントを使用して、ウェブフォントの大きさに近い、または完全に一致する代替フォントフェイスを作成できます。これにより、フォント スワップによるレイアウトのずれを軽減または排除できます。

この記事を読まなくても、これらの API をすぐに使い始めるためのツールをいくつかご紹介します。

フレームワーク ツール:

  • @next/font: Next 13 以降、next/font はフォント指標のオーバーライドと size-adjust を自動的に使用して、一致するフォント フォールバックを提供します。
  • @nuxtjs/fontaine: Nuxt 3 以降では、nuxt/fontaine を使用して、Nuxt アプリで使用されるスタイルシートに一致するフォント フォールバックが自動的に生成され、挿入されます。

フレームワーク以外のツール:

  • Fontaine: Fontaine は、フォント指標のオーバーライドを使用するフォントの代替を自動的に生成して挿入するライブラリです。
  • このリポジトリには、Google Fonts でホストされているすべてのフォントに対するフォント指標のオーバーライドが含まれています。これらの値はコピーしてスタイルシートに貼り付けることができます。

背景

代替フォントは、プライマリ フォント フェースがまだ読み込まれていない場合や、ページ コンテンツのレンダリングに必要なグリフが不足している場合に使用されるフォント フェースです。たとえば、次の CSS は、"Roboto" のフォント フォールバックとして sans-serif フォント ファミリーを使用することを示しています。

font-family: "Roboto" , sans-serif;

代替フォントを使用すると、テキストをより速くレンダリングできます（font-display: swap を使用）。その結果、ページ コンテンツをより早く読みやすく、有用にできます。ただし、これまでは、レイアウトの不安定さがその代償となっていました。代替フォントがウェブフォントと入れ替わると、レイアウトがずれるのが一般的でした。ただし、以下で説明する新しい API では、対応するウェブフォントと同じスペースを占める代替フォント フェースを作成できるため、この問題を軽減または排除できます。

フォント フォールバックの改善

フォント フォールバックの「改善」を生成するためのアプローチは 2 つあります。より簡単なアプローチでは、フォント指標オーバーライド API のみを使用します。より複雑（ただしより強力）なアプローチでは、フォント指標のオーバーライド API と size-adjust の両方を使用します。この記事では、この両方の方法について説明します。

フォント指標のオーバーライドの仕組み

はじめに

フォント指標のオーバーライドを使用すると、フォントの上昇、下降、行間隔をオーバーライドできます。

  • 上昇は、フォント グリフがベースラインから延びる最長距離を測定します。
  • Descent は、フォント グリフがベースラインの下方に延びる最長距離を測定します。
  • 行ギャップは「リーディング」とも呼ばれ、連続するテキスト行間の距離を示します。

フォントの上昇、降下、ラインギャップを示す図。

フォント指標のオーバーライドを使用すると、代替フォントの上昇、下降、行間隔をオーバーライドして、ウェブフォントの上昇、下降、行間隔と一致させることができます。その結果、ウェブフォントと調整済みの代替フォントは常に同じ縦方向の寸法になります。

フォント メトリックのオーバーライドは、次のようなスタイルシートで使用されます。

body {
    font-family: Poppins, "fallback for poppins";
}

@font-face {
    font-family: "fallback for poppins";
    src: local("Times New Roman");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

この記事の冒頭に記載されているツールを使用すると、正しいフォント メトリック オーバーライド値を生成できます。ただし、これらの値は自分で計算することもできます。

フォント指標のオーバーライドの計算

次の式は、特定のウェブフォントに対するフォント メトリック オーバーライドを生成します。フォント指標のオーバーライドの値は、小数ではなく割合（105% など）で記述する必要があります。

ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm

たとえば、Poppins フォントの場合、フォント指標のオーバーライドは次のようになります。

/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/

ascent-override: 105%;  /* = 1050/1000 */
descent-override: 35%;  /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */

ascent、descent、line-gap、unitsPerEm の値はすべて、ウェブフォントのメタデータから取得されます。この記事の次のセクションでは、これらの値を取得する方法について説明します。

フォント テーブルの読み取り

フォントのメタデータ（特にフォント テーブル）には、フォント指標のオーバーライドの計算に必要なすべての情報が含まれています。

FontForge の [Font Information] ダイアログ ボックスのスクリーンショットダイアログ ボックスには、「Typo Ascent」、「Typo Descent」、「Typo Line Gap」などのフォント メトリックが表示されます。
FontForge を使用してフォント メタデータを表示する

フォントのメタデータを読み取る際に使用できるツールは次のとおりです。

  • fontkit は、Node.js 用に構築されたフォント エンジンです。こちらのコード スニペットは、fontkit を使用してフォント指標のオーバーライドを計算する方法を示しています。
  • Capsize は、フォントのサイズ設定とレイアウトに関するライブラリです。Capsize には、さまざまなフォント メトリックに関する情報を取得するための API が用意されています。
  • fontdrop.info は、ブラウザからフォントテーブルなどのフォント関連情報を確認できるウェブサイトです。
  • Font Forge は、一般的なデスクトップ フォント エディタです。ascent、descent、line-gap を表示するには、Font Info ダイアログを開き、OS/2 メニューを選択して、[Metrics] タブを選択します。UPM を表示するには、Font Info ダイアログを開いて [General] メニューを選択します。

フォント テーブルについて

「上昇」などのコンセプトは、複数の指標で参照されています。たとえば、hheaAscent、typoAscent、winAscent の指標があります。これは、オペレーティング システムによってフォント レンダリングのアプローチが異なるためです。OSX デバイスのプログラムは通常 hhea* フォント メトリックを使用しますが、Windows デバイスのプログラムは通常 typo*（sTypo* とも呼ばれます）または win* フォント メトリックを使用します。

フォント、ブラウザ、オペレーティング システムに応じて、フォントは hhea、typo、win のいずれかの指標を使用してレンダリングされます。

Mac Windows
Chromium 「hhea」テーブルの指標を使用します。 「USE_TYPO_METRICS」が設定されている場合は「typo」テーブルの指標を使用し、そうでない場合は「win」テーブルの指標を使用します。
Firefox 「USE_TYPO_METRICS」が設定されている場合は「typo」テーブルの指標を使用し、そうでない場合は「hhea」テーブルの指標を使用します。 「USE_TYPO_METRICS」が設定されている場合は「typo」テーブルの指標を使用し、そうでない場合は「win」テーブルの指標を使用します。
Safari 「hhea」テーブルの指標を使用します。 「USE_TYPO_METRICS」が設定されている場合は「typo」表の指標を使用し、設定されていない場合は「win」表の指標を使用します。

オペレーティング システム間でのフォント指標の動作について詳しくは、縦方向の指標に関するこちらの記事をご覧ください。

クロスデバイスへの対応

ほとんどのフォント（Google Fonts でホストされているフォントの約 90% など）では、ユーザーのオペレーティング システムを知らなくてもフォント メトリックのオーバーライドを安全に使用できます。つまり、これらのフォントでは、hhea、typo、win のいずれのメトリックが適用されるかにかかわらず、ascent-override、descent-override、linegap-override の値はまったく同じになります。このリポジトリには、このリポが適用されるフォントと適用されないフォントに関する情報が提供されています。

OSX デバイスと Windows デバイスで別々のフォント メトリック オーバーライド セットを使用する必要があるフォントを使用している場合は、ユーザーのオペレーティング システムに基づいてスタイルシートを変更できる場合にのみ、フォント メトリック オーバーライドと size-adjust を使用することをおすすめします。

フォント指標のオーバーライドの使用

フォント指標のオーバーライドは、代替フォントではなくウェブフォントのメタデータから取得された測定値を使用して計算されるため、代替フォントとしてどのフォントが使用されているかにかかわらず、オーバーライドは変わりません。例:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: "fallback for Poppins";
  src: local("Arial");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: "another fallback for Poppins";
  src: local("Roboto");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

サイズ調整の仕組み

はじめに

size-adjust CSS 記述子は、フォント グリフの幅と高さを比例してスケーリングします。たとえば、size-adjust: 200% はフォント グリフを元のサイズの 2 倍に拡大し、size-adjust: 50% はフォント グリフを元のサイズの半分に縮小します。

「size-adjust: 50%」と「size-adjust: 200%」を使用した場合の結果を示す図。

size-adjust だけでは、フォントのフォールバック改善の適用は限られます。ほとんどの場合、ウェブフォントと一致させるには、フォールバック フォントを（比例縮小ではなく）少し狭めたり広げたりする必要があります。ただし、size-adjust とフォント指標のオーバーライドを組み合わせることで、任意の 2 つのフォントを水平方向と垂直方向の両方で一致させることができます。

スタイルシートで size-adjust は次のように使用されます。

@font-face {
  font-family: "fallback for poppins";
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

size-adjust の計算方法（次のセクションで説明）により、size-adjust の値（および対応するフォント指標のオーバーライド）は、使用される代替フォントによって異なります。

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

サイズ調整とフォント指標のオーバーライドの計算

size-adjust とフォント指標のオーバーライドを計算する式は次のとおりです。

size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)

これらの入力のほとんど（上昇、下降、ラインギャップ）は、ウェブフォントのメタデータから直接読み取ることができます。ただし、avgCharacterWidth は近似する必要があります。

平均文字幅の近似

一般に、平均文字幅は近似値でしか求めることができませんが、固定幅フォントを使用している場合や、テキスト文字列の内容が事前にわかっている場合など、正確に計算できるシナリオもあります。

avgCharacterWidth を計算する単純なアプローチの例として、すべての [a-z\s] 文字の平均幅を取ることがあります。

個々の Roboto [a-zs] グリフの幅を比較したグラフ。
Roboto グリフの幅

ただし、すべての文字に同じ重み付けを適用すると、よく使用される文字（e など）の幅が過小評価され、使用頻度の低い文字（z など）の幅が過大評価される可能性があります。

精度を高めるには、文字の頻度を考慮して、[a-z\s] 文字の頻度加重平均幅を計算する、より複雑なアプローチもあります。英語のテキストの文字頻度と平均単語長については、こちらの記事を参照してください。

英語の文字頻度を示すグラフ。
英語の文字の出現頻度

アプローチを選択する

この記事で説明する 2 つのアプローチには、それぞれにメリットとデメリットがあります。

  • フォント フォールバックの最適化を開始する場合は、フォント指標のオーバーライドのみを使用することをおすすめします。これは 2 つのアプローチのうち単純ですが、通常は、フォント関連のレイアウト シフトの大きさを顕著に小さくできるほど強力です。

  • 一方、精度を高め、もう少し作業とテストを行うことをいとわない場合は、size-adjust を組み込むことをおすすめします。このアプローチを正しく実装すると、フォント関連のレイアウト シフトを効果的に排除できます。

代替フォントの選択

この記事で説明する手法では、ウェブフォントとよく似たローカルフォントを見つけるのではなく、フォント指標のオーバーライドと size-adjust を使用して、広く利用可能なローカルフォントを変換します。ローカル フォントを選択する際は、ローカルで広く利用できるフォントはごくわずかであり、すべてのデバイスに存在するフォントは 1 つもないことを念頭に置くことが重要です。

Arial はサンセリフ フォント用の推奨代替フォントであり、Times New Roman はセリフ フォント用の推奨代替フォントです。ただし、これらのフォントはどちらも Android では使用できません（Android で使用できるシステム フォントは Roboto のみです）。

次の例では、Windows / Mac デバイスをターゲットとする代替フォント、Android デバイスをターゲットとする代替フォント、汎用フォント ファミリーを使用する代替フォントの 3 つの代替フォントを指定して、幅広いデバイスに対応しています。

body {
  font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}

/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

フィードバックのお願い

フォント指標のオーバーライドと size-adjust の使用に関するフィードバックがございましたら、お知らせください。