CODEWITHSUNDEEP
htmlcss
Shiva Wu
Shiva Wu

Reputation: 1094

How to do font antialiasing in web page?

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

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.

Upvotes: 13

Views: 17637

Answers (3)

Jay
Jay

Reputation: 894

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);

Upvotes: 11

Daryl
Daryl

Reputation: 380

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/

Upvotes: 0

Andy Dvorak
Andy Dvorak

Reputation: 491

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?

Upvotes: 8

Related Questions