This page hosts small JavaScript that attempts to detect the exact type of font smoothing used by the browser on the client side.

What

The purpose of the script is to try and gather Web-wide statistics on what type of smoothing is typically used in which browser/OS combinations.

Notably, the script was initially created to quantify the use of ClearType on Windows XP. CT is disabled on the XP by default, but installing some common programs such as IE7 or MS Office enables it and so it was not clear what the actual ClearType adoption between XP users was.

Based on the samples collected so far it appears to be very close to 100%, and this goes contrary to what many webfont services assume by showing their XP samples in grayscale smoothing.

Why

A vast majority of fonts currently available for @font-face embedding looks rather poor in large sizes under ClearType smoothing. For this reason it is essential to know how wide-spread the usage of ClearType is, so not to end up presenting a poorly looking design to a sizeable part of website's audience.

How

The script is based on the idea of drawing a black glyph on an HTML canvas and then scanning the drawing to see if there are grey or colored pixels. Latter indicates ClearType-style smoothing and former - the greyscale one.

The original idea is due to Zoltan Hawryluk, I have merely added the ClearType detection and trimmed the code a bit.

The script

Two versions of the script are available.

1. The hosted version automatically runs the test on a page load and submits the result to the sample repository hosted on this very server.

The digested results can be found on the Statistics page. I am also planning to provide submitters with an access to specific stats pertaining to their websites.

To use this version include the following line in the head section of your HTML:

<script type="text/javascript" src="http://swapped.cc/fst.js"></script>
The script is minified and it is around 1KB. The uncompressed version is here.

2. The standalone version is just the actual getFontSmoothing function and it is meant for custom integration with one's website:

get-font-smoothing.js
2.3 KB, no external dependencies

Caveats

Unsurprisingly, this test does not work for IE. Because there is no canvas. Instead the IE provides screen.fontSmoothingEnabled variable, but it is set to true for either type of smoothing, so it is useless for our purpose.

I wrecked my head over this for over a month and ultimately gave up. Take note that the following less obvious ideas do not work:

• Drawing glyphs with VML - VML uses greyscale smoothing only.
• Using custom font that is hinted differently for Standard and ClearType rasterization. The idea was to make a glyph wider under CT through the use of CT-specific instrustions. This is a no go, see here for details.

Further thoughts

One approach that does somewhat work is to render a glyph with a device font using a Flash applet. This will cause the glyph to be rendered with the OS font smoothing setting.

The caveat here is - you guessed it - it may not work in IE. IE7+ may override the OS font smoothing setting and end up using CT when it is of at the system level. Additionally, there is an issue with Flash getting blocked at the client side with some sort of browser plug-in and what not.