Guía de referencia rápida para suavizar texto claro sobre fondos oscuros y evitar un renderizado excesivamente grueso en pantallas macOS.
Fragmento estándar de antialiasing
body, html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Valores de propiedad y comportamiento
WebKit y Blink (-webkit-font-smoothing)
| Valor | Comportamiento de renderizado |
|---|---|
auto |
Antialiasing subpíxel predeterminado del navegador |
none |
Desactiva el suavizado por completo (bordes pixelados) |
antialiased |
Renderiza texto con suavizado en escala de grises en lugar de subpíxeles |
Firefox en macOS (-moz-osx-font-smoothing)
| Valor | Comportamiento de renderizado |
|---|---|
auto |
Renderizado subpíxel predeterminado |
grayscale |
Renderiza texto con antialiasing en escala de grises |
Buenas prácticas
- Modo oscuro y fondos oscuros: El suavizado en escala de grises es especialmente efectivo en texto claro sobre fondos oscuros, evitando texto inflado en pantallas Retina.
- Fondos claros: Para texto oscuro estándar sobre fondos blancos, el valor predeterminado del navegador (auto / subpíxel) ofrece mayor nitidez.