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

ウェブフォントが読み込まれる際にスケールを調整して、ドキュメントのフォントサイズを標準化し、フォント間の切り替えによるレイアウトのずれを防ぐことができるようになりました

Adam Argyle

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

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

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

対応ブラウザ

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

ソース

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

  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 によるこのサイズ調整計算ツールをお試しください。

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

対応ブラウザ

  • Chrome: 87。
  • Edge: 87。
  • Firefox: 89。
  • Safari: サポートされていません。

ソース

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

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

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

descent-override

対応ブラウザ

  • Chrome: 87。
  • Edge: 87。
  • Firefox: 89。
  • Safari: サポートされていません。

ソース

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

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

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

line-gap-override

対応ブラウザ

  • Chrome: 87。
  • Edge: 87。
  • Firefox: 89。
  • Safari: サポートされていません。

ソース

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）