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:
Image is the way i would go. There are techniques out there for making the image smaller in size without giving up too much in terms of quality. Plus, once it's downloaded the first time, it can be cached so it won't need downloaded again.
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.
I would always advise against using images for text content. Modern browsers have built-in anti-aliasing capabilities, so large fonts look much better than they did a few years back. (And it's getting better by the day.) Also, using markup such as <h1> allows you to retain the semantic value of your title, which is lost when you use an <img> tag or a CSS background-image.