IE7, unlike Firefox, uses ClearType by default. More info http://here.

IE and Safari, for XP, use anti-alias by default.
You can set your OS to display in ClearType.

Logically:

The browser may use (a) the system wide OS setting, or (b) an internal setting. FireFox has a "gfx.use_text_smoothing_setting" variable.

Additionally, it may use (1) the OS engine, for example ClearType on Windows, or (2) a built-in drawing engine -- Safari on Windows springs to mind, as this has been heavily commented on (primarily by Windows users, I probably should add). Amaya also has an internal drawing engine (FreeType 2.0).

I don't think web developers can change the setting; even if they could, why would they change the user's preference?

[Edit] Amaya is an interesting beastie. It found errors in these very pages:

*** Errors/warnings in http://www.typophile.com/files/css/b438f6988ad15b3140aeba330d39ef16.css
line 1: CSS property ignored: "text-weight:bold"
line 1: Invalid width value "210"

*** Errors/warnings in http://www.typophile.com/forum
line 56, char 546: mismatched tag

-- but I'm not too wild about their rendering:

thanks for the feedback

@Theunis de Jong, web developers cannot change this setting which I agree is how it should be

I wrote a blog post on this stuff here if anyone's interested: http://www.combustingboy.com/2009/04/26/browser-anti-aliasing-do-you-des...

>web developers cannot change this setting which I agree is how it should be
Should the developer of a single web site be able to control the appearance of all sites on a user's machine regardless of the user's settings, or just the appearance of their site?

I agree, that this situation is nearly hopeless for design, and readability, because the reality is the user doesn't really control much of anything, OS don't control nearly enough of what they claim to control, and browsers, which should have their own rendering (and perhaps fonts), independent of the OS, (except Vista Safari, e.g), don't.

On your site:
"So essentially you can think of an 800×600 monitor resolution as 2400×600."
Essentially, however if you think this way, either you lose you color specification, e.g. black type is not, the user rotates the screen, or worse. You have 600 X 600 of 'a' color. You also have 600 X 600 for the location of the spacing units, unless you want the image of a glyph to vary from one location on the screen to another, ala Quartz.

"... an unprecedented innovation in font display technology that dramatically improves font display resolution and marks a genuine breakthrough in screen readability."
We all wish this had been true of ClearType, but as, and after, the uber-hype died out, we were more clearly informed that ClearType is just another way of making preview fonts for print, in consideration the low resolution range most users are afflicted with in their displays.

Cheers!

"You also have 600 X 600 for the location of the spacing units, unless you want the image of a glyph to vary from one location on the screen to another, ala Quartz."

Adobe's CoolType does this when set to LCD optimized setting, as do latest versions of Microsoft's ClearType, starting with Vista I think.

Cheers,

T

I really like this site, and there is a blog post written about web font rendering: Display Type & the Raster Wars.

>Adobe’s CoolType does this [subpixel spacing?] when set to LCD optimized setting, as do latest versions of Microsoft’s ClearType, starting with Vista I think.

I know it’s true for CT … except that you can’t turn on the new version of CT in Vista, it can be used only by programs specifically written for the new version.

"Does anyone know of an article or source of information about what determines if a browser will provide anti-aliasing on type on the web?

A good article? "Display Type & the Raster Wars", e.g not...

All browsers, x-ept Safari on Vista, which brings it's own, use the native OS rendering which goes by two choices; the choice of the user on the Mac is of a size below which AA will not be used, or on windows whether to use standard or CT, or none for AA. In addition, each font can say at what size AA should start going up the resolution spectrum. I don't know what listens to the latter.

"Is it at the browser level or OS level?
Yes, and more as I said.

"as do latest versions of Microsoft’s ClearType, starting with Vista I think."

As Miha points out, there could be privatized versions of CT from now on. As MS people explained to me, and I was gracious enough to suggest at a critical juncture in our standards discussions, that MS explain it to everyone present...Tom you was there:

MS 'invented' an additional set of arguments for Instruction Control, a once obscure TT instruction, that's been brought to off-center stage by the resulting use.

Once any AA is in the OS it seems, y hints work about the same everywhere. X hints are treated with a variety of ignorance.

One option for CT's Instruction Control is 'compatible', which makes fonts rendered on integer metrics in the past, do so on the same (x) metrics when rendered in CT. Since the fonts previously rendered on whole pixels, this mode does too. This is obviously important to protect the installed base of docs. I learned later that this mode reputedly sends the data to a PS rasterizer to get the integer metrics exactly right. The bodies and shapes are still rendered aliased, after some not particularly unintelligent... averaging (intelligent for imaging, but sadly not for type). The quality of results wholly depend on the user's resolution, and the (x) luck of the outline. This is an option of limited use to anyone other than MS.

The other option, called 'natural' forget about. MS wanted it part of the ISO standard as it is now, but they did not, and do not, want to document it. This option uses whatever image it gets, repeatedly, unlike Apple and Adobe AA.

The image above, (now replaced on wikipedia by mea culpas to low resolution users from folks no longer employed by the companies they were representing when they were quoted), shows that repetition (top), as well as the saccadic pitfalls it introduces.

After permission and size, I'll get back to this issue(s) :)

Cheers!

I am so happy this question was asked, and that lots of folks are chiming in.

From what I gather in the discussion thus far, type on websites is antialiased depending on these factors:

* The visitor's OS antialiasing settings
* The visitor's OS's rendering engine (and any related settings, if different than general OS antialiasing settings)
* The visitor's browser antialiasing settings
* The visitor's browser's rendering engine (and any related settings, if different than general browser antialiasing settings)

To these layers of "interpretation" of a typeface, should we add the following:

* Hinting instructions provided by the suggested typeface?
- if so, at what level are these hinting instructions applied? OS? Browser?

All of those components *can* affect how type is rendered, but only one rendering engine and one anti-aliasing setting will be in play at a time for a given browser.

Or to put it another way....

There's a rendering engine, and anti-aliasing settings (some of which may be user-controlled) on top of that.

I am of the impression that the only browser with a font rendering engine of its own is Safari for Windows. If you're using Safari on Windows, I would expect the system level settings are irrelevant.

Aside from Safari-Win, even when it's possible for a browser to adjust anti-aliasing settings, most just inherit the system-level settings.

The hinting in the font interacts with the rendering engine and anti-aliasing settings, wherever they may be at the moment.

Regards,

T

>The hinting in the font interacts with the rendering engine and anti-aliasing settings, wherever they may be at the moment.

... or it doesn't. "Wherever they may be" is a simple, but unfortunately inaccurate exaggeration. And, it's one of the three reasons we don't have readability on the web, too many cooks spoiling well-grown brain food.

Cheers!

The current Safari 4 beta is using Windows' standard rendering method by default (ClearType, Grayscale or B&W). But you can change a preference to use Apple's own rendering engine.

I found this post when looking for a way to detect whether a browser is using antialiasing. And for that I found a really nice solution I thought I'd share.

There is a Javascript (see http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing...) that does exactly that. It's really easy to use:

1. Include the script.
2. Call the TypeHelpers.hasSmoothing() function (preferably on page load).
3. Add a class to the html or body element.

Using jQuery step 3 is easily done with:

$(document).ready(function() {
  if (!TypeHelpers.hasSmoothing())
    $('body').addClass('font-antialiasing-disabled');
  else
    $('body').addClass('font-antialiasing-enabled');
});


Pages can then be styled with respect to this setting.

For example, on my site I use a custom font that is rather illegible without anti-aliasing, so in my CSS I have:


body.font-antialiasing-disabled {
  font-family: Georgia, serif;
}


To see it in action I use it live on my site Lumens.
Hope this is helpful for someone.

Cheers!