How to do font antialiasing in web page?

Question

I\'ve been working on how to perform font anti aliasing on web pages. Here\'re some solutions I found:

• -webkit-font-smoothing attribute: It seems to w

Answer 1

There isn't really a good cross-platform way to force clients to anti-alias text, and that's generally the point. Clients get to decide how to render text because the graphical capabilities of operating systems vary widely, and some people may wish to disable anti-aliasing to improve performance (on older Windows XP systems with wimpy graphics cards, for example).

Speaking from 12+ years of Web development, Usability and User Interface experience, I would suggest that unless you have a compelling reason to require smooth, anti-aliased fonts on a specific platform, leave text rendering up to the browser. Most modern browsers and OSes anti-alias text anyway, so it really shouldn't be a very big deal.

As for how Gitorious achieves their smooth fonts, as Frankie mentioned, they use background images in CSS:

-HTML-

<h2>Nobody will ever see this text if they have CSS enabled. Only search engines, screen readers, and nerds will ever see it!</h2>

-CSS-

#header #introduction h2 {
    background: url(http://gitorious.org/img/external/header.png) no-repeat;
    height: 74px;
    text-indent: -9999px; /* hide text off-screen */
    width: 447px;
}

Is there any particular reason why you need fonts to be anti-aliased?

Answer 2

One approach as suggested here is to use the the CSS property text-shadow, like so:

text-shadow: 0 0 1px rgba(51,51,51,0.5);

Answer 3

Some sites use background images for text and put the text in the markup with the css text-indent:-9999;

An alternative popular method is to use http://cufon.shoqolate.com/generate/