dot-font: Acrobatics—Putting the Story on the Screen

John D. Berry

dot-font was a collection of short articles written by editor and typographer John D. Barry (the former editor and publisher of the typographic journal U&lc) for CreativePro. If you’d like to read more from this series, click here.

Eventually, John gathered a selection of these articles into two books, dot-font: Talking About Design and dot-font: Talking About Fonts, which are available free to download here. You can find more from John at his website, https://johndberry.com.

For a long time, I’ve been surprised that more people don’t use Adobe Acrobat as a tool for publishing on the computer screen. Oh, there are lots of publications getting turned into PDFs that can be downloaded and printed out—but those are pages designed for printing, not really designed for the screen. Few designers seem to have tried using PDF as a format for designing extended text that’s comfortable to read onscreen.

Recently, I had a chance to try this out. Richard Kadrey, one of a small group of innovative writers who changed the face of science fiction in the 1980s, decided to make his novel Blind Shrike freely available for download by readers, and Eileen Gunn agreed to publish it on the Infinite Matrix, an online magazine of imaginative fiction.

The only question was what the format should be. Nobody wants to read a long story in a Web browser, and very few readers are willing to take the trouble to change the defaults in their browsers to make text easier to read onscreen. The disadvantage of a PDF file is that you have to download it, but the advantage is that what you download can be configured for easy onscreen reading; Acrobat and its free cousin Adobe Reader are nearly ideal environments for onscreen reading—if the pages are conceived and designed intelligently with that purpose in mind.

Figure 1: Opening page of Richard Kadrey’s Blind Shrike

Adjusting to the Screen

The natural orientation for a page on a computer screen is not vertical but horizontal—landscape format. But it’s uncomfortable to read a passage of text if the lines are too long. The obvious solution is to lay out the text in columns. I took a hint from the Web version of the International Herald Tribune, which has a simple but effective multi-column way of displaying its news articles in HTML. But their format is for short articles and columns, not long books; and even on a screen, reading a book is different from reading a newspaper. I chose two columns, side by side, which echoes the two-page spread of a printed book.

Figure 2: Two columns of text laid out on a horizontal page

Computer screens come in different sizes and shapes, so there was no way to choose a page size that would neatly fit the entire screen for every reader. The size I started with—and ended up keeping—was “half-letter” size, turned on its side: 8 1/2 x 5 1/2 inches. This would also be a fairly convenient size for anyone who wanted to print out the pages.

For the typeface, the choice was easy: Georgia, the serif text face that Matthew Carter designed (and Tom Rickner digitized) several years ago for Microsoft, specifically as a readable screen text face. Georgia is readily available on most computer systems; it used to be given away freely by Microsoft, though at some point they stopped making it available for download. So there’s no question about the propriety of subsetting the font and embedding it in a PDF file.

Figure 3: Matthew Carter’s Georgia, a familiar-looking serif typeface designed for reading text onscreen

Georgia looks good and works well on both Mac and Windows systems. I could have chosen its sans serif companion Verdana, also designed by Matthew Carter, but I felt that most people would rather read a serif face, if it could be made to look readable at screen resolutions. The ubiquitous Times, Helvetica, or Arial, although they’ve been tweaked extensively for display onscreen, are not really designed for the screen and aren’t good text faces for extended reading. I tested a number of other typefaces, some of which looked good, but Georgia was the clear winner. It could function the way a text face ought to: get the job done cleanly and stay out of the way.

Sweating the Details

Although books are generally typeset in justified text blocks (that is, both edges even), on the screen this doesn’t work so well. In HTML, it’s disastrous (since there’s no way to hyphenate automatically), but even on a screen page that I’d be designing myself as a PDF, justifying the text just made it look busier; the effect was distracting, rather than comfortable. So I set the text ragged-right (just like the text of this column), and adjusted the line breaks as I needed to when I prepared the final layout.

I experimented with various font sizes, line spacing, and line length, to find the combination that was easiest to read in this two-column, landscape format. I used Adobe InDesign CS to create the pages, then exported them as a PDF and looked at the result in Acrobat. I had to keep switching between InDesign and Acrobat, because what mattered was how the pages looked in a PDF, not how they looked while I was laying them out in InDesign. I used InDesign’s type controls and composition engine the same way I would if I were designing a book to be printed—controlling spacing and indents and hyphenation and placement on the page, all the usual elements of text typography. It was just the end result that would be different.

To ease the glare of reading onscreen, I gave the pages a subtle background color: a Web-safe tan, which I then lightened to a 50% tint in InDesign. This gave me something like the effect of an off-white book paper. The type was all black—no messing around with colored text. This was for reading, after all.

Figure 4: Opening page of a chapter of Blind Shrike

Getting Rid of Extraneous Stuff

So I found that I had a simple, readable text-page design that worked well in Adobe Reader. But I wanted to go farther: I wanted to make the reading experience transparent, not something that involved fumbling around with the program’s defaults. I’m used to using Acrobat’s capabilities for changing how a PDF page looks when I view it, zooming in or out, bouncing from page to page, making the menu bar and other screen junk go away by displaying the file in full-screen mode. But a lot of people who use Acrobat—and especially who use the plain Reader—have no idea that they can control these things. Like users who leave their Web browsers set to the default fonts and the default size of window—which are not necessarily the most readable—most people using Acrobat Reader just take each PDF file as it comes.

Acrobat’s default is to display pages as large as they can fit within the window; in full-screen mode, as large as will fit on the screen. But not everyone has the same size screen; if I designed a page that fitted comfortably on the small screen of an older PC or Mac, that same page would look huge if it filled a bigger screen. You might think that setting the screen display to 100% would make the most sense, but because of different screen resolutions, 100% can actually appear smaller than life size on a higher-resolution screen. What I found worked with my page, on all of the systems I tested it on, was to set the display to 125%; that should fit within most smaller or lower-resolution screens, yet not be too big or too small on a large, high-res screen. So I set the PDF file to come up in full-screen mode at 125%.

Figure 5: Opening page in full-screen mode, displayed at 125% on the screen of a G4 iMac

Navigation Without Tears

But for people who haven’t played around much with Acrobat or Adobe Reader, full-screen mode can be confusing. “How do I get out of this?” they may ask, not seeing any of their familiar tools and menus. It may not even be obvious how to move to the next page. (There are many ways, including pressing Return, using the direction arrows, and clicking anywhere on the screen. Experiment a little.)

Figure 6: Dropped from the final version: a page attempting to explain how to navigate through the PDF file

At first I wrote a page of explanation for the front of the book, explaining some of the ways you could move around in a PDF file. But I was essentially doing the job of explaining Acrobat; and besides, it was sort of clunky to lead off a novel with a page of technical explanation. So instead I created a set of small navigational buttons. I used InDesign’s button-making abilities, which are designed for exactly this purpose, and designed two sets of buttons: one familiar-looking set for going forward and backward within the file (much like the buttons on a music player), and another set for changing the size of the displayed page and for toggling between full-screen and normal mode of display.

Figure 7: Navigation buttons in the left-hand margin

I kept the buttons small and gray, so they’d be as unobtrusive as possible; and I positioned them vertically in the left margin of the page, which seemed less distracting than placing them at the top or bottom. (The only thing at the bottom is a simple page-number indicator: two numbers, one showing the page you’re on, the second showing the total number of pages in the book. Sort of like an arrow saying, “You are here.”) I didn’t add labels, since in Acrobat or Reader, when you move the cursor over a button and leave it there for a moment, the button’s label appears—much like the tags on elements of a Web page. It wasn’t my job to teach the readers all the ins and outs of maneuvering in Adobe Reader; I just wanted to make adjusting the size and flipping the pages easy. This was a book, after all; the whole point of a book is to read it.

A Format You Can Live With

No single format works for every book, in print or on the screen. For another book, I might choose a different typeface, or a slightly different line length; or I might experiment with a slightly different size or shape of page. But I think that what I’ve come up with for Blind Shrike is an onscreen reading format that actually makes it possible to read a long story on a computer screen, without eye fatigue or too many irritations. I’d be very interested in hearing from anyone who decides to read the novel, about whether they did in fact find it easy to read—and what kind of screen they were reading it on. (Note that I’m not asking whether you enjoyed the story or not; that’s a transaction between the reader and the author. I’m just trying to provide a smooth conduit for the author’s words. I enjoyed it, otherwise I wouldn’t have worked on giving it a readable design.)

Figure 8: Title page of Blind Shrike, with the minimum amount of navigation tools and information

This is one way of designing an onscreen book. Other people may come up with better ways, but this is at least a stab at designing for the screen page, rather than the printed page. It’s a start.

(editor note: if you have ideas about other onscreen layouts, font choices, settings, etc. please let us and other readers know by using the vox box area in the left-hand margin of this page.)