@font-face に合わせて CSS のサイズ調整

ウェブフォントの読み込み時にスケールを調整してドキュメントのフォントサイズを正規化し、フォントの切り替え時のレイアウト シフトを防止できるようになりました。

Adam Argyle

次のデモでは、font-size が一貫した 64px であり、これらの各ヘッダーの唯一の違いは font-family です。左側の例は調整されておらず、最終的なサイズに一貫性がありません。右側の例では、size-adjust を使用して、64px が最終的なサイズで一貫するようにしています。

この記事では、size-adjust という新しい CSS フォント フェイス記述子について説明します。また、フォントサイズを修正して正規化し、スムーズなユーザー エクスペリエンス、一貫したデザイン システム、予測可能なページ レイアウトを実現する方法もいくつか示します。重要なユースケースの一つは、ウェブフォント レンダリングを最適化して累積レイアウト シフト（CLS）を防ぐことです。

問題空間のインタラクティブなデモをご覧ください。プルダウンで書体を変更し、次のことを確認します。

1. 結果の高さの差。
2. 視覚的に不快感を与えるコンテンツが移動している。
3. インタラクティブなターゲット領域が移動する（プルダウンがジャンプする）。

size-adjust を使用してフォントをスケーリングする方法

構文の概要:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}

1. Adjusted Typeface という名前のカスタム書体を作成します。
2. size-adjust を使用して、各グリフをデフォルトのサイズを 150% 拡大します。
3. インポートされた単一の書体にのみ影響します。

上記のカスタム書体を次のように使用します。

h1 {
  font-family: "Adjusted Typeface";
}

シームレスなフォントの切り替えによる CLS の軽減

次の GIF では、左側の例と、フォントが変更されたときにシフトが発生することを確認できます。これはヘッドライン要素が 1 つしかない小さな例ですが、問題は非常に目立ちます。

フォント レンダリングを改善するには、フォント スワッピングが効果的です。読み込みが速いシステム フォントをレンダリングしてコンテンツを最初に表示し、Web フォントが読み込みを完了したら、そのシステム フォントを Web フォントと入れ替えます。これにより、両方の利点を享受できます。つまり、コンテンツができるだけ早く表示され、ユーザーの時間を犠牲にすることなく、見事にスタイル設定されたページが得られます。ただし問題は、ウェブフォントの読み込み時に、ボックスの高さのサイズが若干異なるため、ページ全体が移動することがあるためです。

@font-face ルールに size-adjust を指定することで、フォント フェイスのグローバルなグリフ調整が設定されます。タイミングを正しく設定すると、視覚的な変化を最小限に抑え、シームレスな入れ替えを行うことができます。シームレスなスワップを作成するには、手で調整するか、Malte Ubl のサイズ調整計算ツールを試してください。

この投稿の冒頭で、フォントサイズの問題の修正は試行錯誤によって行われました。Cookie と Arial の同じヘッダーが Press Start 2P と同じ 64px を自然にレンダリングするまで、size-adjust がソースコードで調整されました。2 つのフォントを目的のフォントサイズに揃えました。

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

フォントの調整

作成者は、フォント スケールを正規化するためのキャリブレーション ターゲットを決定します。Times、Arial、システム フォントで正規化し、それに合わせてカスタム フォントを調整できます。または、ダウンロードしたものに合わせてローカル フォントを調整することもできます。

size-adjust の調整戦略:

1. リモート ターゲット:
   ダウンロードしたフォントに合わせてローカル フォントを調整します。
2. ローカル ターゲット:
   ダウンロードしたフォントをローカル ターゲット フォントに近づけるように調整します。

例 1: リモート ターゲット

リモートの src カスタム フォントに合わせて、ローカルで利用可能なフォントのサイズを調整する次のスニペットについて考えてみましょう。リモート カスタム フォントがキャリブレーションのターゲットになります。たとえば、ブランドフォントです。

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

この例では、ローカル フォントの Arial が、読み込まれるカスタム フォントを見越して調整され、シームレスなスワップを実現しています。

この戦略には、デザイナーとデベロッパーがサイズ設定とタイポグラフィで同じフォントを使用できるという利点があります。ブランドが調整ターゲット。これはデザイン システムにとって朗報です。

ブランド書体をターゲットにすることでも、Malte の計算ツールの仕組みは変わりません。 Google フォントを選択すると、Arial に合わせてシームレスにスワップされるように調整する方法が計算されます。以下は計算ツールの Roboto CSS の例です。ここでは、Arial が読み込まれ、「Roboto-fallback」という名前が付けられています。

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

完全にクロス プラットフォームの調整を作成するには、次の例をご覧ください。この例では、ブランド フォントに対応するために、調整済みのローカル フォールバック フォントを 2 つ用意しています。

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

例 2: ローカル ターゲット

次のスニペットでは、Arial に合わせてブランドのカスタム フォントを調整しています。

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

この方法には、調整なしでレンダリングし、受信したフォントを調整して一致させるという利点があります。

ascent-override、descent-override、line-gap-override による微調整

グリフの一般的なスケーリングではデザインや読み込み戦略の調整が不十分な場合は、size-adjust とともに使用できる微調整オプションをいくつかご紹介します。ascent-override、descent-override、line-gap-override プロパティは現在、Chromium 87 以降と Firefox 89 以降に実装されています。

ascent-override

ascent-override 記述子は、フォント基線からの高さを定義します。

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

赤い見出し（調整前）は、大文字の A と O の上にスペースがありますが、青い見出しは調整されているため、大文字の高さが全体の境界ボックスにぴったり収まっています。

descent-override

descent-override 記述子は、フォントのベースラインの下の高さを定義します。

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

赤色の見出し（未調整）は D と O のベースラインの下にスペースがあり、青色の見出しは文字がベースラインにぴったり収まるように調整されています。

line-gap-override

line-gap-override 記述子は、フォントのラインギャップ指標を定義します。ラインギャップまたは外部リーディングを推奨するフォントです。

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

赤い見出し（調整なし）には line-gap-override がなく、基本的には 0% です。一方、青い見出しは 50% 調整されているため、文字の上下にスペースが作成されています。

すべてを組み合わせる

これらのオーバーライドを使用すると、ウェブの安全なテキストの境界ボックスから余分な部分を切り取る別の方法が提供されます。テキスト ボックスは、プレゼンテーションに合わせて調整できます。

まとめ

@font-face size-adjust CSS 機能は、ウェブレイアウトのテキスト バウンディング ボックスをカスタマイズしてフォント スワップ エクスペリエンスを改善し、ユーザーのレイアウト シフトを回避する優れた方法です。詳細については、以下のリソースをご覧ください。

• CSS Fonts Level 5 仕様
• MDN でのサイズ調整
• シームレスなスワップ @font-face 生成ツール
• web.dev の Cumulative Layout Shift（CLS）
• フォント読み込みの影響を軽減する新しい方法: CSS フォント記述子

写真撮影: Kristian Strand（出典: Unsplash）