# Font Smoothing

> Light text on dark renders heavier.

- Section: Typography
- URL: https://critly.vercel.app/font-smoothing
- Published: 2026-07-16
- Source: https://github.com/kausthubh-coder/critly/blob/main/content/typography/font-smoothing.mdx

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.**

> **Interactive demo: Font Smoothing.** Open https://critly.vercel.app/font-smoothing to try it.

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.

> **Interactive demo: Font Smoothing Weights.** Open https://critly.vercel.app/font-smoothing to try it.

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

**Tailwind**

```html
<body class="antialiased">
```

**CSS**

```css
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.

## Resources

- [font-smooth](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-smooth): MDN on the non-standard smoothing properties, their values, and the macOS-only support.
- [What's the deal with WebKit font smoothing?](https://dbushell.com/2024/11/05/webkit-font-smoothing/): David Bushell tests the property across operating systems and finds it only matters on macOS.
- [Details that make interfaces feel better](https://jakub.kr/writing/details-that-make-interfaces-feel-better): Jakub Krehel's list of small fixes, including antialiased text.
- [A modern CSS reset](https://www.joshwcomeau.com/css/custom-css-reset/): Josh Comeau's reset, which sets antialiased on the body and explains why.
- [Font smoothing in Tailwind](https://tailwindcss.com/docs/font-smoothing): The antialiased utility, which sets both properties at once.