13

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Shiva Wu
  • 1,074
  • 1
  • 8
  • 20
  • adobe has a few anti-alaising fonts as well. – Jim Nov 02 '10 at 05:06
  • that site you've seen... uses pure and plain images to achieve that effect: http://gitorious.org/img/external/description.png (just an addendum) – Frankie Nov 02 '10 at 05:10

3 Answers3

10

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);
Jay
  • 884
  • 11
  • 16
8

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?

Andy Dvorak
  • 491
  • 6
  • 11
  • Oh, it's just an image, how did I miss that? Why did it also add the plain text anyway? ~~><~~ There's not particular reason. Just call it personal hobby. I like antialising fonts way better than the other way around. – Shiva Wu Nov 02 '10 at 08:55
  • I agree with this answer, somebody might for example use links or lynx to surf, then your fonts dont matter anyway. – rapadura Nov 02 '10 at 18:41
  • Windows ClearType fails miserably at larger font sizes like 20px and more. Edges get very jagged then. Greyscale smoothing would be the better choice here but neither Windows nor Mozilla come to think of it. In this case I would really like to change that using CSS. – ygoe Feb 10 '11 at 12:49
  • The same could be said about anything in the browser that can be modified with code. Background colors, font families, link colors, images, layouts... In the end, a design is up to the designer, based on what the client wants. Accessibility issues are important but personal philosophy shouldn't get in the way of answering someone's question about how to go about something. Being able to control the anti-aliasing via CSS/JS helps ensure more cross-platform consistency. – Beejor Feb 16 '15 at 03:16
0

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/

Daryl
  • 382
  • 3
  • 7
  • 19