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

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

Adam Argyle

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

この例では、Chrome DevTools の CSS グリッド レイアウト デバッグツールを使用して高さを表示しています。

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

Browser Support

  • Chrome: 92.
  • Edge: 92.
  • Firefox: 92.
  • Safari: 17.

Source

問題空間のインタラクティブなデモを以下に示します。プルダウンで書体を変更して、次の点を確認してください。

  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 では、左側の例でフォントが変更されたときにどのようにシフトするかを確認してください。これは、単一の見出し要素を含む小さな例であり、問題が非常に目立ちます。

左の例ではレイアウト シフトが発生していますが、右の例では発生していません。

フォントのレンダリングを改善するには、フォント スワップが優れた手法です。読み込みの速いシステム フォントをレンダリングしてコンテンツを先に表示し、ウェブフォントの読み込みが完了したらウェブフォントに切り替えます。これにより、コンテンツをできるだけ早く表示し、ユーザーのコンテンツへのアクセス時間を犠牲にすることなく、適切にスタイル設定されたページを取得できます。しかし、ウェブフォントが読み込まれると、ボックスの高さが若干異なるため、ページ全体がずれてしまうことがあります。

コンテンツが多いほど、フォントの入れ替え時にレイアウト シフトが発生する可能性が高くなります。

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

Google ウェブフォントを選択すると、事前に調整された @font-face スニペットが返されます。

この投稿の冒頭で、フォントサイズの問題を修正するために試行錯誤しました。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 Fonts を選択すると、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 以降に実装されています。

「overrides」という単語の上下にハサミのアイコンがあり、この機能でトリミングできる領域を示している

ascent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

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

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

赤の見出し（未調整）には大文字の A と O の上にスペースがありますが、青の見出しはキャップハイトが境界ボックス全体にぴったり収まるように調整されています。

descent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

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

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

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

line-gap-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

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 機能は、ウェブ レイアウトのテキスト境界ボックスをカスタマイズしてフォント スワップ エクスペリエンスを改善し、ユーザーのレイアウト シフトを回避する優れた方法です。詳しくは、以下のリソースをご覧ください。