Custom Printing: Designing for Web and Print Books #2

I have a dear friend from college who designs print books for government agencies and NGOs. Periodically she sends me mock ups for feedback. She is in the curious position of designing textbooks that have to be readable in both Internet and print book format. After I spent about an hour with her last night reviewing page spreads and making design suggestions, I thought her design work would make a good follow-up article on designing books for Web and print.

The Format of the Textbook

First of all, the print book is in an interesting format: A4, Portrait (8.27” × 11.69”). To all other parts of the world this would be more commonplace, and my friend is a freelancer for several global governmental and nongovernmental organizations, so for her this is the norm. It is slightly narrower, and slightly taller, than we have come to expect in the United States.

The book includes introductory pages with photos and a background full-bleed solid color. For the print version this makes the color space 4-color process; for the Internet version it makes the color space RGB (or red/green/blue, created with additive primaries, or light, rather than subtractive colors, or printer’s ink). Out of the color block my friend has reversed the headlines, which are very short, and are set in a sans serif typeface. The typeface is simple in design, but it has a few unique strokes in some letters that add variety and appeal to the overall look of the page.

Under the intro page photo there are three columns: two for text copy and one for a vertical color bar of the same color as the horizontal bar above the photo. Out of this vertical color bar she has reversed the folio (or page number).

Subsequent pages include three columns of flush left, ragged right copy set in a sans serif typeface with slightly extra leading. Some pages are infographics in the popular “flat” style (simple text blocks, and arrows and other graphic elements created from simple shapes without depth perspective—i.e., flat). Other pages include flow charts, text charts, and call-outs.

The call-outs (which really are more multi-layered subheads) are in blue, as are square bullets before list items, and all subheads. Other text is in black, except for the multi-colored text in the infographics.

How This Relates to Web and Print Design

Simplicity Is Rule #1.

Actually, this is true for both the Internet and a print book. Breaking information into small, easily digestible chunks makes for immediate recognition as to what data, information, or thoughts pertain to what other information. Particularly on a Web page, immediate recognition is crucial.

My friend broke down the intro page into a series of horizontal and vertical rectangles (the page grid) into which copy, and color, could flow. This is also an example of simplicity.

Another example is the infographic, which is based on a circle broken into four quadrants, each with an arrow. The arrows are set at 90 degree angles to one another. Text blocks are nestled into the space between arrows, and in each text block one word is larger than the others and is highlighted in a color. The reader can choose to read only the highlighted words (and perhaps the headings, reversed out of the four colors of the four quadrants of the circle), and “get” the meaning of the visual in two seconds. If the infographic interests him/her, he or she can read further. This is simplicity—for both a print book and a Web treatment.

Readability Is Rule #2

Text pages are created in three-column format. Therefore, the reader’s eye only has to travel a short distance before coming back to the left-hand margin. My friend, the designer, has added a few extra points of leading between lines of type to facilitate reading on both the Internet and in the print book (remember, there will be only one design that must function on both). Also, her choice of a ragged-right text format improves readability when compared to justified type (because the spaces between words are all the same).

All text and headlines are set in different faces of the same type: Andes, which has enough flourishes in its letterforms to be interesting, but which is easier to read than a serif face on a back-lit computer screen.

Any reversed type is large enough to be read on the screen. (The book pages, saved as PDFs, are smaller than the A4 format of the print book when displayed on the computer screen, so the threshold of legibility of type reversed out of a background color requires short lines, large letters, ample leading, and the thick bold format of the sans serif typeface.)

What You Can Learn from This Case Study

1. 1. More and more you may be called upon to design print books that will be saved as PDFs for reading on the Web. In many cases the two versions will be the same.

1. 1. If they will be the same design, it will be important for you to make design decisions that will be readable (and visually appealing) on a computer screen.

1. 1. Keep in mind that colors will be cyan, magenta, yellow, and black in the print book and red, green, and blue in the Internet version. This conversion can be made during the creation of the PDF. Some colors will not translate as well as others, so check them on screen and in your color swatch book.

1. 1. More leading makes for easier reading, so don’t set lines of type too close together. This is particularly true for reversed type.

1. 1. Shorter lines of type make for easier reading, as does ragged right formatting.

1. 1. While various studies of readability say that in a print book a serif typeface may be easier to read (there is still some disagreement on this), on screen a sans serif typeface is easier to read. Design for simplicity and readability. Particularly avoid Modern typefaces: those with great contrast between thick and thin letter form strokes.

1. Closely examine and deconstruct the design of print books and online versions. Look particularly for those qualities (color, type, margins, etc.) that facilitate reading. Then incorporate these attributes into your own design work.

This entry was posted on Tuesday, October 13th, 2015 at 8:17 pm and is filed under Book Printing. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.