This testpage shows the subpixel antialiasing for text of a variety of sizes. You can zoom the pixel display, shift it left/right, change the font, font size, etc. You can also toggle the display of subpixel grayscale values, this is handy for understanding how subpixel antialiasing is used to effectively increase the spatial resolution for text rendering. An overlay of outlines shows how text renders without hinting applied; especially in the GDI Classic rendering mode you'll see significant differences with some fonts.

If you're using a nightly build there's unfortunately a bug in the canvas text API's when hardware rendering is used under Windows. So you'll need to explicitly disable D2D and enable DirectWrite to see subpixel rendering in that case. Use the steps below:

  1. In the URL bar, enter 'about:config'
  2. Click through the warning dialog
  3. In the filter box, enter 'gfx' and hit return
  4. Change 'gfx.direct2d.disabled' to true
  5. Change 'gfx.font_rendering.directwrite.enabled' to true
  6. Restart your browser

This is not required on Windows XP or on OSX.

You can compare various fonts or various sizes by using snapshots. Just click on the 'snapshot' button when you have a rendering you'd like to save. When you have several snapshots you can toggle between them using the 'n' key.

On Windows, to compare GDI Classic rendering mode to DirectWrite rendering modes, change the 'gfx.font_rendering.cleartype_params.rendering_mode' to see the effect. After changing the mode, click on the 'redraw' button to regenerate the text using the new rendering mode. GDI Classic mode is '2', DirectWrite Natural is '4' and DirectWrite Natural Symmetric is '5'.

Click or press any key to continue...