New Nov 5, 2024

What’s the deal with WebKit Font Smoothing?

More Front-end Bloggers All from dbushell.com View What’s the deal with WebKit Font Smoothing? on dbushell.com

Have you ever added this CSS?

body {
  -webkit-font-smoothing: antialiased;
}

What’s the deal with that?

I’ve always tried to avoid this CSS because a long time ago Dmitry Fadeyev asked us to Please Stop “Fixing” Font Smoothing.

The antialiasing mode is not a “fix” for subpixel rendering – in most cases it’s a handicap. Subpixel rendering is technically superior, clearer, and more readable than antialiasing because by utilizing every one of the subpixels it increases its effective resolution used for font smoothing by three times.

This argument made sense to me. I’d like to assume the browser knows what’s best. I’ve always erred on the side of defaults and not messed with font smoothing.

Over the years I’ve had plenty of designers request I add the CSS above for aesthetic reasons. I would protest but usually yield to get a job over the finish line.

Perhaps it’s time to reevaluate?

Fast Forward

The current year is 2024 and Josh Comeau updated A Modern CSS Reset which includes the same CSS snippet:

body {
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

(That may have been in the 2021 version but I’m just seeing it now.)

Josh explains why subpixel-antialiased — the default on macOS — is outdated. Therefore the criticism of applying antialiased is void.

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.

Basically subpixel antialiasing is a relic of old low pixel density LCDs. If Apple has disabled it elsewhere on macOS, why shouldn’t we disable it in the browser too?

macOS Only

So using -webkit-font-smoothing: antialiased disables subpixel antialiasing on macOS where it is enabled by default in web browsers only.

I wanted to test for myself on every operating system and device I have. I whipped up a quick CodePen test with various typographic samples. In hindsight it’s not the most readable test page but it did the job.

I tested on:

I tested in Firefox, Chromium, and Safari where possible.

For desktop I tested two monitors:

The 4K higher DPI monitor wouldn’t be considered “retina” by fans of Apple’s marketing department but it’s good enough for my eyes.

After an hour of juggling HDMI cables and almost dropping a monitor on my head I can safely conclude that -webkit-font-smoothing is macOS only.

Literally macOS only. Not even iOS Safari cares for it. I can categorically conclude that this CSS property has absolutely no effect outside of macOS. I feel like I already knew that but it’s good to test these things.

Thick Consistency

So a quick recap of what this CSS does on macOS:

body {
  -webkit-font-smoothing: antialiased;
}

This CSS disables the default “subpixel antialiasing” on macOS that is only enabled in web browsers. Text is rendered visually lighter as a result. From my observation fonts are rendered closer in weight to other operating systems. To put it another way: macOS web text is rendered abnormally thick by default.

In conclusion: I’m now on board with Josh Comeau. I’m adding this to my CSS reset going forward. All modern browsers support -webkit-font-smoothing including Firefox 128+ so the -moz-osx-font-smoothing version isn’t necessary.

If you’re still unsure remember this is macOS only. If you don’t use a Mac, who cares! If you’re a Mac developer and leave the default subpixel-antialiasing enabled make sure to test other platforms to ensure your font weight isn’t too thin elsewhere.

It’s important to remember that all fonts will render differently and aesthetic preference is subjective. Choose a weight and size that is legible for the specific font. Using font-size-adjust can help even out any differences in a font stack. Variable fonts allow for more granular control over font weight.

Am I wrong? Correct me on social media.

Scroll to top