Anti-aliased font in HTML page

Question

Is there a good way to create crisp, clear, LARGE font in webpages? I need to create a tag cloud effect on my homepage with different font sizes and colours.

I've got it set up in HTML/CSS but on the older browsers or OS's which don't support anti-aliasing as default it looks a bit... crappy.

I've played with sIFR, which worked beautifully but gave me some horrible load effects but I'm now wondering if there is a way to:

a) do browser/OS detection to split users by browser/OS combinations which I KNOW support anti-aliasing (they get raw HTML) and by "others" who get an image tag.

b) Some sort of JavaScript to add antialiasing?

c) Permanent solution to load a BG image in the div and hide the HTML text. (I know, I know, Google horror stories about de-indexing... but is it possible?)

Answer 1

Flash or Silverlight are your best bets for great looking font rendering

Answer 2

a) Of course you can use browser detection. The easiest way to do this is probably using jQuery's browser method. (jQuery is an awesome JavaScript library that makes a lot of JS-development easier in case you haven't heard)

Depending on what browser (or OS) results you get, you could present the user with different solutions, from normal text to something like a Flash solution.

However, I advise against it. Things look better on new machines than old ones. That's just the way it is, which is why I recommend against spending precious time on minor glitches in older browsers. -- Unless users with older browsers are your main demographic of course. In this case, how about you just do it in Flash altogether? No use coding up two solutions if one always works, right?

b) You can in fact create anti-aliased text via JavaScript. Have a look at my project Die Stimme Gottes ("Voice of God" -- not for the religiously squeamish) for an example. In this project, I used the excellent typeface.js for this.

c) Just use CSS, maybe?

h1.welcome {
    background: url('the-welcome-image.png') no-repeat;
    color: transparent;

}

Answer 3

+1 Hank's comment. You have very little to gain by doing this. Some desktop browsers (including IE7+ and Safari) turn on anti-aliasing by default even when it's off at an OS level, and modern (post-XP) OSs tend to turn it on by default anyway. By forcing AA on the rest, you'll:

(+) improve the display a little for IE6 and XP+Firefox users who unwittingly don't have AA

(-) make loading slower for everyone (but especially users of limited mobile devices)

(-) defeat preferred font sizes

(-) unnecessarily annoy the luddites who deliberately disable anti-aliasing because it's “all blurry”(*)

(*: there are limited cases where this does even make sense, particularly for old, fuzzy CRT monitors.)

Answer 4

By the looks of it the best methods (in no real order) are:

1) Use an image. If you rely on SEO for the site then by all means add html and hide it using css using one of these methods

2) typeface.js - JS which will work across most modern browsers. Has some bugs and glitches but works nicely. If you're going to force anti-aliasing on your users then this works. Use sparingly. Author working on Opera and IE8 compatability though...

2) sIFR - Excellent script which dynamically replaces your selected areas of text with flash movies. Again some bugs and glitches, but if you're simply interested in awesome looking font then this is perfect. Increases your page load though, so as ever more is less, use sparingly.

I tend not to go with JS heavy solutions, as I like to have lightning quick page loads, but if you HAVE to have some good looking fonts, then these seem to be the most graceful and simple methods.