Question

The website I am creating has a fairly large title text for its banner. Using a plain font gives it a very jagged look, but it seems like an anti-aliased image would be a fairly large download. Which way would be the best choice, or is there a better method for large titles?

Here is the banner with pure text. Scaled down it is not as noticeable, but full size it’s about 600px across. Open the image separately for the full effect:

Answer 1

Some fonts are better than others where the jaggies are concerned. That being said, a no-displacement text shadow the same color as the text with a blur of one pixel will cure what ails ya most of the time:

h1 {
   .
   .
   .
   color: white;
   text-shadow: 0 0 1px white;
}

I’ve found that it’s just enough to antialias the font, and if I’m not using the text-shadow for any other effects, it’s a good solution for anything even reasonably modern. Older browsers (you know who you are) will get the jaggies, but you can’t win ’em all.