Forcing anti-aliasing using css: Is this a myth?

Oh yes you can:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;

Source for Firefox, thanks Justin for the heads up.


There's these exciting new properties in CSS3:

font-smooth:always;
-webkit-font-smoothing: antialiased;

Still not done much testing with them myself though, and they almost definitely won't be any good for IE. Could be useful for Chrome on Windows or maybe Firefox though. Last time I checked, they didn't antialias small stuff automatically like they do in OSX.

UPDATE

These are not supported in IE or Firefox. The font-smooth property is only available in iOS safari as far as I remember


No, there's not really any way to control this as a web developer.

Small exceptions are that you can do some fake forcing of anti-aliasing by using Flash through sIFR, and some browsers won't anti-alias bitmap/pixel fonts (as they shouldn't, more info: Anti-Aliasing / Anti-Anti-Aliasing).

Also, as Daniel mentioned, it's ideal to be using em units for all fonts, see The Incredible Em & Elastic Layouts with CSS for more information about this.


I found a really awkward solution using the zoom and filter ms-only properties Example (try with no aa, standard and cleartype): http://nadycoon.hu/special/archive/internet-explorer-force-antialias.html

How it works:

-zoom up text with zoom:x, x>1

-apply some blur(s) (or any other filter)

-zoom down with zoom:1/x

It's a bit slow, and very! memory-hungry method, and on non-white backgrounds it has some slight dark halo.

CSS:

.insane-aa-4b                  { zoom:0.25; }
.insane-aa-4b .insane-aa-inner { zoom:4; }
.insane-aa-4b .insane-aa-blur  { zoom:1;
  filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
}

HTML:

<div class="insane-aa-4b">
<div class="insane-aa-blur">
<div class="insane-aa-inner">
  <div style="font-size:12px;">Lorem Ipsum</div>
</div></div></div>

You can use this short jQuery to force anti-aliasing, just add the ieaa class to anything:

$(function(){ $('.ieaa').wrap(
'<div style="zoom:0.25;"><div style="zoom:1;filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);"><div style="zoom:4;"><'+'/div><'+'/div><'+'/div>'
); });