Displaying Digital Fonts (Part 2 of 5): Rendering

You can read the first post here.

If a display is representing the caves wall, the raterizer can be understood as the source of light that projects the shadow of a type face onto the caves wall. Rasterizers are software modules that calculate the pictures of each character for each point size for a display device. Raterizers are usually part of the operating system. Applications that need to display type can make use of the OS rasterizer, which is the case for most software. However there are software developers who implement non-system rasterizer modules into their software. Adobe’s Creative Suite is an example. It contains the same rasterizer on different platforms. That way Adobe makes sure that the type in their CS applications looks the same regardless of the system that it is displayed on.

Rasterizers analyze and interprete the outlines of a font to calculate the display of each glyph at each point size. As described earlier the easiest method to create a picture of a glpyh in a certain point size, is to display type in a grid of black and white pixels. The process is rather simple, as long as the font has not been hinted. But unfortunately the result is almost never satisfying. Issues may be that the height of the letters can vary although they should have the same height. E. g. the cap height varies from glyph to glyph and therefore words written in upper case letters looks wavy on the top edge. Other issues that may occur are incosistent stems  (vertical or horizontal) and blobs where two diagonals join. Many times the counters in characters like  „o“ and „e“ disappear and the glyph looks all black.

All these issues can be solved with hinting. We will discuss hinting later in this text. For now we are looking at how rasterizers have been improved to optimize the display of type on screens.

Gray Scaling

Gray scaling helps reducing the issues with type when displayed on low resolution devices like desktop monitors. The effect that gray scaling has on the display is that edgy aliasing effects as they appear in diagonals and round stems are smoothed out. It does so by partly replacing the black and white pixels through gray pixels. The stem of a glyph, no matter, if diagonal or round is dark in its center and fades to white towards its edges. The rest is handled by the human eye. Since it is not able to distinguish the shades of gray at the edge of the glyphs the edges appear as smooth and clean which lets the over all picture of the glyph appear friendlier.

Example of Gray Scaling

The typeface will be more comfortable to read, but it can happen that a type face loses it’s crispness. In some cases the font looks in small point sizes like as if a grey veil was hanging over it.

Even if a type face may look friendlier than with Black and White rendering gray scaling carries the disadvantage that the type face does not look as sharp as it should. In some cases (certainly very light weights of a font family) the display only consists of gray mist that is indecipherable below certain point sizes.

Subpixel Rendering

The last stage of the rasterizer’s evolution is subpixel rendering. This technology finds it’s origin in the emergence of LCD monitors. With LCD monitors every pixel is divided into three vertical thirds, which are called subpixels. These subpixels are red, green and blue. The order of these subpixels can differ, like the alignement from left to right or from top down to bottom up. The rasterizer adapts to this as necessary. However, with most LCD monitors the subpixels are arranged from left to right in red, green and blue. If a subpixel is turned on than it shines in it’s own color. All three pixel turned on at the same time make the whole pixel appear white. Turning the subpixels off resulsts in black subpixels.

The trick with subpixel rendering is that the rasterizer uses the subpixels and hence the horizontal resolution is tripled. The rasterizer now uses the same principle as with Black and white: subpixels within the outline are being displayed as black, whereas subpixels which are not falling into the outline stay in their pre-defined color, sometimes they are also being displayed in a gradually weaker color. Thereby, the transition from the stem to the background looks much crisper compared to gray scaling. By using the artificial tripling of the resolution, the characters displayed look much more like the original design.

The vertical resolution of characters must do without subpixels, and that is why especially diagonal stems can show edges. Microsoft’s ClearType-Technology as part of the new DirectWrite module, the latest development in subpixel rendering, deals with this drawback. The rasterizer uses subpixel rendering in the horizontal while at the same time using gray scaling in the vertical direction. By doing so, the display of digital type on low resolution screens can even be improved again. Internet Explorer 9 is the first product on the market known to use this special rendering technique.

Subpixel without Direct Write

Subpixel with Direct Write

Next week’s installment will be about hinting!

comments / leave a comment

Your comment