How Type Works on Screen

The image on a computer’s display is made of nothing more than a simple grid of pixels, an array of tiny squares filled with different shades and colours. When text is shown on a computer screen what is seen is nothing more than a string of bitmap squares filled in as required to simulate the letterforms. With smaller text sizes the end result can be a little like lettering made from lego bricks - hardly the best method of constructing characters.

The beautifully balanced curves and subtle strokes which designers visualise when picking a font will be reduced to a series of simple blocks and lines when shown on a screen. This has a dramatic effect on legibility, as many classic typeface favourites reveal themselves to be bitmap disasters fro real screen-based use.

Web designers will have to develop a sense of how different fonts look on screen in the same way that print designers learn how fonts will look on paper. Different typefaces will fill in squares in the screen grid in various ways. The differences may seem subtle at first glance, but they can make all the difference between text being easy or hard to read.

CSS styles which use the more reliable ‘px’ measurement system rather than ‘pt’ (see HTML Formatting for details) will produce text drawn at a specific pixel height. But note that this includes the full vertical height of the font including ascenders and decenders, not just the height of a particular letter. A lowercase letter ‘a’ shown at 12 pixels will probably be around 6 pixels from top to bottom, which doesn’t leave much scope for resolving typographic detail.

No matter how subtle something may be in print, everything on screen is shown as a set of simple pixels, coloured as necessary to recreate the item in the bitmap display.
 

Type on screen is shown as a series of bitmap squares. Small type suffers the most from this process, as any identifying details can disappear entirely.
 

Here a high-resolution sample of Verdana shows subtlety in the curves and strokes, while enlarged 12 point and 10 point bitmaps shows how much this is simplified at small sizes on screen.