Webフォントにフォールバックフォントの見た目のサイズを合わせるには、CSS の font-size-adjust で x ハイトを正規化するか、size-adjust で特定のフォールバック書体を拡大縮小します。このガイドでは、Mac のデスクトップブラウザーで調整値を選び、計算し、テストする方法を説明します。

テキストに合った指標を選ぶ

一般的な英語の本文では、まず x ハイトを基準にします。x ハイトとは、フォントサイズに対する小文字の高さです。16px に設定したフォント同士でも x ハイトが異なることがあるため、CSS のサイズが同じでも見た目が同じとは限りません。MDN では、テキストの描画に使う各フォントで選択したフォント指標を正規化するためのものとして、font-size-adjust を説明しています。MDN: font-size-adjust

値を変える前に、どの指標を使うか決めましょう。小文字の多い段落では通常 ex-height が適しています。大文字のラベルでは cap-height が適する場合があります。ch-width オプションは数字の 0 の送り幅を正規化するもので、小文字の高さを合わせるのとは別の目的に使います。どのオプションでも、すべての単語の幅が同じになるわけではありません。MDN: font-size-adjust values

この作業では、Sample collection のような見出し、Tile 024 のようなラベル、Amber tiles sit beside a blue circle. Each tile has a short label. のような段落を含む合成ページを使います。フォールバックの小文字が同じくらいの大きさに見えるようにしつつ、これらの要素が引き続き収まることを確認します。

直ちに行う作業 まず使うもの 個別に確認すること
フォントスタック全体で小文字のサイズを正規化する 目標の x ハイト比を指定した font-size-adjust 折り返しと行間
既知のフォールバック書体を 1 つ調整する size-adjust を指定したフォールバック用エイリアス そのローカル書体が利用可能か
縦方向のレイアウトの差を小さくする サイズ調整後のフォント指標オーバーライド ベースラインと段落の高さ

最初の 2 つの方法では適用範囲が異なります。font-size-adjust はテキストに適用し、size-adjust は @font-face ルール内でその書体のアウトラインと指標を拡大縮小します。MDN: font-size-adjust、MDN: size-adjust

Mac で信頼できる比較環境を整える

スタイルシートを編集できるプレビュー用ページを使います。以下の例では既存の Web フォントを Sample Web と呼びます。実際の CSS ファミリー名に置き換えてください。これらは既存の Web フォントがすでに宣言され、サンプル要素も存在することを前提とした組み込み用のコード片です。

Mac の Chrome でサンプル段落を右クリックし、Inspect を選びます。または Command + Option + C を押してから、段落を選択します。Chrome の Elements パネルが開き、Styles に適用中の CSS が表示されます。Chrome: Chrome DevTools を開く

Computed を開き、Rendered Fonts までスクロールして、実際にサンプルを描画しているフォントを確認します。宣言されたフォントファミリーのリストだけでは、優先フォントが描画に使われているとは判断できません。Chrome のドキュメントでは、このセクションを使ってローカルフォントとネットワークフォントを見分ける方法を紹介しています。Chrome: その他の効果を適用する

比較中は、ビューポート、ズーム、フォントウェイト、フォントスタイル、文字間隔、コンテナー幅を一定に保ちます。まず Web フォントが使われている状態を確認します。次に段落の font-family を、たとえば Arial, sans-serif のような使用予定のフォールバックに一時的に変更し、描画に使われているフォントを再確認します。

Styles で宣言を編集し、チェックボックスで調整のオン・オフを切り替えます。これにより、文言やレイアウトを変えずに同じ段落を比較できます。Chrome: CSS 機能リファレンス

JavaScript で計測する場合は、任意の時間を待つのではなく、対象のフォントが読み込まれるのを待ちます。document.fonts.load() は指定した書体の読み込みを要求できます。document.fonts.ready はドキュメントのフォント読み込みと、それに関連するレイアウト処理が完了すると解決されます。どちらも、実際に描画されているフォントの確認に代わるものではありません。MDN: FontFaceSet.load()、MDN: FontFaceSet.ready

目標の x ハイト比を計算して適用する

数値で指定する font-size-adjust の目標値は、拡大率ではなく比率です。対象書体そのものの指標が入手できる場合は、Web フォントの x ハイトを units per em で割ります。ブラウザーは、選択した各フォントを宣言されたフォントサイズに対するこの目標比率に調整します。W3C: CSS Fonts Module Level 5

以下は説明のために明示した値であり、特定のフォントを測定したものではありません。

指標 対象の Web フォント フォールバック
Units per em 1,000 1,000
フォント単位での x ハイト 520 470
x ハイト比 0.52 0.47

宣言サイズが 16px の場合、目標の x ハイトは 16 × 0.52 = 8.32px です。この高さにするには、フォールバックに 0.52 ÷ 0.47、つまり約 1.106383 の倍率が必要です。調整後の描画サイズは約 17.7021px です。これらの計算は仕様の式を示すもので、実際の折り返しを予測するものではありません。

プロパティを使う方法では、目標比率をテキストに適用します。この CSS コード片は、サンプル段落に sample-copy クラスがあることを前提としています。

.sample-copy {
  font-family: "Sample Web", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: 0.52;
}

ここでの 0.52 は説明用の Web フォントに対応します。対象書体の比率に置き換えてください。不正確な値を指定すると、優先フォントの描画サイズも変わります。このプロパティは Web フォントを含む、選択されたすべてのフォントに適用されます。W3C: CSS Fonts Module Level 5

信頼できる比率がない場合、W3C は視覚的な調整方法を紹介しています。同じフォント、サイズ、内容のサンプルを 2 つ用意し、一方は調整を無効に、もう一方は試験的な数値調整を有効にして比較します。0.5 から始め、一致するまで調整します。調整値を決める際はサンプルを拡大して単独で比較し、結果の判断には通常の読書サイズに戻します。目視で求めた値は近似値として扱ってください。W3C: CSS Fonts Module Level 5

キーワード from-font は、最初に利用可能なフォントから目標値を取得します。意図した Web フォントが利用できない場合、別のフォントから目標値が取得されることがあります。Web フォントが読み込まれない場合でも既知の値に合わせる必要があるなら、確定した数値比を使います。MDN: font-size-adjust values

1 つの書体を制御するフォールバック用エイリアスを使う

特定のフォールバック書体に拡大縮小を適用したい場合は、size-adjust を選びます。上記の説明用の組み合わせでは、倍率をパーセントに換算すると 100 × 0.52 ÷ 0.47 = 110.6383% です。この記述子は、グリフのアウトラインだけでなく、送り幅やその他の関連指標も拡大縮小します。MDN: size-adjust

この別の組み込み用コード片は、Arial Regular がローカルで利用可能で、対象の Web フォントがすでに宣言されていることを前提としています。パーセント値は説明用なので、採用する前に実際の組み合わせを測定してください。

@font-face {
  font-family: "Sample Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  font-style: normal;
  size-adjust: 110.6383%;
}

.sample-copy {
  font-family: "Sample Web", "Sample Fallback", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: none;
}

この合成エイリアスにより、調整をこのスタックだけに適用できます。その local() のソースは特定のフォント書体を指定するもので、任意のシステムサンセリフ体を選ぶものではありません。CSS Fonts の仕様では、プラットフォーム間で書体を一致させるため、完全名と PostScript 名を指定することが推奨されています。どちらのソースも利用できない場合、ブラウザーは残りのファミリーリストを順に参照します。W3C: CSS Fonts Module Level 4

これは前述の方法の代わりとして使います。サイズ調整済みの書体を使うテキストに font-size-adjust を適用すると、プロパティがすでにオーバーライドされた指標を使うため、意図した拡大縮小が正規化によって打ち消されることがあります。MDN: font-size-adjust の説明

折り返しとベースラインの差を個別に調べる

小文字の高さを合わせたら、見出し、ラベル、段落をそれぞれ想定幅で比較します。見た目のサイズ、行末、ブロック全体の高さの順に確認するとよいでしょう。これにより、1 つのパーセント値を変更し続ける原因になりがちな、3 つの目に見える問題を切り分けられます。

小文字のサイズが合っていても段落の折り返しが異なる場合は、倍率をさらに調整する前に別のフォールバックと比較してください。1 つの高さ指標に合わせても、異なるグリフデザインの送り幅すべてが一致するわけではありません。Web フォントとフォールバックの各状態で各行の最後に来る単語を記録すると、残る差が具体的になります。

ベースラインやブロックの高さがまだ異なる場合は、ascent-override、descent-override、line-gap-override を調べます。これらはレイアウト指標を制御するもので、別の視覚的なサイズ目標を指定するものではありません。たとえばアセントは、行ボックスのレイアウトで使われるベースラインより上の指標です。関係のないパーセント値を流用せず、実際のフォントの組み合わせからオーバーライド値を求めてください。MDN: ascent-override

生成ツールで出発点を作る場合、Capsize のドキュメントにある createFontStack は、優先ファミリーの順に指標を受け取り、fontFamily とフォールバックの fontFaces の両方を返します。両方の出力をセットで使ってください。ドキュメントでは、収録フォント用の @capsizecss/metrics と、カスタムファイルから指標を抽出する @capsizecss/unpack も紹介されています。生成された宣言も、サンプルレイアウトでテストする必要があります。Capsize ドキュメント

ブラウザーのレイアウトとテキストシェーピングを保つ

Canvas による計測は文字列の比較に役立ちますが、対象となる問いはより限定的です。WHATWG では measureText().width を送り幅として定義しています。一方、実際のバウンディングボックス計測では描画されたテキストのサイズを示します。Canvas は幅が無限の仮想的な行を用意するため、その幅は折り返された DOM 段落の計測値ではありません。WHATWG: HTML Standard, Canvas

テストでは単語や文をひとまとまりに保ちます。テキストを個別に配置した文字として組み直したり、文字ごとの幅の合計がシェーピング済みの文字列を再現すると考えたりしないでください。CSS では、インラインの境界をまたいだシェーピングの条件が定義されており、間隔や配置が変わる境界も含まれます。フォントのフォールバックを検証する際は、コンポーネントの通常の構造を保ってください。W3C: CSS Text Module Level 3

ブラウザーのサポートを確認して比較を仕上げる

MDN によると、基本的な font-size-adjust は Baseline 2024、size-adjust は 2023 年 9 月以降、広く利用可能です。ただし、古いブラウザーですべての新しい指標やキーワードが使えるとは限りません。実際に使う構文の互換性表を確認してください。MDN: font-size-adjust、MDN: size-adjust

高度な指標形式を使えない場合は、作業に適していればサポートされている数値の x ハイト正規化を使うか、サポートされている特定フォールバック向けの記述子を使います。必要な調整がまったくサポートされていない場合は、見た目の近いフォールバックを使い、そのブラウザーで調整なしのレイアウトを確認します。

最後に、使うすべてのウェイトとスタイルで比較を繰り返し、サポート対象の Mac ブラウザーでも確認します。その都度、実際に描画されている書体を確認してください。合成した見出し、ラベル、段落について、Web フォントとフォールバックの両方で見た目のサイズ、折り返し、間隔に問題がない場合にのみ、選んだ調整値を使います。

出典