はじめに

こんにちは！初投稿です！
フロントエンジニアをしているRYOと申します！

今年2月に発表されたInterop 2024で注目されたCSSプロパティの一つに「font-size-adjust」があり、興味が湧いたので、概要や使い方、実際の活用方法について掘り下げてみました。

目次

font-size-adjustとは
フォントのアスペクト比とは
font-size-adjustの使い方と具体例
注意点
まとめ
参考

font-size-adjustとは

font-size-adjust は、フォントのアスペクト比を制御し異なるフォント間でも視覚的に同じサイズ感を保つためのCSSプロパティです。フォントによって同じフォントサイズでも、見え方に微妙な違いが出て読みやすさが問題になることがありますが、font-size-adjust はWebフォントが使えないときや、フォールバックフォントが使われたときに文字サイズがガタッと変わるのを防いでくれます。

フォントのアスペクト比とは

ここでキーになるのが、アスペクト比というフォントの特性です。具体的には、小文字の「x」の高さ（x-height）と、フォント全体の大きさの比率です。フォントによってこの比率が違うのですが、それが原因で同じサイズ指定でも文字の見た目が変わってしまうことがあります。

See the Pen Untitled by RyoGutchi (@ryogutchi) on CodePen.

抜粋

.font-a {
  font-family: verdana;
}

.font-b {
  font-family: Arial;
}

span {
  font-size: 16px;
}

（CSSは https://web.dev/blog/font-size-adjust より引用）

font-size-adjustの使い方と具体例

さて、フォントのアスペクト比の違いで文字の見たい目が違うことを確認しました。
ここでは実際に font-size-adjust の使い方と具体例を紹介します。

使い方はすごく簡単です。アスペクト比の値を設定して、フォントが切り替わってもサイズに違和感が出ないように調整します。

See the Pen font-size-adjust by RyoGutchi (@ryogutchi) on CodePen.

抜粋

.font-a {
  font-family: verdana;
}

.font-b {
  font-family: Arial;
  font-size-adjust: 0.59;
}

span {
  font-size: 16px;
}

（CSSは https://web.dev/blog/font-size-adjust より引用）

font-size-adjust を設定したことで、異なるフォント間でも視覚的なサイズ差を最小限に抑えることができました。

font-size-adjustの値について
一般的には0.5〜1.0の間の数値を使いますが、具体的な数値は使っているフォントの「x-height」によって異なります。none を指定するとデフォルトの動作が適用され、調整は行われません。

注意点

すべてのフォントに対して効果的ではない場合がある

特に、フォールバックフォントが指定されていない場合や、フォント自体に問題がある場合は期待した効果が得られないことがあります。
また、font-size-adjust の値を適切に設定しないとデザインが意図せず崩れることもあります。そのため、使用するフォントのアスペクト値を正しく理解した上で設定することが重要です。

ブラウザサポート

現在では最新のブラウザならほぼ対応していますが、古いバージョンではサポートされていない場合もあるので、使う前に確認が必要です。

CSSプロパティの互換性については、最新の Can I Useで確認できます。

まとめ

font-size-adjust は、フォントが変わったときにサイズ感を保つための便利なプロパティです。特にWebフォントが使えないときや、特にフォールバックフォントが適用された場合でも見た目の統一感を保つのに役立ちます。使用する際は、ブラウザサポートや適切なアスペクト比の値に注意して、サイトの見た目を最適化しましょう！

最後まで読んでいただきありがとうございました！
拙い文章ではありますが、今後も勉強のアウトプットも兼ねて、webフロント技術に関する記事を書いていこうと思います！

参考