CSS Font Smoothing in Webkit and Firefox

Written by Michael Gearon on the

Last updated 11

Using font smoothing can turn a horrible typeface to a beautiful one. The Webkit and Firefox browsers make the fonts look slightly thicker, using just two lines of CSS we can solve this problem.

Syntax

The default value for -moz-osx-font-smoothing is auto. This will work in Firefox using the -moz- prefix, and for it work in Opera, Safari and Chrome use the -webkit- prefix. This is not supported in any version of Internet Explorer or Edge.

body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; /* Default: auto */
}

Example

Static Example

The top version is antialiased, whilst the bottom is not.
Screen Shot 2016-03-11 at 21.40.27

Live Example

To view the live version of this please click on ‘edit on CodePen’ thanks @smfr for mentioning this.

See the Pen CSS – Font Smoothing by Michael Gearon (@michaelgearon) on CodePen.0

Written by Michael Gearon

Michael Gearon is a UX Designer at BrandContent. Specialising in voice assistants and CRO, I have a wealth of experience in UX, UI and website design. Based in Cardiff, South Wales Mike can help local businesses with their online presence.

So now what?

Let's chat, and get things going