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 work only on the newest browsers. I didn’t try it out.
• Google Font API: this is great, and easy to use. I wonder how to use it offline.
• A javascript library called typeface.js: which draw the text with canvas or VML. Looks great, but I failed to use it.
• Maybe css3 supports this.

Also, I found this website, gitorious.org, uses very beautiful antialising fonts on the homepage. But I wonder how it worked. The source code shows it’s just plain text, but cannot be changed using debugging tools such as Firebug. Does any one know what is behind this? Or someway else to work around this font problem.

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?