*** From the Archives ***

This article is from April 4, 2012, and is no longer current.

The State of E-book Typography

If you look at the size of the type most people choose for their Kindle, iPad, or any other device used for reading e-books, you’ll see that it tends to resemble that in books for people with vision problems. Logical enough, because when you’re reading an e-book — especially on a computer monitor — you do indeed have vision problems, compounded by poorly set type.
Enlarging the text addresses the first problem of screen type: legibility. When set in sizes considered normal for print on paper — 10- and 11-point — it can be a struggle just to decipher screen type. But making type larger by itself — enlarging it to, say, 12- or 14-point — does little to improve readability, because the low resolution and display techniques of computer and e-book reader screens prevent the fine character definition and spacing we’ve become accustomed to in print over the years.
The question of readability is not just an academic or aesthetic issue: Studies show that people read printed text 25 percent faster than on-screen text. What can we as typesetters do about this? Very little, as it turns out.

It’s All a Blur

The most immediate problem is that screen type is not sharply rendered. On a computer monitor, including the flat screens used by tablet computers, this is true in part because screen images are created using glowing pixels. The type you read, for example, isn’t made up of black pixels; it’s made up of the spaces left over after the colored pixels around each character outline have been illuminated to imitate white. Things that glow have an aura, so some image fuzziness is inevitable. You can control this somewhat by turning down the brightness of your monitor.
But more important is that operating systems intentionally make type fuzzy using a technique called anti-aliasing, or more popularly, font smoothing. (This is a misnomer; the type gets smoothed, but the fonts, being software, are unaffected.) This technology attempts to compensate for the low resolution of computer monitors, which rarely exceeds about 100 pixels per inch (ppi); monitors may have gotten larger, but their resolution as measured in pixels per inch hasn’t increased much. Font smoothing uses partially illuminated pixels to fill in what would otherwise be jagged edges of characters, where individual pixels would be clearly visible.
On screen, smoothed type looks much better than unsmoothed type, and it makes type legible in smaller sizes. It also allows you in many cases to differentiate one typeface from another, although in common text sizes, one seriffed typeface tends to look pretty much like another.

Figure 1: Smoothed type uses mid-tone pixels — either in gray (top) or color (bottom) — in addition to black to create the illusion of smoothly contoured characters. When seen in close-up from a screen shot like this, the idealized values of each pixel are clearly visible. What you actually perceive on screen is much less tidy, creating the impression of smooth edges.
Almost all computers have color monitors, and in almost all circumstances, the nominally black-and-white type you see on them are in fact rendered using colored pixels, as seen in Figures 2 and 3.

Figure 2 : In monitors that use cathode ray tubes (CRTs, like TV sets), pixels consist of triads of red, green, and blue (RGB) phosphors as seen in this close-up photo.

Figure 3: Flat, liquid crystal display (LCD) screens use square pixels that are divided into three bands, one for each color.
Because LCD sub-pixels (the individual color components) are rectangular, they can be used for a more refined form of font smoothing that works particularly well for vertical character stems. This is why screen type looks better in general on flat screens, but clearly, the images are still very blurry.

Figure 4: The color elements of CRT pixels don’t lend themselves particularly well to successful type smoothing, as this photograph of 12-point type shows. Although the camera picks up an apparently rich color field, the background of this page appears reasonably white to the eye.

Figure 5: Being rectangular, the color segments of LCD pixels can be used to create a crisper character image. Even though the pixel slices are in color, the eye perceives the entire character as being black, albeit with a slightly hazy aura.
Nevertheless, when reading on LCD screens you’ll sometimes notice that certain characters have a distinct color cast. This happens when the colored pixel slices used to smooth a character become visible for what they are and fail to blend into the ideally white background.
Another problem with anti-aliasing technology is that it isn’t consistently applied from character to character. The characters displayed on a computer screen are arrayed on a grid of pixels, and where they land on that grid determines how subpixels will be illuminated to create the smoothing effect. Often two consecutive identical characters will look different — one black, one gray, for example — because the image of each is created from a different arrangement of black and non-black pixels and subpixels.

The Advantage of “Electronic Paper”

Dedicated e-book readers, however, typically use a display technology generically called “electronic paper.” Their displays are created using pigmented particles rather than glowing pixels, and the type they display is noticeably crisper, with better contrast than that on glowing computer screens. But they still use type smoothing — in grayscale rather than color — to render their type, so the type is still essentially fuzzy.

Figure 6: The newest version of Amazon’s Kindle e-book reader offers 167 pixel-per-inch resolution using 16 levels of gray to render the type. On top, a close-up of 11-point type rendered at 167 ppi and 16 grays. Below it is an offset-printed version the same type, in the same typeface and point size, enlarged to the same size. Which would you rather read?
Type smoothing drives the eyes nuts, because your eyes are constantly trying to draw into sharp focus what are intrinsically blurry images. Studies show that in the course of an 8-hour day spent looking at screen type, the eyes change their focus some 40,000 times trying to pull screen images into focus. Eye strain — Computer Vision Syndrome, to give it its proper name — is the inevitable result. It’s never good practice to give your readers a syndrome.

Typography at Low Resolution

While low resolution creates legibility problems for type, it wreaks havoc on its readability. The fine typography needed for books and magazines — the typography we’ve been accustomed to demand in print — relies on nuanced control over character spacing, both for justification and line-fitting in general, but also for kerning and precise character positioning.
When text is positioned on a line for display on screen, it is grid-fitted: positioned on a virtual checkerboard of pixels. A character has to fit this grid exactly; with anti-aliasing technology it can overlap the grid by one-third of a pixel, but that pixel cannot by colored black, so such micro-spacing adjustments are always indistinct.

Figure 7: In this magnified photo, the pixel grid of a 102-ppi flat screen is clearly visible. On even the most modest imagesetter used to set type for print, positioning precision is over 10 times finer. For screen type, the result is that characters tend to fit too tightly or too loosely relative to their neighbors.
At today’s monitor resolutions, a minimum character-positioning increment of one screen pixel is a very coarse adjustment, at least by the standards we’ve come to expect since the late 19th century. Coarse measuring units make for bad composition, especially in justified lines, with uneven spacing from character to character, word to word, and line to line. As you can see in Figure 8, e-book reader manufacturers’ images of pages displayed on its new models show some very ugly results.


Figure 8: In these images, Amazon’s Kindle sets some inexplicably short lines even though it’s attempting to justify them.

What to Do?

When designing pages for on-screen reading, your most obvious strategy is to increase point size. Because it reduces the amount of text on each line and each screen, it’s a reading irritant and a navigation nuisance for users. But at least the text that’s there is maximally legible. Boosting point size at once increases character size and relatively reduces the blurriness of the characters. Importantly, it also makes a one-pixel character movement smaller relative to point size, meaning that the display program is more able — if only slightly — to space your type naturally. You should see fewer unintentional ligatures and bunched-up passages of type.
Another thing you can do is choose a typeface that’s been designed specifically for screen display. There aren’t many of them, but keep in mind that most typefaces are nearly unidentifiable at text size of screen anyway. Safe bets for text are: Georgia and Cambria for seriffed faces and Verdana and Tahoma for sans serf faces (all are available at www.microsoft.com/typography/fonts/). These are heavily hinted (programmed to display and space well at low resolutions) so they almost always set with at least a pixel between adjoining characters. They’re also widely distributed and apt to be available on your readers’ devices. So-called Web fonts, designed for on-screen display and available under license for real-time downloads and use by your readers’ devices, are also an option.
Third, avoid justified margins. Most e-book reader programs handle this badly, and some can’t even hyphenate, which is an invitation to compositional horrors. Given the fact that typical screen resolution is so coarse, it’s understandable that application vendors haven’t dedicated much time to good hyphenation and justification programs, but the results for on-screen readers is a lot of ugly type.
Things won’t improve until screen resolutions increase dramatically, enough to eliminate the need for type smoothing. At 300 ppi, a screen could display one-bit (black-and-white) characters that begin to look like printouts from a 300-dpi laser printer (a look once touted as “near-typeset quality”). Laser printers, though, benefited from a form of type smoothing themselves, as the pixels printed on plain paper were never perfectly crisp.

Figure 9: This 12-point type was scanned from a 300-dpi laser printer page. At this magnification, some stray pixels and stair-stepping along the character margins are visible, but the black-and-white type is much clearer overall than any created using type smoothing technologies.
As long as the screen brightness isn’t excessive, a 300-ppi black-and-white display would render much crisper type, reduce eye strain, and allow much better type composition than today’s systems can offer.
Such high resolutions are likely to appear in dedicated e-book readers before computers simply because the norm for the latter is 24-bit color, and a 300-ppi full-color monitor would likely be a budget buster. Early marketing evidence, though, indicates that e-book reader manufacturers will pursue color displays before they offer high-res black and white.
Case in point: The latest iPad features Apple’s Retina Display that effectively doubles the resolution of the first and second generation iPads. But even with 264-ppi resolution, the display is in color, so the type is less clear than if it were in black and white or better yet, printed.

A Brighter Future

I am not a Luddite when it comes to onscreen reading, and I can see a day — it could be very soon indeed — when devices with reader-friendly display technologies make e-reading the functional equivalent of reading printed pages. Very high-resolution display devices already exist, although costs keep their sizes so small that they don’t provide a very pleasant or book-like experience (much less a magazine- or newspaper-like one). We can quibble about the aesthetic merits of print on paper, but that’s not the point here.
The problem today is that after 500 years of evolution, the “printed” word has taken a step backward in quality. According to “The New York Times,” electronic publishers are commissioning shorter books because their readers find it too tiring to take on longer works. Ever since I started writing for online magazines I’ve been obliged to write shorter pieces than in the past because editors tell me that online readers simply won’t finish longer articles. With today’s technologies, reading is simply more of a chore than it’s been in the past. Access to reading material is amazingly easy — a revolution, in fact — but reading is more than just taking in information, and the aesthetics of text presentation involves more than just making type pretty. It means making type functional as well.
 

James Felici has worked in the publishing industry for over 30 years. He is the former managing editor of Publish magazine, and written for PC World, Macworld, and The Seybold Report. A renowned type expert, he is the author of The Complete Manual of Typography.
  • Anonymous says:

    “I’m not a Luddite”?

  • Anonymous says:

    I just posted on my reaction to getting the new iPad. It is a game-changer for me. I could not stand the resolution issues with the older readers. The typographic horrors of Kindle, Nook, and Kobo were far beyond my levels of tolerance. But the Retina Display has made me a believer. I’ve had the new iPad for barely two weeks and I’ve read several novels and other books. I’ve been amazed at how satisfying the type quality has been. I am speaking as a professional book designer, and a longtime font designer. Things have really changed.

  • Anonymous says:

    Terrific read Jim. A comment and a question:
    1) I have always disliked reading copy on-screen. I have to deal with a mild bit of dyslexia and, unfortunately, the way most copy is built into nearly every website words sometimes ‘feel’ like they run together. I find sites utilizing serifed type make this eye discomfort all the more obvious to me. Keeping that in mind I have, over time decided to reject ever using this style of text in designing my sites utilizing instead san serif type instead. This helps my reading substantially.

    As well, I have found that by adding 1-pixel type spacing substantially increases my ability to read more comfortably the content I build for my sites as well!

    2) Is it possible to easily build that preference into designs built for e-readers as well? (I haven’t worked with either inDesign or Quark for some time now and I would imagine that building content for “e-publication” utilizes one or both applications quite substantially?) It’s a snap for me to add this Property into my site page designs with CSS in Dreamweaver for example.

  • Anonymous says:

    The fonts on my Kindles (keyboard and fire) are clearer and sharper than in any of my dead tree books. So I don’t really understand what the problem is with them. I can read either for hours at a time (and do, often, with no eye fatigue). Anytime you see formatting problems, it’s usually due to the author creating the ebook him/herself instead of having it formatted by someone experienced in ebook formatting design. So I don’t get what the problem is — at least on my Kindle devices and the Kindle application for the desktop. The fonts in your Kindle screenshots look way too jagged — do you have a defective device (or you processed them incorrectly maybe)? I suggest you get a replacement because the type on your Kindle looks nothing like the type on either of mine!

    The only devices where the fonts can, once in a while, look kind of fuzzy are on the iPad and iPhone. I haven’t seen other ones.

  • Anonymous says:

    i had hoped for an interesting read, and i do agree that e-typography is far from ripe, but there is too much weak logic and wrong facts in this article

    1) the illustrations of displays seem to have reduced the contrast of the RGB pixels so that they represent black text on medium gray instead of normal brightness levels for RGB white

    2) how about some citations that anti-aliasing text harms legibility? (i think a review of the literature will show that it depends … with the right typefaces, at the right sizes, on the right displays, anti-aliasing can improve legibility)

    3) “the low resolution of computer monitors, which rarely exceeds about 100 pixels per inch (ppi)”

    100+ ppi monitors are very common, not rare; every current Mac monitor is over 100 ppi, as are most current laptops and almost all tablets & smartphones

    List of displays by pixel density

    4) “choose a typeface that’s been designed specifically for screen display. There aren’t many of them,” … “So-called Web fonts, designed for on-screen display”

    these two sentences don’t make sense together; there are hundreds of web fonts available (over 200 non-display, non-handwriting faces at google.com/webfonts alone)

    5) “According to “The New York Times,” electronic publishers are commissioning shorter books because their readers find it too tiring to take on longer works.”

    setting aside the vagueness of this citation (and it’s the only citation in the article!), there is nothing here to support the logic (A and B is not the same as B follows from A); i would like to see some evidence, but if i were to study this i would look at whether those who buy ebooks have lower attention spans in general, and i would look at the tendency for e-reading environments to be distractive (both intrinsically and by where and when they are read)

  • Anonymous says:

    I agree with most of the criticisms in “this is a muddled essay.”

    However, with regards to optimizing fonts for on-screen display, Mr. Felici is quite correct. Of all those Google web fonts cited above, only a small minority have had the manual hinting necessary to truly optimize their on-screen display on Windows computers.

  • Anonymous says:

    Thanks. A fascinating subject for us typophiles!

    Michael Fischer

  • Anonymous says:

    Thanks for all of your animated responses to this article. Here are some brief responses to the first round, in order of your comments’ posting.
    Ned Ludd destroyed machines because he thought machines were destroying people. I’ve been setting type on personal computers since it became possible, back in the early ‘80s, so I’m obviously no Luddite. But having fought so long for tools to set good type for print, I’m dismayed that people are subjected to such crummy type and typography when they read on electronic devices.
    Seriffed faces complicate the on-screen reading process for everyone, but I had no idea that this was an issue for those suffering from dyslexia. It’s one more good reason to pay close attention to the display of screen type. Typefaces with subtle features (the tapering stems of Eras, the cupped serifs of Goudy Oldstyle, for example) can’t be renedered well (or at all) at traditional text sizes on screen, and accidental ligatures between serifs in adjoining characters due to poor spacing is a constant problem. A major problem here–quite aprt from resolution issues–is that type composition on electronic devices is almost always driven by client-side software web browsers, for example), and a designer or publisher has little or no control over how h&j will be performed. CSS2 allows highly nuanced typographic controls (kerning, tracking, and hyphenation controls, among others) to be built into a document, but without a client-side h&j engine to implement those instructions they’re all for naught. To exercise good typographic controls in this environment means dictating at the originator’s end how all aspects of the type will look. This can be done through PDF formatting (which imitates a printed page, already fully composed) or an animation technology such as Flash. The problem with this strategy is that to dictate how type should look in this way conflicts with one of the basic charms of electronic reading technology: the ability to choose the typeface and the size of the type you read. The only complete solution that I can think of is a competent CSS-based h&j engine (these exist, but only as parts of proprietary publishing systems) that can either be embedded in a document or can be installed permanently on a reader’s device. How shifting resolution bedevils h&j can be easily seen in InDesign or QuarkXPress by starting from a full-page view of a page of text and zooming in progressively. Even a program with the h&j prowess of these two can only create properly spaced type at very large display sizes, where more pixels can be used to render each character. I don’t think there’s any way to force a particular spacing regime reliably in either InDesign or XPress.
    If the happy Kindle user takes a photo of the type on his or her device and enlarges it to the size shown in the article, it will be obvious that the type on screen, is indeed jagged and lumpy, regardless of typeface. Grayscale anti-aliasing creates the optical illusion of smooth type, but it is in fact blurry. It is not physically possible to create grayscale type that is as crisp as decently printed type. Note the qualifier there: badly printed type on crummy paper can indeed look worse than the best screen type, even though the latter can benefit from typographic refinements such as kerning and tracking controls.
    Regarding my allegedly muddled thinking, the point of the pixel close-up was to make visible how a computer uses color to simulate black and white. The original photo was a simple 8-megapixel macro-lens snapshot of an iMac screen. A good magnifying glass works too.
    Regarding antialiasing, I never said that it reduced legibility, quite the contrary. The problem is that is accomplishes this by creating an intentionally fuzzy image, and this makes anti-aliased screen type inherently inferior to well printed type on decent paper.
    The maximum resolution on the current generation on Macs is 104 pixels per inch. I think this qualifies as the “about 100 pixels per inch” I cited.
    As for the rarity of web fonts, I think a choice of 200 among a total universe of nearly 200,000 fonts available to print publishers qualifies as a paltry selection.
    I smiled at a demand for citations from a writer who comments anonymously, but I wince at the fact that I can’t find an exact reference for the Times article, in which one of their tech writers wrote to confess that in the three years she’d had a Kindle she’d yet to finish a single book. She talked to publishers to find out if this were a common problem and discovered that it was, and to try to address it they were commissioning shorter works.
    Comment #9 seems to be a spam ad.
    Brief summary: I write as an expert in typesetting, someone for whom the appearance of type is important practically, culturally, intellectually, and–not insignificantly–aesthetically. If some people are happy with the state of on-screen typography, there’s nothing I can say except to look more closely and hopefully recognize that there’s a lot of room for improvement.

  • Anonymous says:

    I have great respect for you and your work The Complete Manual of Typography (despite the fact that I have strong philosophical objections to any work whose title contains the word “Complete”). My most heartfelt criticism of your work is that you beat me to it when it came time to write my second thesis.

    The problem with eBook typography is, to me, only a subset of a larger issue: professional typesetters, editors, etc, have largely been eliminated due to budgetary restrictions (or, greed, or laziness, etc). Whether printed books or eBooks, I am running into an ever larger amount of books with typography so bad as to be distracting to my reading experience.

    I first wrote about the possibilities for eBooks in a Jr High School paper in 1971, so I have seem them coming for many years (although what my paper described is closer to the now seemingly dormant Plastic Logic technology than the Kindle or iPad). Nevertheless, I held off on buying such a device until the New iPad with its improved screen resolution. I have finished five books on the iPad since getting the device on the day of its release in March and I find that, in general, I am not annoyed by the reading experience in terms of typography. What is turning out to be an issue is the weight of the device for sustained hand-holding. One of the many reasons that I turned to eBooks, besides the obvious one of the shear amount of space that several thousand books take up in my home, is that incipient arthritis is making it more difficult for me to hold heavy books. The weight of the iPad is a little disconcerting and a greater deficit than I expected.

    I dearly love well-printed and bound books and continue to search out such examples in poetry and literature. The majority of my reading, however, is well-suited to eBooks.

    I choose the iPad over the eInk devices due to screen size and the need for many of my books to be in color in order to be technically useful. While disappointed with the weight issue of the current generation of iPad, I have no doubt that the majority of my future purchases will be electronic.

  • Anonymous says:

    Like one commenter above, I’m troubled by “books with typography so bad as to be distracting to my reading experience.” To mention two of the things that bug me most: all those straight quotation marks and apostrophes, and the paragraphs with both indentation and blank space above and below — ugh, ugh, ugh!

    In the case of the many free books that can be obtained from sources such as Project Gutenberg, however, there’s something that can be done about it — at least to some extent. I’ve routinely been editing the HTML and CSS in the files (much of which can be done with macros) and then reconverting to MOBI for my Kindle. I’ve been getting better at tweaking this. But I wonder how a *real* designer might go about designing a book template for e-readers. Nothing fancy at first: just a generic novel, so title pages, maybe a dedication, a preface, a table of contents, chapter titles, body text, some blockquotes, and maybe some lines of poetry tossed in as well.

    But because people resize text and the machines extremely limit the selection of fonts, these would have to be “best general settings” that could perhaps be tweaked for the demands of individual e-books.

    Although this approach might be seen as more damage control than something positive in itself, it would still be a lot better than nothing.

    Jim or others here, what suggestions do you have? OK: “no justified text.” But what about, say, how much blank space to leave above and below a chapter number/name? Do “line-height: 1.2em” and “text-indent: 1.2em” sound about right for standard paragraphs?

  • Anonymous says:

    This really is a piece of utter BS. I have read many many paper books with very strange typography. I have just picked up a few books lying around me here and this article’s point about “operating systems intentionally make type fuzzy using a technique called anti-aliasing, or more popularly, font smoothing” is also utter BS. I can see the ink leaking off the edges of the type into the paper ! FGS! and his nonsense about screen resolution is just that, nonsense in a world of e-ink and retina displays and takes no account of the actual fact that humans cannot detect the kind of resolutions he is trying to exploit in his rant.

    “electronic publishers are commissioning shorter books because their readers find it too tiring to take on longer works.”
    I would like to know what actual ‘evidence’ there is of this. It makes absolutely NO sense logically. Who reads a complete novel in one go ? ok a very small few. The vast majority of readers read in chunks of maybe an hour at a time spread over days or a couple of weeks. So the overall length of the book is irrelevant.

    This smacks of another front in the fetishising of paper, camouflaged under a ‘typography’ label …. ‘give me patience!’

  • >