Newly available 条件付きOK。主要ブラウザで対応済み。フォント切り替え時のレイアウトシフト軽減に有効。
タイポグラフィ Newly available

font-size-adjust

フォントによって同じ font-size でも見た目の大きさ（x-height）が異なる。font-size-adjust を使うと、フォールバックフォントに切り替わった際の文字サイズの差を最小限にできる。値はアスペクト比（x-height / font-size）で指定する。

フォントサイジング

概要

フォントによって同じ font-size でも見た目の大きさ（x-height）が異なる。font-size-adjust を使うと、フォールバックフォントに切り替わった際の文字サイズの差を最小限にできる。値はアスペクト比（x-height / font-size）で指定する。

対応ブラウザ

デスクトップ

Chrome 127+
Edge 127+
Safari 17+
Firefox 118+

モバイル

Chrome Android 127+
Safari iOS 17+
Firefox Android 118+

基本構文

CSS 
body {
  font-family: "Ideal Sans", Verdana, sans-serif;
  font-size-adjust: 0.5;
}

/* 特定のメトリクスを基準にする */
.adjusted {
  font-size-adjust: ex-height 0.48;
}

実務での使いどころ

  • フォントフォールバック時の一貫性

    Web フォントが読み込まれない場合でも、フォールバックフォントの見た目のサイズを揃え、レイアウトシフトを防ぐ。

注意点

  • 適切なアスペクト比を計算するために、使用するフォントのメトリクスを事前に調べる必要がある。
  • すべてのフォントの組み合わせで完璧に揃うわけではないが、大幅な改善は期待できる。

アクセシビリティ

  • フォントサイズの一貫性はテキストの可読性を向上させ、ロービジョンのユーザーにとっても有益。

参考リンク