A quick reference guide for smoothing light-on-dark text and preventing overly bold font rendering on macOS displays.
Standard Antialiasing Snippet
body, html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Property Values
WebKit & Blink (-webkit-font-smoothing)
| Value | Rendering Behavior |
|---|---|
auto |
Default browser subpixel antialiasing |
none |
Disables smoothing completely (pixelated edges) |
antialiased |
Renders text with smooth grayscale antialiasing instead of subpixel |
Firefox on macOS (-moz-osx-font-smoothing)
| Value | Rendering Behavior |
|---|---|
auto |
Default subpixel rendering |
grayscale |
Renders text with grayscale antialiasing |
Best Practices
- Dark Mode / Inverted Color Schemes: Grayscale smoothing is especially effective on light text against dark backgrounds (
#ffftext on#111background), preventing text bloat on Retina screens. - Light Backgrounds: For standard dark text on white backgrounds, the browser default (
auto/ subpixel) often provides crisper legibility for small body text.