Font Smoothing
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. Toggle the demo to see the text drop back to the weight you actually chose.
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. Toggle the same text on both.
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.
Resources
font-smooth - MDN on the non-standard smoothing properties and their browser support.
Details that make interfaces feel better - A practical collection of small interface improvements, including this one.
Laissez-faire font smoothing and anti-aliasing - Zach Leatherman on what the property does and the case against using it blindly.
Font smoothing in Tailwind - The antialiased and subpixel-antialiased utilities.