Thinking About the Page

stack of books

The book page is an artifact of the delivery medium: it’s written or printed on a physical sheet of paper (or a carefully prepared sheepskin turned into parchment, or a section of a papyrus scroll). The two-page spread is simply an artifact of our codex form of book-binding, which always opens to two facing pages. But what’s a page in an e-book?

The onscreen page isn’t really the medium on which the content is displayed so much as it is a window into a part of the content. The part that’s being displayed is the “page,” but how much content fits onto that page depends on a lot of factors, such as the choice of font, the size of the fonts, and the space between lines. In the resizable, reflowable world of e-books, the “page” is constantly changing.

It also might change if you go from reading a book on your laptop to continuing to read the same book later on your phone; the screen size and shape can be entirely different. It’s not just a matter of scaling the whole page up or down in size. (Though if you’re reading a fixed layout, such as a PDF of a page from a printed book, then that’s exactly what you’re doing. Which is why it’s such an unsatisfactory way to read a book onscreen, unless the PDF has been designed for the format you’re using.)

Web designers and interactive designers sometimes refer to the “viewport,” which is the screen or the part of the screen that the content is displayed within. (When I say “the part of the screen,” I’m thinking of the way most web browsers and many apps impose a scrim of “chrome” around the live part of the page: buttons or frames or navigational tools, anything that’s not the basic content.) This is a useful way of thinking about it. Just as the printed text fits onto the physical page, the digital text fits within the bounds of the viewport.

Although a book of long, continuous text functions as a single flow from beginning to end, there are other kinds of books that involve a complex set of elements, both text and visual, that have to be arranged somehow with respect to one another. Think of a cookbook or a textbook. On the printed page, the book designer can arrange the elements appropriately, so the book is easy to use. The list of ingredients comes before the step-by-step recipe, for instance, and is clearly delineated as a separate element, or the footnotes and sidebars and numbered illustrations are set apart from the running text in a way that makes them easy to find when you want them, yet keeps them from getting in the way while you’re reading the main text. A good designer is always thinking about each visual element, including plain old paragraphs of running text, in relation to the space on the page and its edges.

How do we do that on a digital page that keeps changing? Can we design a complex “page” based on the size and shape of the viewport? Unless we’re going to restrict the reader’s ability to change things—font size, for an obvious starting point—then we’ve got to invent rules and patterns for how the elements on the page will behave when something changes. Creating the design and production tools that will give a designer that ability is one of the most important tasks ahead of the e-book industry.

In my experience of designing books and periodicals for many years, I’ve found that the most important single factor that makes a paragraph of text readable is the length of the line. Not the physical length (3 inches or 20 centimeters or whatever) but the number of letters and words that fit on each line. The usual rule of thumb in English is that a line of about ten words works well (with an “average” word of five letters plus a space), or 60–70 characters per line. Obviously that might change from one language to another, and it would be entirely different in a written language that uses ideograms rather than letters (Chinese, for instance), but I’m sure each language has its own rules of thumb. Also obviously, the ideal line length might vary from one writer to another. (I know that from experience. I once designed a book of essays by shamelessly swiping the page design of another book of essays by a favorite writer of mine, designed by an excellent book designer; but the pages I designed didn’t work as well. It took me a while to realize that the writer of my book habitually used words and phrases that were hard to break, so I kept getting too-wide spaces between words in the lines, despite my best efforts. And it wasn’t that he used long words; it’s much easier to find a hyphenation point in a word like dissimulation, for example, than in through or enough.) Rules of thumb are just descriptions of useful patterns; they always have exceptions.

I’m always amazed at people who look at websites by having their browsers “maximized” to the full width of a laptop or desktop computer screen. Unless the website has been designed to accommodate this, the lines of text are almost always much too long to be comfortable to read. The same problem comes up in printed business documents with inadequate margins; a page of 10-point Times New Roman spread across seven or eight inches is simply not easy to read. (It’s worth keeping in mind that Times New Roman began life as a newspaper typeface; it was designed to be read on newsprint in narrow columns.) Line length matters.

A smart digital page would adapt its layout to the size and shape of the viewport. [I wonder if we also want to give users more options for understanding their choices. People could voluntarily go through a short tutorial/quiz that informs readers of the contextual differences between, say, sans and serif, and how that can affect the reception of content. I also want every text to have an “author optimized” option, which is how the author/designer would like you to read it (including information about the best kind of device for the content). You don’t have to agree, but at least it could give the reader a less generic starting point.—AL] On a little phone screen, the text would be in a single column of short lines; on a laptop screen with a maximized window, the same text might appear in two or three columns, each of a comfortable line length. If the reader boosted the font size to a much larger size, the three-column page might rearrange itself into two columns. The smart page simply wouldn’t let the line length get too long for comfortable reading.

This is one of the reasons that we still need “pages.” A continuously scrolling page, like the archetypal web page, is only feasible if there’s only one column of text; otherwise, you’d have to keep scrolling back up to the top to continue reading in the next column. When people say they don’t like multi-column layouts on a web page, they usually mean this. Multi-column layout requires pagination.

One thought on “Thinking About the Page

Leave a Reply

Your email address will not be published. Required fields are marked *