Guia de referência rápida para suavizar texto claro sobre fundos escuros e evitar renderização excessivamente grossa em telas do macOS.
Snippet padrão de antialiasing
body, html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Valores de propriedade e comportamento
WebKit e Blink (-webkit-font-smoothing)
| Valor | Comportamento de renderização |
|---|---|
auto |
Antialiasing subpixel padrão do navegador |
none |
Desativa totalmente a suavização (bordas pixelizadas) |
antialiased |
Renderiza texto com suavização em escala de cinza em vez de subpixel |
Firefox no macOS (-moz-osx-font-smoothing)
| Valor | Comportamento de renderização |
|---|---|
auto |
Renderização subpixel padrão |
grayscale |
Renderiza texto com antialiasing em escala de cinza |
Boas Práticas
- Modo escuro / Fundos escuros: A suavização em escala de cinza é especialmente eficaz em texto claro contra fundos escuros, prevenindo que o texto pareça inchado em telas Retina.
- Fundos claros: Para texto escuro padrão sobre fundo branco, o padrão do navegador (auto / subpixel) costuma oferecer maior nitidez.