Anti-aliased font in HTML page

antialiasing browser-detection
MrFidge picture MrFidge · Mar 19, 2009 · Viewed 21.4k times · Source

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

bobince picture bobince · Mar 19, 2009

+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.)

Related questions

Webfont Smoothing and Antialiasing in Firefox and Opera

I have custom-made web fonts used on my site. To style my rendering output, I used the following code: //-webkit-text-stroke-width: .05px; //-webkit-text-stroke-color: white; -webkit-font-smoothing: antialiased; This works fine on Safari and Chrome (edges are sharper and lines are thinner). Is …

Read More
How to apply font anti-alias effects in CSS?

How can we apply Photoshop-like font anti-aliasing such as crisp, sharp, strong, smooth in CSS? Are these supported by all browsers?

Read More
css transform, jagged edges in chrome

I've been using CSS3 transform to rotate images and textboxes with borders in my website. The problem is that the border look jagged in Chrome, like a (low-resolution) game without Anti-Aliasing. In IE, Opera and FF it looks much better …

Read More