font-optical-sizing
バリアブルフォントのオプティカルサイズ軸（opsz）を自動的にフォントサイズに連動させるプロパティです。有効にすると、小さいサイズではストロークが太く、大きいサイズではストロークが細くなるなど、各サイズで最も読みやすい字形が選択されます。バリアブルフォントの高品質なタイポグラフィに不可欠です。
概要
バリアブルフォントのオプティカルサイズ軸（opsz）を自動的にフォントサイズに連動させるプロパティです。有効にすると、小さいサイズではストロークが太く、大きいサイズではストロークが細くなるなど、各サイズで最も読みやすい字形が選択されます。バリアブルフォントの高品質なタイポグラフィに不可欠です。
対応ブラウザ
デスクトップ
Chrome 79+
Edge 17+
Safari 13.1+
Firefox 62+
モバイル
Chrome Android 79+
Safari iOS 13.4+
Firefox Android 62+
基本構文
CSS
body {
font-optical-sizing: auto;
}
.no-optical {
font-optical-sizing: none;
}実務での使いどころ
-
サイズ最適化されたテキスト表示
バリアブルフォントを使用するサイトでfont-optical-sizing: autoを設定し、見出しと本文の両方で最適な字形を自動選択します。
注意点
- オプティカルサイズ軸を持たないフォントではこのプロパティは効果がありません。使用するフォントの対応状況を確認してください。
アクセシビリティ
- オプティカルサイジングは小さなテキストの可読性を向上させるため、アクセシビリティの観点から有効にすることを推奨します。