Guida rapida per smussare il testo chiaro su sfondi scuri ed evitare un rendering eccessivamente marcato sui display macOS.
Snippet standard di antialiasing
body, html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Valori delle proprietà e comportamento
WebKit e Blink (-webkit-font-smoothing)
| Valore | Comportamento di rendering |
|---|---|
auto |
Antialiasing subpixel predefinito del browser |
none |
Disabilita completamente lo smoothing (bordi scalettati) |
antialiased |
Esegue il rendering del testo con antialiasing in scala di grigi invece che subpixel |
Firefox su macOS (-moz-osx-font-smoothing)
| Valore | Comportamento di rendering |
|---|---|
auto |
Rendering subpixel predefinito |
grayscale |
Esegue il rendering con antialiasing in scala di grigi |
Best Practice
- Modalità scura / Sfondi scuri: Lo smoothing in scala di grigi è particolarmente efficace per il testo chiaro su sfondo scuro, prevenendo caratteri ingrossati sugli schermi Retina.
- Sfondi chiari: Per il testo scuro su fondo bianco, l'impostazione predefinita (auto / subpixel) garantisce spesso una nitidezza superiore.