bITs: How to make web fonts smoother with css

This post is quite old but it is still getting a lot of traffic. However, I no longer recommend the trick I outlined below. Web fonts and browsers have improved a lot since 2011 and there are now tons of high-quality free fonts that no longer look jagged in modern browsers. Google Fonts is a good place to start looking.

getflywheel_728x90

Noticed anything different on my site today? It’s very subtle but it’s there. The texts are anti-aliased and have none of the jagged corners like they did previously. Well, not “anti-aliased” in the real sense of the word but the effect is pleasing. And this can be done by adding this property to your css.

[box style=”rounded” border=”full”]text-shadow: 0 0 1px rgba(51,51,51,0.2);[/box]

In my website I added the property to the headings tags. The text shadow color should be the same color as the text, and in RGBA.

I found this website where you can generate text-shadows and other cool CSS3 effects: http://css3generator.com/

5 thoughts on “bITs: How to make web fonts smoother with css

  1. Hey Jasper, what trick are you using now? because for some reason I’m still having the same problem with some google fonts that i use…

  2. Hi Jeff. Web fonts have become better at anti-aliasing since two years ago. Before using this trick you may want to check first is the font you are using looks good as it is. Actually I’m not using this trick anymore. Two years ago I was using a font (can’t remember which) that looked hard-edged and needed some serious smoothing.

Leave a Reply

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