Font Smoothing
Light text on dark renders bolder than you designed.
Switch your app to dark mode and the type quietly gains half a weight. Nothing changed in the CSS - it's the rasterizer. Subpixel antialiasing, the default, exploits the RGB stripes of the display to sharpen edges, and on light-on-dark text the fringing reads as bloom: letters look thicker, slightly fuzzy, heavier than the font you chose.
Most visible on macOS: with default subpixel smoothing, light-on-dark type blooms a half-weight heavier than the designer chose. `antialiased` renders it at its true weight.
The fix
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
Grayscale antialiasing gives up the subpixel trick and renders the glyph at its honest weight. Jakub Krehel's details post ships it globally, and so does this site - most design-forward products do (Linear, Vercel, and practically every macOS app, where grayscale has been the system default since Mojave).
Notes
- The properties are non-standard and mostly a macOS/WebKit story; Windows ClearType ignores them. That's fine - macOS is where the bloom is worst.
- The classic argument against - "subpixel is more legible for long-form body text" - carries less weight on retina displays, where there are enough real pixels that the trick no longer pays for its color fringes.
- If you apply it globally, check thin weights (300 and below) on low-density screens: honest weight cuts both ways, and what was leaning on the bloom can turn wispy.