Put white text on a dark surface and look closely. On a Mac, it comes out a little bolder and a little fuzzier than the same text on white. The CSS did not change. The rasterizer did.
By default, WebKit and Blink render text with subpixel antialiasing, which thickens the edges of glyphs to make them look sharper. On dark backgrounds that extra thickness reads as bloom. Subpixel is the top word. Grayscale is the one under it.
The property is -webkit-font-smoothing: antialiased. It tells the browser to
use plain grayscale antialiasing instead, which renders the glyph at its
honest weight. Firefox on macOS has its own version,
-moz-osx-font-smoothing: grayscale.
Where it shows
The difference is easy to see on dark backgrounds and hard to see on light ones. The same line, on bone and on ink.
That is why this mostly comes up when a product ships a dark mode. Everything looks fine in light mode, then the dark theme arrives and every heading feels half a weight heavier than the design file.
Thin weights
Grayscale rendering cuts both ways. Weights that were leaning on the bloom can turn wispy once it is gone. Check the lighter rows below.
If you use 300 or below for body text on dark surfaces, test it on a non-Retina screen before turning this on globally. Most products only use 400 and up, where it is a clear improvement.
Usage
<body class="antialiased">body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}Both properties are non-standard and only do anything on macOS. Windows uses
ClearType and ignores them, which is fine, because the bloom is a macOS
problem. This site applies it on the body, and so do most design-led
products.