LCD, ClearType™ & MS Sans Serif
Sunday, February 22nd, 2004In a long overdue move, I have recently upgraded my computer system. Along with a much faster CPU [and more RAM etc] I decided to shell out the extra money for a 17" LCD display, something I’ve been meaning to get for ages.
Boy, are these things sharp!
The problem is, at 1280 x 1024 — the native resolution for most 17" panels — the pixels are just so gosh-darn small and well defined that fonts which use single pixel stroke widths [eg Courier, MS Sans Serif] are uncomfortable to read at the default sizes. It seems weird but I think maybe a little bit of softening is not such a bad thing. Here is my impression of the difference between pixels on my old Sony 17" CRT and my new Hyundai 17" LCD [magnified 600%]:
CRT |
LCD |
See how the sharp version is a little too sharp, with the individual pixels drawing attention away from the letterforms themselves.
Enter ClearType™
Fortunately, Microsoft lets you enable ClearType on XP, meaning that spindly fonts on LCD displays become smooth and black again, without getting blurry. This is achieved by using a special form of antialiasing. Here’s how:
Standard |
ClearType™ |
Note that the second example is softer and the letter shapes seem more "continuous". The pixel values here are chosen in a similar way to standard anti-aliasing , but have also been tinted as well. The reason for this can be seen in the next figure:
Standard |
ClearType™ |
Here I have magnified not just the pixels, but the color sub-pixels of the display device itself [the individual Red, Green and Blue mini-pixels which constitute each full color pixel]. Note how the second example "sharpens up" again. This is because the colors for each whole pixel are chosen specifically with the RGB sub pixel units in mind. For example, if we want to color only the left side of a pixel black, and we know that the sub pixel components are arranged in RGB order, then we can set the pixel color to RGB(0, 128, 255). This is quite different to standard anti-aliasing, where we would average the value across the whole pixel, choosing RGB(128,128,128) instead. In this way ClearType [and equivalent methods] allows an effective tripling of horizontal resolution.
Visit this site for an extremely good description of both the theory and implementation behind this technique, as well as a downloadable demonstration program.
ClearType makes it all better? Not quite…
For any form of text anti-aliasing to work, we need to have the letterforms stored at a higher resolution than that at which they are being displayed. The best way to do that is to store them as shape descriptions rather than clumps of pixels. Most contemporary fonts are stored this way, including favourites like Times New Roman and Verdana. Collectively these fonts are referred to as vector fonts [TrueType™, OpenType™ and PostScript™ fonts are all examples™ of vector fonts], as opposed to the hand-pixelled variety which are known as raster or bitmap fonts .
WindowsXP uses Tahoma as its default font for dialogs and menus. Since Tahoma is a TrueType font it can be antialiased, and can take advantage of ClearType technology on LCD displays. Unfortunately, Tahoma is not one of the standard fonts included with Windows95/98, so developers don’t tend to use it for their applications. Instead, they will tend to use the default dialog font pre Win2000, which is MS Sans Serif .
And MS Sans Serif is a frikkin bitmap font.
This means that any app which uses this font will not benefit from having ClearType enabled. In general, this covers 90% of all Windows applications! [including mine, for now]. The upshot is, even though turning on ClearType will make your desktop and system dialogs look great on an LCD screen, you will still be seeing copious amounts of spindly pixellated fonts when using 3rd party applications. Only now they will look even worse because the user will be able to make a visual comparison between ClearType Tahoma used by the system and pixellated MS Sans Serif used by everything else.
Always Remember:
- Use vector fonts (eg TrueType) wherever possible, because you never know what sort of hardware will be displaying your text. Take special care to avoid bitmap fonts on web pages, or anything that might need to be printed. [Eg: this site looks like crap on my new monitor, because it uses MS Sans Serif, instead of Microsoft Sans Serif, the TrueType version of the same font.]
- If running on an LCD display, make sure that your desktop resolution matches your displays native resolution. If you run a 1024 x 768 desktop on a 1280 x 1024 LCD (125% scaling), you may get crappy pixel doubling and smudging effect, and using ClearType may actually make things look worse ! [although my LCD does do a surprisingly good job at this kind of scaling]
100%
ClearType125%
ClearType
bicubic filtering125%
ClearType
no filtering - If you’re a developer, bear in mind that the default font MS Sans Serif is NOT a TrueType font, and will not benefit from anti-aliasing, ClearType or related technologies. Also bear in mind that changing your application’s font can introduce whole new problems. Namely, if you are coding for Win98 or earlier, neither Tahoma nor Microsoft Sans Serif can be counted on to be present. It may be necessary to do a run-time check and set the font dynamically.*
__________
* UPDATE (28/2/05): Raymond Chen has some useful information for developers about getting the desired Windows2000 system font without screwing up under Win98, which avoids run-time checking hassles.