Making your website fonts a touch better

Hi there,

So until all the browser vendors decide to implement font-smoothing in css (not holding out any hope), here's a little trick I learn't of and started using that makes the fonts look a touch better when in your website.

there are a couple of other techniques out there like cufon and phark which tbh seem a little bit like overkill for the sake of having your text look good. So whilst browsing round, I noticed an article that mentioned the text shadow effect and having a shadow that is between the backgound and your text colour will help smooth out those nasty jaggies....

I have tried the line
    -webkit-font-smoothing: antialiased;

which doesn't seem to give me any kind of different result.  Instead, lets use the shadow ,method here's a quick example:


     font-size: 75%;
     background-color: #f0f0f0;
     text-shadow: 0 0 1px rgba(51, 51, 51, 0.5);
     font-family: Helvetica, arial, freesans, clean, sans-serif;

I've set up the a text size and family (seems to look better on helvetica based fonts on the ones I have tried). then I have set a text shadow up with no offset but a slight blur (1px) and semi transparent grey (the rgba).

coming to set a heading up, I have set its colour to a darker grey too:

h1 { font-size: 1.8em; font-weight: normal; color: #666; padding: 0; margin: 0;}

The results are as below (before and after)

Not perfect, but a great quick solution.  i'm sure if you played more with the colours, you could get it a touch better.

A.