homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Gold Sponsor 2015!
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

CSS anti aliasing text? How have they done this?
css anti alias text

5+ Year Member

Msg#: 3280638 posted 3:04 pm on Mar 13, 2007 (gmt 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]



5+ Year Member

Msg#: 3280638 posted 3:14 pm on Mar 13, 2007 (gmt 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" />


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

Msg#: 3280638 posted 3:16 pm on Mar 13, 2007 (gmt 0)

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".


5+ Year Member

Msg#: 3280638 posted 3:21 pm on Mar 13, 2007 (gmt 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.


WebmasterWorld Senior Member 10+ Year Member

Msg#: 3280638 posted 3:41 pm on Mar 13, 2007 (gmt 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.


5+ Year Member

Msg#: 3280638 posted 6:45 am on Mar 14, 2007 (gmt 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]

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved