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

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

Adam Argyle

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

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

この記事では、size-adjust という新しい CSS font-face ディスクリプタについて説明します。また、フォントサイズを修正して正規化し、ユーザー エクスペリエンスを向上させ、デザイン システムの一貫性を保ち、ページ レイアウトをより予測可能にする方法もいくつか紹介します。重要なユースケースの一つは、ウェブフォントのレンダリングを最適化してレイアウト シフトの累積スコア（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 では、左側の例と、フォントが変更されたときのシフトを確認できます。これは見出し要素が 1 つしかない小さな例ですが、問題は非常に顕著です。

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

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

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

size-adjust を @font-face ルールに配置することで、フォント フェイスのグローバル グリフ調整を設定します。タイミングを適切に調整することで、視覚的な変化を最小限に抑え、シームレスな切り替えを実現できます。シームレスなスワップを作成するには、手動で調整するか、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 フォントを選択すると、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

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not 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: not 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: not 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 機能は、ウェブ レイアウトのテキスト バウンディング ボックスをカスタマイズしてフォントの切り替えエクスペリエンスを改善し、ユーザーのレイアウト シフトを回避する優れた方法です。詳しくは、以下のリソースをご覧ください。

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