Jujusoft

A lot of the programming I've been doing the last few years has involved displaying text on a screen. There's nothing unusual about that, since text is fundamental to pretty much ALL software, but when you are working on a program for reading electronic books the ability to control the display of the text becomes very important. In general if you are designing a program to run under windows, any text displayed on the screen will be rendered by the windows sub-system. There are pros and cons to this, covered later in this page.

An alternative is to bypass the display subsystem. Or to put it another way: Enter a world of pain. Instead of just telling the GDI to draw some text on the screen, you become responsible for every pixel drawn. Still, if you're up for it (or a control freak), there is some fun to be had, and there is always [at least] educational value in the "starting from scratch" approach.

The image on the right was rendered using my own font renderer, using the same font as this paragraph (Georgia). You can see things tend to look very different depending on the rendering method you adopt.

The rest of this article is concerned with the general issues which must be dealt with when rendering text to a computer screen, and the existing approaches to them.

The number one problem is the resolution of the screen. Typically a printed page has a resolution of at least 300dpi (often 600dpi+), whereas a computer display can only offer resolutions in the range of 72-100dpi. What this means is that we only have about 25% of the resolution for display as we have for printing.

To illustrate what a large difference there is between screen resolution and print resolution:

1. Print resolution magnified 4x, black & white

2. Screen resolution magnified 4x, greyscale

Doesn't the second one look awful! See how all the soft grey smudgy pixels have made the word all blurry? Hey, I know... Why don't we force each of the grey pixels to either black or white... that will make it sharp again!

3. black and white

Doesn't that look hideous! Given a choice between 2 and 3, I would go for 2 any day! The jagginess visible in 3 is called "aliasing" and the smoothing effect of the various grey pixels in 2 is called anti-aliasing. As a rule anti-aliasing is good, but it does rely on those different greys being available to display, and can result in blurry looking text. So let's look at another option:

4. black and white + font-hinting

This option is most likely what this paragraph is being viewed with (at least if on a screen on a PC). While still chunky, you can see it is a lot neater than 3. The reason for this is TrueType "font-hinting", a technique to adjust the outline of glyphs depending on the point size being used, so as to maintain an overall sharpness, or readability. In a nutshell, the font changes shape to suit the point size. Unfortunately the results you get with font hinting depend on the diligence of the person designing the font. With font hinting, instead of just one sets of glyphs (a glyph is the visual representation of a character or symbol), the designer must effectively recreate the set for different sizes, almost like creating different fonts. If they dont do this then font-hinting doesn't work, and at small sizes the font will look like 3. If they dont do it well then the result is that the font will change its appearance too drastically as the user changes size, or it will look plain wrong at certain sizes.

5. color + ClearType smoothing

With WindowsXP came the option of ClearType , a form of antialiasing designed primarily for LCD screens. Cleartype incorporates font-hinting with antialiasing, also taking advantage of the alignment of red, green and blue sub-pixel display elements. Adobe call their version of what is a very similar technology CoolType. [I call mine GoogyText ] To learn more, there's a great reference about ClearType plus a downloadable demo at http://grc.com/cleartype.htm .

Who uses what

Pictured below are partial screen shots of the same HTML page, as rendered in MSIE 5.5 (with font-smoothing enabled) and my own renderer, which uses anti-aliasing but doesn't support hinting.

Font hinting, limited smoothing

This is a good illustration of TrueType rendering. Almost all text rendered onscreen under a Windows OS will exhibit this "stepping" between styles as font size is changed. (especially between the ranges illustrated here). The good thing about MS's approach is that font authors can have very fine control over the quality of fonts at different sizes. This becomes especially important in lo-color screens or devices. The bad thing is that fonts tend to "pop" between thick and thin at a certain point, often to the annoyance of the user. They also lose a lot of their character as they get smaller, making it harder to recognize the font being used. Note the difference in weight between the 5th and 6th last lines of sans serif text, and note also the wonkyness of the ends of each line. Ideally, all the 'a's should lie on the same straight line.

Note that the last few lines (sans serif) are quite smooth, whereas the first few (italic serif) are fairly "jaggy". This is because TrueType rendering supports a limited form of AntiAliasing, which relies of font-hinting as well. The font at the bottom appears to have better hinting for smoothing that the font at the top.

Anti-aliased, no font-hinting

You can see here that the scaling is much more regular, with the first and last letters of each row forming near straight diagonal lines, and there is no obvious point at which the font pops between heavy and light. Also, this method does not require font hinting, so the quality is fairly consistent— note in the first example the difference between the serif and the sans serif fonts. Those are the good points.

On the down side, this kind of rendering can appear a bit "soft". Note that the italic text, while very smooth, also appears a little blurry. The problem is that smooth and blurry are pretty close to the same thing when dealing with low resolution displays.

Conclusion

There is no best way to render fonts; the appropriate method depends on your situation and priorites. If sharpness is paramount, then MS TrueType [w/ ClearType] is probably the best choice. If layout and positioning are crucial— say, for previewing a book page or placing text with other graphics— then [non-hinted] anti-aliased text is probably the way to go.

There is also middle ground to be explored. Eg, antialiased text can be made to seem less blurry if the text is vertically aligned so that its baseline falls exactly on a pixel boundary. By doing this way you dont end up with a grey shadow under all you letters. TrueType is much stricter with its use of antialiasing, applying it only on diagonals and curves specifically so as to avoid those grey shadows around letters.

__________

NOTES:

1. TrueType Font hinting appears to be Apple's invention, and anyone who creates a renderer which uses it may owe them money, according to http://www.freetype.org/patents.html

2. I have heard that Microsoft may have successfully patented at least some part of the ClearType technology, so that may be bad news for the rest of the font-rendering world... we'll have to wait and see.