CSS Font Smoothing in Webkit and Firefox
Last updated on
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 of font smoothing in CSS
Static Example
The top version is antialiased, whilst the bottom is not.
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 is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.