font-size-adjustを使用した一貫性のあるフォールバック

一貫性のあるフォールバックのためのfont-size-adjust

ブラウザがプライマリフォントを読み込めず代替フォントにフォールバックした場合、font-sizeが同じでもテキストの視覚的サイズが大きく変わることがよくあります。これは、異なるフォントが異なるx-height比（フォントサイズに対する小文字の高さ）を持っているためです。

問題

font-family: "Custom Font", Arial, sans-serif;

「Custom Font」のx-height比が0.53でArialのが0.52の場合、フォールバックはほぼ同じに見えます。しかし、比率が大きく異なる場合、フォールバックテキストが目に見えて大きくまたは小さくなり、レイアウトのリフローが発生します。

解決策

font-family: "Custom Font", Arial, sans-serif;
font-size-adjust: 0.53;

font-size-adjustプロパティはブラウザに「フォールバック時に、x-heightが計算されたフォントサイズの0.53に一致するようフォントサイズを調整する」と指示します。

値の計算方法

一般的な比率：

フォント	x-height比
Inter	0.53
Arial	0.52
Georgia	0.48
Times New Roman	0.45
Verdana	0.55
Courier New	0.43

ブラウザサポート

font-size-adjustはFirefox（バージョン3以降）、Chrome 127+、Safari 17+でサポートされています。古いブラウザでは無視されます。

組み合わせ例

h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size-adjust: 0.47;
}

body {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size-adjust: 0.53;
}