フォントが変わっても安心！font-size-adjustで文字の違和感をなくすCSSテクニック

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
みなさんは、Webフォントの読み込みに失敗したときの「文字の見た目崩れ」に悩んだことはありませんか？

たとえば、カスタムフォントが一瞬だけ表示されずに「代替フォント」に切り替わると、急に文字サイズや行間がズレてレイアウトが乱れる現象が起きがちです。

そんなときに便利なのが、CSSの font-size-adjust プロパティ。
これを使えば、代替フォントを使った場合でも、見た目のバランスを維持してユーザー体験（UX）を損なわない工夫ができます。

font-size-adjustとは？

font-size-adjust は、フォントの「x-height」（小文字の高さ）を基準に、サイズを調整するプロパティです。

通常、フォントによって同じ font-size: 16px でも視覚的な大きさが変わるため、フォールバックが起きると違和感のある表示になりやすいのですが、このプロパティを使うことで、代替フォントも同じ「高さ感」で表示されるようになります。

指定例

 body {
    font-family: "Noto Sans", "Arial", sans-serif;
    font-size: 16px;
    font-size-adjust: 0.5;
  }

どうしてフォントで見た目が変わるのか？

フォントにはそれぞれ「x-height（エックスハイト）」という基準高さがあります。

これは、小文字の「x」が占める高さを指し、フォントによってこれが異なるため、同じ16pxの設定でも、見た目が「大きく見える or 小さく見える」という問題が起こるわけです。

代替フォントのギャップを減らす

たとえば、次のようにフォントを指定したとき

 font-family: 'Roboto', 'Arial', sans-serif; 

Roboto が読み込めない環境では Arial にフォールバックしますが、Arialはx-heightが低めなので、文字が小さく見えてしまう現象が起きます。

これを防ぐために、font-size-adjust を使います。

font-size-adjustの使い方

基本構文は非常にシンプルです。

 font-size-adjust: <number>; 

ここで指定する数値は、基準となるフォントの「x-height ÷ font-size」比率です。
例えば、Roboto の場合、0.5 付近がバランスのよい値です。

例：Noto Sansをメインにする場合

 body {
    font-family: "Noto Sans", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 16px;
    font-size-adjust: 0.5; /* 適切なx-height比を指定 */
  }

このように指定することで、たとえフォントが切り替わっても視覚的な「高さ感」は一貫したままになります。

対応ブラウザと注意点

2025年現在、font-size-adjust は主要モダンブラウザで安定して使えるようになっています。

注意点

まとめ

font-size-adjust を使えば、Webフォントの読み込み失敗時でもレイアウトが崩れず、ユーザーにとって読みやすい体験を提供できます。

Webデザインの「質」を1ランクアップさせるこの小技、ぜひあなたのCSSに取り入れてみてください！

 

satokotadesignキャンペーン実施中！