Anti-aliased text with css/javascript for Large font size???

Question

I am using Large fonts in my website at a few places and they don't appear anti-aliased or smooth... I was wondering if their is any way to show large anti-aliased fonts for browsers on windows OS which has anti-aliasing switched off as default... Similar to something they have on this website here

Answer 1

You can't control system anti-alias in CSS.

For that, you would have to use Flash text replacement, like sIFR (they are using h2swf)

Answer 2

If the user's OS or browser does not have anti-alias switched on, there's nothing you can do to force either to use it. You can use other rendering platforms like Flash, or using CCS to replace text with images, to allow fonts to be displayed with anti-aliasing, but it does seem like a kludge for something as simple as rendering text. Technologies like Flash will also alienate certain audiences, either whose devices have no support for them or they simply opt out of using them.

If your user does not have AA enabled, arguably they are displaying a preference or simply don't care about the particulars of how the font is rendered. At the end of the day, you simply cannot directly control the client your users will use to consume your website. On the web you will always be at the mercy of the client application. The best you can do is present it clearly and in such a way that it should be easy for users to get the best experience they can achieve with their client.

Don't lose any sleep over whether your pixels are slightly less pretty on one client.

Answer 3

Cufon is an alternative to sIFR. See comparison here: http://net.tutsplus.com/tutorials/html-css-techniques/six-ways-to-improve-your-web-typography/