This can be changed by adding this to your theme’s CSS:
body {
--webkit-font-smoothing: auto;
}
There’s some detail about what this does here: A Modern CSS Reset • Josh W. Comeau…
In macOS Mojave, released in 2018, Apple disabled subpixel antialiasing across the operating system. I’m guessing they realized that it was doing more harm than good on modern hardware.
Confusingly, macOS browsers like Chrome and Safari still use subpixel antialiasing by default. We need to explicitly turn it off, by setting
-webkit-font-smoothingtoantialiased.
To demonstrate the difference… --webkit-font-smoothing: auto; on the left, and --webkit-font-smoothing: antialiased; on the right
macOS renders text heavier by default, but only in browsers and not the rest of the OS… antialiased gets it closer in appearance to how text is rendered in other operating systems… in Chrome on Windows the CSS doesn’t apply and the text looks like this by default:
It’s debatable whether or not it’s worth adding as a reset like we are with this change… it technically makes fonts lighter on macOS which looks closer to other operating systems, but the mechanism is different because they’re different text rendering engines.
Windows, while similarly light after applying this change for macOS, will still render fonts slightly sharper because of the engine differences (Windows does subpixel antialiasing, which is what gets turned off by this CSS on macOS).