Michael Gearon

UX Designer at BrandContent

CSS Font Smoothing in Webkit and Firefox

Written by Michael Gearon on the March 11, 2016


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.


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.

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


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.

Have an idea? Get in touch