Kurzreferenz zur Glättung heller Schriften auf dunklem Hintergrund und zur Vermeidung übermäßig fetter Textdarstellung auf macOS-Displays.
Standard-Snippet für Schriftglättung
body, html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Eigenschaftswerte & Renderverhalten
WebKit & Blink (-webkit-font-smoothing)
| Wert | Renderverhalten |
|---|---|
auto |
Standard-Subpixel-Antialiasing des Browsers |
none |
Deaktiviert Glättung vollständig (pixelige Kanten) |
antialiased |
Rendert Text mit weichem Graustufen-Antialiasing anstelle von Subpixeln |
Firefox unter macOS (-moz-osx-font-smoothing)
| Wert | Renderverhalten |
|---|---|
auto |
Standard-Subpixel-Rendering |
grayscale |
Rendert Text mit Graustufen-Antialiasing |
Bewährte Praktiken
- Dark Mode / Dunkle Hintergründe: Graustufenglättung ist besonders effektiv bei hellem Text auf dunklem Grund (#fff auf #111) und verhindert das Aufblähen von Schriften auf Retina-Bildschirmen.
- Helle Hintergründe: Bei standardmäßig dunklem Text auf weißem Grund bietet der Browser-Standard (auto / Subpixel) oft eine schärfere Lesbarkeit für Fließtext.