macOSディスプレイ上で、暗い背景の上の明るい文字の過度な太字化を防ぎ、滑らかに描画するためのクイックリファレンス。
標準アンチエイリアス設定スニペット
body, html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
プロパティ値と描画挙動
WebKit & Blink (-webkit-font-smoothing)
| 指定値 | レンダリング挙動 |
|---|---|
auto |
ブラウザ標準のサブピクセルアンチエイリアス |
none |
スムージングを完全無効化（ドット状のエッジ） |
antialiased |
サブピクセルではなくグレースケールアンチエイリアスで文字を描画 |
macOS版 Firefox (-moz-osx-font-smoothing)
| 指定値 | レンダリング挙動 |
|---|---|
auto |
標準のサブピクセルレンダリング |
grayscale |
グレースケールアンチエイリアスで文字を描画 |
ベストプラクティス
- ダークモード / 暗い背景：Retinaディスプレイ上で白文字の輪郭が太く滲む現象を防ぐため、暗い背景に明るいテキストを表示する際にグレースケールスムージングが極めて有効です。
- 明るい背景：白背景に濃い色の標準的な本文テキストの場合、ブラウザの既定値 (auto / サブピクセル) の方が文字がくっきりと読みやすくなります。