Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Cascading Style Sheets Part 5: Styling for Print

Last updated Oct 17, 2003.

By Sarah Horton, author of Access by Design: A Guide to Universal Usability for Web Designers

Relative to print, the web is a complex and uncharted design space, with few tried-and-true rules and guidelines to guide our design efforts. On the other hand, we know quite a lot about what looks good on paper, and we can apply that knowledge to designing print versions of web pages. The previous article on selective printing explained how to hide irrelevant web page elements, as well as replace screen elements with print-appropriate content. This article covers practices for styling the remaining elements for attractive and, most importantly, readable printed web pages.

But before we begin, a caveat. As with many other aspects of web design, designers have limited say in how users experience their web content when printed on paper. Browsers have default styling and settings, and users can modify those settings to suit their needs and preferences. So bear in mind that many print styles are suggestions that can be overruled by the user.

Page Layout

In considering page layout for printed web pages, one of the most important distinctions between paper and screen is relative dimension. Unlike most computer displays, which are more wide than tall, paper is more tall than wide. And while the width of the screen can accommodate multiple columns and various elements on the same "page", this type of layout does not fare well on paper. Instead, printed web pages are most engaging and readable when designed using simple, uncluttered, single-column page layouts.

Selective Printing

Selective printing allows us to reduce unnecessary clutter by suppressing the display of irrelevant elements on printing. The CSS property of choice for selective printing is display, which, when assigned the value of "none", suppresses the display of irrelevant elements. In styling for print, we need to start out by setting the display property to "none" for irrelevant elements, such as navigation (Listing 1).

Listing 1: CSS for hiding the navigation element

#navigation { display: none }

Another aspect of selective printing is replacing screen content with print-appropriate content, such as replacing a banner graphic with equivalent text (Listing 2).

Listing 2: Screen banner hidden for print display

HTML

<div id="screen_banner">
<img src="banner.gif" alt="Piggy Banks Galore" width="540" height="90" />

</div>

<p id="print_banner">Piggy Banks Galore</p>

CSS

#screen_banner { display: none )

Columns

Most web pages employ a multi-column layout in order to maximize screen real estate and jam as much content as possible onto the first screen, or "above the fold", of the browser window. While this approach has some success on screen, multi-column layouts do not fare well when printed, producing narrow columns of text with uncomfortably short line lengths, particularly when the user has enlarged text for reading. For print styling, your best bet is a single-column layout.

Successfully converting a multi-column screen layout to a single-column print layout depends on how items are sequenced in the source document. If elements are randomly interspersed, with branding, content, navigation, and advertising all jumbled together, the linearized print version will likely be unintelligible. Indeed, designing for print is yet another argument in favor of attending to source code design, since success depends in large part on how elements are sequenced in the source code. Group related elements, and make sure the elements follow a logical sequence that will make sense when linearized and displayed in a single column on paper.

Margins

White space provides visual interest by contrasting the positive space of a page (text, graphics, etc.) from the negative (white) space. Additionally, white space, in the form of margins, improves readability by reducing the text line length, or measure, to a width that meets established conventions for reading. A comfortable measure is one that requires minimal effort to track across a line of text and, upon completion, to locate and continue reading the subsequent line. A good target range for line length is approximately 50 to 70 characters per line.

When styling for print, use margins to control line length and improve readability, particularly when using a single-column layout. In Listing 3, we set the left and right margins to three-quarters of an inch and the top and bottom margins to a half-inch.

Listing 3: Margins set to balance text and white space and limit line length

body { margin: .5in .75in }

Typography

Typography for printed web pages is in some ways richer than on screen, mainly because print is higher-resolution and affords many more typeface options. Still, just as with screen design, text size must be designed to respond to the needs of the user.

Size

When it comes to text size, the user knows best. Optimal text size for one user is illegible for another. Fortunately, the flexibility of the web allows users to adjust text size for maximum readability. This facet of the web environment is particularly advantageous when it comes to printing. As discussed elsewhere in this series, one of the primary tasks supported by print is reading, and text size affects readability more than any other attribute. Fortunately, when a user adjusts text size to improve readability on screen, these settings carry over when the page is printed, as long as we code our print styles to honor user-defined text settings.

So, as with styling for screen, text size for print should be set to the user's default text size, with other size settings, such as leading (inter-line spacing) and headings, defined relative to the user-defined setting (Listing 4).

Listing 4: Type size and spacing set relative to user-defined settings

body
{ 
  font-size: 100%;
  line-height: 140%
}

h1 { font-size: 130% }

Typeface

Many commonly used web typefaces, such as Georgia and Verdana, were designed specifically to look good on screen. A large x-height (the height of a lowercase "x") and an overall large size makes these typefaces attractive and, most importantly, readable in the low-resolution medium on the screen. However, these same attributes make type look large and ungainly when transferred to the high-resolution medium of paper.

In specifying type for screen, we must consider which typefaces look good on screen and, of that very small subset, which are common across systems. When specifying type for print, the choices are much more plentiful, simply because there are many, many typefaces that look good and are readable on paper. So we begin with a wide range of typefaces to choose from and, using CSS, can specify a set of typefaces that will be applied to the page when printed, depending on the availability of the font.

In Listing 5, we define font properties using CSS shorthand to combine size, leading, and typeface definitions into one lean-and-mean rule.

Listing 5: Font size and typeface

body { font: 100%/140% "Palatino Linotype", Palatino, "Lucida Bright", Times, serif }

Palatino? You call that a web font? Remember how type works with CSS. If the first font in the list is available, it will be used; if not, it is skipped, and so on down the line. In Listing 5, Palatino is the first choice, then Lucida Bright, then good ol' Times. If none of the specified fonts is present, the user's default serif font will be applied. With print styling, you can go out on a limb and specify a favorite font, even if it's one that is less likely to be universally available. Just make sure your font rule includes at least one font that fits your design and is common across systems.

Check out Example 1 to see these styles in action. View the page in the browser and then view the print version using the Preview option in your browser's Print feature. Or install the handy-dandy Web Developer extension for Firefox and preview print styles right in your browser window.

Resources

This article covers only the basic and more robust aspects of styling for print. If you're hungry for more, check out the following resources, which support and extend the concepts covered here.