Stop -webkit-font-smooting: antialiased

Media

There was a CSS statement that was very much in vogue a few years ago, and we're still dealing with vestiges of it today:

-webkit-font-smoothing: antialiased;

It was (ab)used in a misguided attempt to render thinner fonts, but all it did was lower their effective resolution. When you start messing with how an operating system renders fonts, you get into serious accessibility (and aesthetic) problems.

I was reminded of this today. Compare this screenshot from Twilio.com, taken with Safari (ala Webkit) and Firefox on my non–retina desktop monitor. No prizes for guessing which is which.

Safari and Firefox showing font rendering with webkit-font-smoothing

Using lighter font weights is fine, provided you can still make out the shapes. Using a narrow, poorly defined font with thin weight and abusing the webkit-font-smoothing property is a bad typeface trifecta.

If you ever find yourself asking "should I use this CSS property?", the answer is no. Ditto infinite scrolling, but that's for another post.

Author bio and support

Me!

Ruben Schade is a technical writer and IaaS engineer in Sydney, Australia who refers to himself in the third person in bios. Wait, not BIOS… my brain should be EFI by now.

The site is powered by Hugo, FreeBSD, and OpenZFS on OrionVM, everyone’s favourite cloud infrastructure provider.

If you found this post helpful or entertaining, you can shout me a coffee or buy some silly merch. Thanks!