Use Font Smoothing For Better Web Typography via

Use Font Smoothing For Better Web Typography

On average, websites are 95% text. That’s why it’s essential for web designers to understand the importance and impact of typography and fonts in web design. When all’s said and done, there’s one snippet of CSS code that every web designer should use on their website. This CSS code snippet will dramatically improve the way fonts are displayed on any website.

Introducing the font-smoothing property in WebKit and Firefox! The code snippet below is so simple, yet has the ability to completely transform the look of any website. When you use WebKit and Firefox font-smoothing, website readability improves significantly.

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

Take a look at the examples below to see the difference font smoothing makes on XO PIXEL:

Without Font Smoothing

With Font Smoothing

The difference might be subtle, but it’s there. The text using font-smoothing is a lot smoother and easier on the eyes. Be sure to use WebKit and Firefox font-smoothing for better web typography. It can really improve the readability and overall aesthetic of your website.

Like this article?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.