Improving the look of web fonts

In my opinion, web fonts were a big step forward in web design. We can now have all the great creative freedom that was once exclusive to print designers. Web fonts do experience rendering problems however, and you may have noticed the edges of text can be jagged and non-aliased, depending on the browser, and the font being used. There are many options to improve the rendering of web fonts, which can be tweaked depending on the needs of the situation.

The first solution I found was this one:

This fix makes web fonts look great in Chrome, and text reverts to fallback fonts, such as arial, in other browsers besides Chrome, when this is applied. Because the amount of traffic using Firefox and Internet Explorer combined is greater than that which is using Chrome, on the sites I manage, I stopped using this. It does look great in Chrome though.

Currently, I am using the following CSS:

html {
-webkit-font-smoothing: antialiased;
-webkit-text-stroke: 0.2px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.007);

This applies these properties to all html on the website, but I then specify different settings for certain elements on the site, as some text will look better at different settings (white text on a coloured background typically benefits from different settings, for example).

If you would like to improve the look of web fonts, I would recommend playing with those properties and see what you can come up with.

Please follow and like us: