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

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

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

この投稿では、size-adjust という新しい CSS フォントフェース記述子について説明します。また、フォントサイズを修正して正規化することで、スムーズなユーザー エクスペリエンス、一貫したデザイン システム、予測可能なページ レイアウトを実現する方法も紹介します。重要なユースケースの 1 つは、ウェブフォントのレンダリングを最適化して累積レイアウト シフト（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. インポートされた 1 つの書体にのみ影響します。

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

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

シームレスなフォント スワップによる CLS の軽減

次の GIF で、左側の例と、フォントが変更されたときにどのようにシフトするかを確認してください。これは広告見出し要素が 1 つだけの小さな例であり、問題は顕著です。

フォント レンダリングを改善するには、フォントを入れ替える方法がおすすめです。まず、クイック読み込みシステム フォントをレンダリングしてコンテンツを表示し、ウェブフォントの読み込みが完了したらウェブフォントに切り替えます。これにより、両方の長所を兼ね備えています。つまり、コンテンツは可能な限り早く表示され、ユーザーのコンテンツ作成時間を犠牲にすることなく、魅力的なスタイルが設定されたページを作成できます。ただし問題は、ウェブフォントが読み込まれたときにページ全体がずれることです。これは、ボックスの高さが若干異なるためです。

size-adjust を @font-face ルールに追加すると、フォント フェースのグローバル グリフ調整が設定されます。このタイミングを適度に調整することで、視覚的な変化を最小限に抑え、シームレスな入れ替えを実現できます。シームレスなスワップを作成するには、手で調整するか、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 フォント レベル 5 の仕様
• MDN でのサイズ調整
• シームレスなスワップ @font-face 生成ツール
• web.dev の Cumulative Layout Shift（CLS）
• フォントの読み込みによる影響を軽減する新しい方法: CSS フォント記述子

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