11 - Osprey requirements for the screen

11.1 - Character shapes are the worst

The single biggest obstacle to screen readability today is at the micro level: typefaces and the way in which they are displayed.

There are a number of contributing factors:

Most typefaces were NOT designed for reading on the screen, nor were technologies for displaying them. Most typefaces came from the traditional printing world. When typesetting was translated to computers, the main concern was WYSYWIG – representing on-screen exactly what would come out on paper from laser printers or imagesetters.

With a limited number of pixels available, screen fonts were designed to be mere representations of the true printer fonts. Also, when laying out text on screen, typesetting (and word processing) programs used the font’s printer metrics in order to accurately show line-breaks, page-breaks and so on.

To fit screen fonts into printer metrics – and with a very limited number of pixels available – individual character shapes had to be distorted to fit. The result was typefaces whose screen versions had irregular shapes and lost all of the subtlety and defining features of the original print faces.

The worst problem was and remains today the resolution of the screen. Even the first primitive laser printers had a resolution of 300dpi (dots per inch). Today 600dpi is the norm, and 1200dpi is common. In contrast, the resolution of mainstream computer monitors (leaving aside expensive high-resolution devices) today range from 72dpi to about 120dpi. In practice, the true resolutions go up only to around 106-110dpi.

With so few pixels available to create representations of characters, especially at the small 10 and 12 point sizes typically used for reading large amounts of text, no improvement is possible.

11.2 - Typeface design does not solve problem

Some typefaces have been designed for reading on the screen (Microsoft has been a leader in this effort). But all run up against the same basic problem of resolution. Designing typefaces specifically for the screen is a pragmatic approach: we have only so many pixels available, therefore we design characters to give the best and most readable shapes within those constraints. We make the best of what’s available.

However, even this approach runs up against some fundamental problems. Research shows, for instance, that serif typefaces are best for sustained reading. It also reveals that the serif should be typically only around 18% as heavy as the typical character stem feature. At small sizes, single-pixel-wide stems are the thinnest that can be achieved using current technology. The next jump up is to two-pixel-wide stems.

The same single-pixel limit, however, also applies to serifs. Therefore a typical serif face in a small size has serifs of equal weight to the character stems, giving a “slabby” look that destroys much of the benefit of the serifs.

At the same time, this coarseness of resolution causes another problem. If a Bold version of a typeface is required, it must of course have heavier stems than the regular or roman weight. But the only means today of increasing this weight is to go from one-pixel to two-pixel stems, which results in bold versions of typefaces that are far too bold. In print, typically, a boldface might be 30% heavier than the roman. On the screen, it’s 100% heavier.

This might seem like only a minor problem; except that the one-pixel stem weight of a regular typeface produces characters that are too spidery and light to be read comfortably on the screen, even when character shapes are specifically designed for screen display. And two-pixel type is too heavy at small sizes.

This problem screams out for increased screen resolution. With screens of, say, 300dpi, there would be three times as many pixels for each character; each pixel being much smaller. So a regular weight of a typeface might be four or five (300dpi) pixels wide, and a bold version might be seven, or eight pixels wide. Serifs could be one or two pixels thick, and so on, and it would be possible to display most of the subtlety of the original faces on the screen.

Resolution of this standard is achievable today only in specialized and expensive devices, either high-resolution CRT monitors or high-resolution LCD devices. Both pose production problems that make it unlikely they will become mainstream within a three-to-four-year timeframe.

11.3 - ClearType RGB striping font technology

Faced with the failure of the pragmatic approach, and unwilling to wait until mainstream screen resolution improvements solved the problems for us, we decided to look for an innovative solution using today’s technologies.

LCD screens are becoming more and more mainstream display technology. Introduced in the beginning to give low-power display for laptop computers, they have been steadily evolving over the past few years. Resolutions have increased to a nominal 96dpi (in reality, anywhere from 75 to 106, depending on the individual device).

Alongside resolution improvements have come support for color, and new backlit LCD devices seem set to replace traditional CRTs once economies of scale and competition pull prices down. This is in fact already occurring; in August Compaq Computer announced a 20% price cut, taking the cost of a pedestal-mounted desktop LCD below $1000 for the first time. The first full-digitally-addressed desktop LCD, which can also be rotated into either portrait or landscape mode, was launched by Toshiba this summer at a price of $1500, which includes its own graphics card. We can expect the capabilities of such devices to increase almost as rapidly as their prices fall. As desktop devices, they can use more powerful (and power-hungry) backlighting, and are now credible (and desirable) replacements for CRTs. They are more readable, since they have no flicker, can be easily tilted to the desirable reading angle, and take up far less space on the desktop, making them also much less intimidating devices on which to read.

During the preparation of this fairly lengthy document, I found myself for the very first time proofreading and correcting entirely on the screen (a 110 dpi SGI flat-panel display running ClearType). Like everyone else, I would normally not consider using the screen for a task of this length.

LCD devices are especially relevant to the concept of the “electronic book” (eBook), since these devices must be portable, light, and consume little power. But they are also likely to play a major role in increasing acceptance for reading all kinds of information on the computer screen instead of in print.

The rise of LCD devices presents new sets of both problems and opportunities for screen readability. CkearType was developed to take advantage of hitherto-unused capabilities of LCD screens, and delivers on-screen type of a clarity and subtlety which has never been seen on mainstream devices.

11.4 - LCD problems

Existing font rendering technologies were developed for CRT devices, and in the past these have been applied to LCD screens simply by treating an LCD pixel as identical to a CRT pixel. However, the two are very different. A CRT “pixel” is a dot generated by electrons impinging on a phosphor screen. By virtue of the process, there is some “bleed” from one pixel to its adjacent pixel. This is a phenomenon equivalent to “dot gain” in printing, in which ink spreads as it is absorbed into the paper. This is a well-known effect for which printers have to compensate in advance. The same “pixel bleed” on a CRT has the effect of smoothing out some of the jagged edges of pixels.

Other font display technologies such as anti-aliasing attempt to deliberately introduce additional pixels in either levels of gray or color around the rasterized screen type in order to smooth out curves and diagonals, taking advantage of the human eye’s tendency to merge the dots and fill in the blanks.

LCD pixels are very different, for two reasons. The first causes a further problem, the second represents a major opportunity which Microsoft is now beginning to exploit.

LCD pixels are much sharper than CRT pixels, by virtue of the physical construction of LCD screens. While on a CRT there is no real “pixel grid” and software has to construct a virtual grid to aid pixel manipulation, on the LCD the grid is very real and consists of hard lines which define each pixel boundary. Because of these hard lines, there is no pixel bleed on LCDs; the jagged effects of pixelation (aliasing) are thus much worse. In addition, because of lack of pixel bleed and color contrast levels, existing anti-aliasing technologies do not work nearly as well on LCD screens.

However, hidden in this pixel world is a physical characteristic of color LCD screens. LCDs are made up of pixels that consist of Red, Green and Blue (RGB) sub-pixels. Normally, these run in stripes down the length of the screen. In reality, this means that the screen has a theoretical resolution three times that being addressed.

One can address these sub-pixels directly. Unfortunately, you end up with text that looks like as if was designed by the late Dr. Timothy Leary. It’s great to read if you’re on acid, but way too colorful for the rest of us.

The “trick” in the ClearType technology a way of addressing this resolution without color artifacts. It’s a complex process; we had a lot of assistance from Microsoft Research display experts and mathematicians. Details are described in the relevant US and international patent claims we have lodged for the technology.

It is enough to say it works more spectacularly than we could have dreamed; reaction has been uniformly amazed at the new quality bar for type on the screen.

11.5 - Font

• ClearType
• Serif font
• No user choice of typeface
• Maximum resolution
• Tuned (hinted) for resolution of device at pixel level

11.6 - Five typesizes only:

• 10, 12, 14, 16, 18
• Best contrast between stem and serif weight (ideal proportion 18%)
• Use ClearType to improve resolution, serif differentiation, stem weight, etc.)
• Easily recognizable characters
• Choose additional faces for screen readability
• Large character set
• WGL4 and beyond for international support
• Additional faces for BiDi, FE etc. support
• Italics for emphasis, not bold or underline
• Hyperlinks use color

11.7 - Inter-character spacing

• Tight letter-spacing
• Sub-pixel character placement
• Not so tight as to cause collisions
• Tight enough to enable easy word recognition
• Use screen, NOT printer, metrics
• Ampersand
• Ligatures
• Pair kerning

11.8 - Inter-word spacing

• Close spacing
• One-sixth em minimum
• One-fifth should be average
• May require more depending on typeface

11.9 - Line length

• Around 66 characters & spaces per line
• May vary with type size, X-height, design of face

11.10 - Fully-justified lines

• One-em paragraph indents (but not first line of chapter)
• Requires hyphenation in order to achieve correct inter-word spacing
• Hyphenation must be dictionary-based for sensible word-breaking (i.e. minimum flow disruption)
• Syllabic or etymological breaking
• Ideally, no hyphen “ladders” (but they are more acceptable than uneven word spacing)
• Widow and orphan control to prevent single words, or worse, hyphenated parts of words, starting a new page: syllabic widows unacceptable.
• Hyphenation should not be used for children’s books
• Use of pair kerning, ligatures and ampersand assists
• Close spacing after full-stop and before and after other punctuation marks
• Use single quotes, only double when “nesting”

11.11 - Leading (interlinear spacing)

• Ideal is 20% addition to typeface size
• e.g. 10-point type on 12-point “body”
• Face-dependent (faces with larger x-height need more)
• Longer lines need more

11.12 - Text area (no. of lines per page)

• Should be proportional to page size (sets up perspective)

11.13 - Page size and layout

• The page size is the lit screen area – ignore casing.
• Margins are essential in lit area: they have a function and are NOT a waste of space.
• Page Proportion 3:4 is good (normal screen proportion) – but in portrait mode
• Driven by device size, power requirements
• Page number, running header
• Chapter signals (e.g. chapter heading or number)
• No clutter interface.

11.14 - Internal navigation

• Page turn
• Bookmark
• Minimalist (i.e. booklike) UI

11.15 - External navigation

• My library
• My Bookstore
• My book reviews
• Chat room
• My friends (lending books)
• Familiar UI