Font Smoothing

On a Mac, browsers draw text a little bolder than the font says. macOS thickens every glyph slightly, and on a dark background that extra weight blooms. White text ends up looking heavier than the same text in dark ink.

On macOS, turn the thickening off so text renders at the weight you chose.

Faster cold startsFunctions now boot in under 100ms. No changes are needed on your side.

The difference is easy to see on the dark card and hard to see on the light one. That is why this usually comes up when a product ships a dark mode, and every heading suddenly feels half a weight heavier than in the design file.

What it does

Macs used to render text with subpixel antialiasing, using the red, green and blue parts of each pixel to sharpen edges. To make up for how thin that looked, macOS also thickened each glyph. macOS Mojave (10.14) turned subpixel antialiasing off in 2018 but kept the thickening, and browsers still apply it by default.

-webkit-font-smoothing: antialiased switches to plain grayscale antialiasing, without the thickening. Firefox's version is -moz-osx-font-smoothing: grayscale. Windows, Linux, iOS and Android ignore both, so if you are not on a Mac, the demos fake the default with a hairline stroke.

Thin weights

The thickening also props up light weights. Without it, 300 and below can turn wispy on dark surfaces.

Boots in under 100ms300

Boots in under 100ms400

Boots in under 100ms500

Boots in under 100ms600

Most interfaces use 400 and up, where antialiased is a clear improvement. If you set small text in a light weight, check it on a Mac before turning this on everywhere.

Usage

app.tsx

<body class="antialiased">

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Both properties are non-standard, and they only do anything on macOS. That is fine, because the extra weight is a macOS problem. Set them once on the body, like this site does, and every element inherits them.

What it does

Thin weights

Usage

Resources

Search concepts