Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS anti aliasing text? How have they done this?

css anti alias text

3:04 pm on Mar 13, 2007 (gmt 0)

New User

10+ Year Member

joined:Mar 13, 2007
votes: 0


I have always been led to believe that css has no native support for font smoothing...or antialiasing as it is commnly referred.

Can anyone explain to me how the effect has been achieved on the following page - you need to scroll down to the three mini-titles in blue that read 'your comments' etc.

URL: removed

Correct me if I am wrong, but that text is smoothed - has it been done cunningly replacing text with graphics via css I wonder?...Its definitley text though as you can select-copy and your clipboard retains the wording...hmmmm!

Any one who can describe how to get this effect purely in css without any images is a God!

I don't know how it actually renders for anyone else so FYI I'm on IE6.0.2900.2180 on XP Pro SP2.



[edited by: SuzyUK at 3:37 pm (utc) on Mar. 13, 2007]
[edit reason] No site specifics, thanks. See TOS #13 [WebmasterWorld.com] [/edit]

3:14 pm on Mar 13, 2007 (gmt 0)

Full Member

10+ Year Member

joined:July 8, 2005
votes: 0

Look at the CSS!

<link rel="stylesheet" href="/library/styles/sIFR_screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/library/styles/sIFR_print.css" type="text/css" media="print" />

3:16 pm on Mar 13, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
votes: 21

1. Welcome!
2. Most URLs are not permitted (see TOS)
3. The method being used is called sIFR. This stands for "Scalable Inman Flash Replacement". Essentially, the page contains text headings, and then those headings are replaced with a Flash object that uses the text to create nicer looking headings (using any font). There are pros and cons to this technique though, so do your research before you implement it. Google "sIFR".
3:21 pm on Mar 13, 2007 (gmt 0)

New User

10+ Year Member

joined:Mar 12, 2007
votes: 0

The CSS won't help you.

They use sIFR. It uses javascript and flash to allow a designer to use fonts and treatments that are not native on the clients machine. If flash is not installed it falls back on standard CSS documents.

-edited. removed link to sIFR documentation.

3:41 pm on Mar 13, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
votes: 0

CSS doesn't have any 'native' support for anti-aliasing as that's down to the host OS, but it's worth noting that OS-based anti-alisaing is pretty good now. MacOS X's ATSUI tech is very nice to my eyes (although some think it's over-blurred) and what I've seen of Vista's technology is very good as well.
6:45 am on Mar 14, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 16, 2006
votes: 0

You are all wrong. Using CSS, anti-aliasing can be stopped by using px (pixels) instead of pt (point). You must use a pixel font, Verdana at 10px or 12px will have not aliasing. (there are a bunch of web fonts that are not true pixel fonts that will display without aliasing with the px instead of pt method).


Non-aliasing -
<style type="text/css">
.whatever {color: 000000; font:10px 'Verdana'; text-decoration:none}

Will aliasing -
<style type="text/css">
.whatever {color: 000000; font:10pt 'Verdana'; text-decoration:none}

[edited by: Jimmyco at 6:51 am (utc) on Mar. 14, 2007]


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members