Hot Off the Press: Using CSS for Printer Optimization

Have you ever designed a webpage that looks great on screen but turns into a hot mess when you print it out? We've all been there.

As web designers, we spend so much time perfecting responsive layouts and ensuring an optimal user experience that we often overlook how our webpages will translate to print.

But with a few CSS tricks up your sleeve, you can create print-friendly webpages in no time. This article will show you how to use CSS to optimize your web content for printing so you can keep your readers happy whether they're viewing your work on screen or in print.

Get ready to take your web design skills to the next level and create print perfection.

The Basics of Print-Friendly Web Design

To optimize your web design for print, you'll want to employ some special CSS styling. The key is using the @media rule to target print media, so you can adjust styles specifically for printing.

First, you'll want to link to a separate print stylesheet in the of your HTML document:

In your print.css file, use @media print { } to wrap print-specific styles. For example, to hide elements like navigation menus that are irrelevant for print, use:


@media print {
  nav, aside {
    display: none;
  }
}

You'll also want to adjust page settings. Use @page to set margins, page size, and more. For example:

@media print {
  @page {
    margin: 0.5in; /* set margin on each page */
    size: 8.5in 11in; /* set page size */
  }
}

Images often don’t print well, so you can replace them with their alt text using:

img {
  display: none;
}

p:before {
  content: "[" attr(alt) "] ";
}

To save ink, you can make text more lightweight using:

body {
  font-size: 12pt;
  line-height: 1.2;
}

The possibilities are endless! You can control widows and orphans, add page breaks, and so much more. Using CSS for print will make your designs shine when printed.

With some small adjustments, you'll have happy readers whether they're viewing on screen or on paper.

Styling Text for Print

When it comes to printing web pages, you’ll want to make some adjustments to your CSS to optimize the look. The default styles you use for screen may not translate well to print. Let’s go over a few properties you’ll want to tweak.

For starters, choose easy-to-read fonts that are designed for print like Times New Roman, Georgia, or Cambria. Avoid fancy display fonts which can be hard to read. Bump up the font size a bit too, maybe to 12-16px for body text. This makes it easier on the eyes.

You’ll also want to increase the line height to around 1.5 or 2 times the font size. This opens up the text and improves readability. Widows and orphans, where a line of text appears alone at the top or bottom of a page, can be distracting. Use the widows and orphans CSS properties to control this.

Don’t forget margins and padding. Add some breathing room around your text and any images with larger margins, like 2 inches. This guides the reader's eye and also gives space to hold the paper. You can remove padding between sections since space is limited on print.

Hyphenation allows words to break across lines, which helps justify text and create an even edge. However, too much hyphenation decreases readability. Use hyphens: auto to let the browser hyphenate where appropriate.

By making these simple changes to your styles, your printed web pages will look polished and professional. Your readers will appreciate how easy on the eyes and reader-friendly your print designs are. Optimizing for print may require a little extra effort but will make a big impact.

Optimizing Images for Print

Choosing Image Formats

When designing for print, you’ll want to use image formats that provide high quality and print-friendly results. The two best options are PNG and JPEG.

PNG is a lossless format, meaning it preserves all the details of the original image. It supports transparency and is great for logos, graphics, and text. However, PNG files can be quite large.

JPEG is a lossy format, but compresses images efficiently while still maintaining good quality. It’s ideal for photos and works well for print when you save the image at a high resolution and quality level (say 8 or higher). At lower quality levels, JPEGs can become blurry or pixelated, so be cautious.

In short, use PNG for graphics, text, and logos and high-quality JPEGs for photos. Make sure any images you use are at least 300 PPI (pixels per inch) resolution to appear crisp when printed.

Scaling and Positioning

Once you have high-quality print-ready images, you need to properly size and position them in your design. Some tips:

Scale images proportionally so they don’t appear distorted or pixelated. Hold the shift key while resizing to scale proportionally.
Position images precisely by using your design tool’s alignment guides and measurement tools. Images that look slightly off-center or uneven can appear sloppy when printed.
Add padding around images and don’t let them bleed off the page edge. Give images some breathing room and make sure they fit fully on the printed page.
Use CSS to set height, width, and position/alignment. This gives you more control over how images appear and can easily be adjusted later. For example:

img {
  width: 200px;
  height: 200px;
  position: relative;
  left: 25px;
  top: 50px;
}

Test how images will print by using your browser’s print preview feature. Make any final tweaks to sizing or positioning before sending your design to the printer.

Background Images and Gradients

Background images and gradients often don’t print well without some extra optimization. Some tips:

Use CSS to specify a high-resolution background image for print media:


@media print {
  body {
    background-image: url(images/bg-print.png);
  }
}

Set background-size to cover so the image fills the entire page.
Use CSS gradients instead of images when possible. Define the gradient separately for screen and print:

/* Gradient for screen */
.gradient {
  background: linear-gradient(to bottom, #ffffff, #f2f2f2); /* Gradient for screen */
}

/* Gradient for print */
@media print {
  .gradient {
    background: linear-gradient(to bottom, #ffffff, #f2f2f2); /* Gradient for print */
  }
}

Formatting Layout and Structure

When it comes to printing web pages, the layout and structure of your content is just as important as how it displays onscreen. CSS gives you a lot of control over how your page is formatted for print, from page breaks to hiding elements.

Managing Page Breaks

To control where your page breaks fall in the printed output, use the page-break-before, page-break-after, and page-break-inside properties. For example, to force a page break before an <h2> element, use:

h2 {
  page-break-before: always;
}

This will ensure each section starts on its own page. You can also use avoid to prevent page breaks in certain elements:

.do-not-split {
  page-break-inside: avoid;
}

Hiding Elements

There are certain page elements you’ll likely want to hide when printing, like navigation menus, banners, and sidebars. Use the display: none property to remove them from the print layout:

nav,
banner,
.sidebar {
  display: none;
}

This will hide those elements, giving you a clean, focused layout perfect for printing.

Complex Layouts

If you have a responsive design or complex layout, you’ll want to create a separate print stylesheet to override styles and simplify the structure. Some things you may want to adjust include:

Removing floats and flexbox layouts for a static, single-column layout
Widening narrow content containers for easier reading
Increasing font sizes for better readability
Converting background images to solid colors to save ink

A print reset stylesheet will allow you to make all these changes in one place without affecting your main stylesheet.

Tables and Forms

For data-rich content like tables, forms, and code blocks, adjust the styles to optimize readability. Some suggestions:

Increase row height and font size of tables
Add table headers for each cell
Remove form buttons and just display field labels and input values
Increase line height of pre and code elements

With some small tweaks, you can make complex web content printer-friendly and polished. Using CSS for print layouts gives you granular control to create the best experience for your readers, whether they’re viewing onscreen or in print.

Customizing Page Headers, Footers, and Page Numbers

When designing for print, styling page headers, footers, and page numbers can make a big difference in the professionalism and polish of your printed materials.

Page Headers

At the top of each page, you'll want to include a header with the title of your document as well as any subtitle or tagline. For long documents, you may also want to include the current chapter or section name in the header to help readers keep their place.

To add a header in CSS, use:

@page {
  @top-center {
    content: "Title | Subtitle";
  }
}

This will center the header text at the top of each page. You can adjust the position using @top-left, @top-right, or remove the position to span the entire top of the page.

Page Footers

Page footers typically contain supplementary information such as page numbers, dates, document titles, and copyright data. To add a footer in CSS, use:

@page {
  @bottom-center {
    content: "Page [page number]";
  }
}

This will center the text "Page 1", "Page 2", etc. at the bottom of each page. You can also include other content like:

content: "[document title] | [page number]"

content: "Copyright [current year] | [page number]"

Controlling Page Numbers

By default, page numbers will start at 1 and increment sequentially. You can customize the page number style, initial number, and number of pages using the counter-reset and counter-increment properties.

For example, to start page numbers at 5, use:

@page {

counter-reset: page 5;

}

To number pages in intervals (1, 3 ,5, etc.). Here is how you can achieve page numbering in intervals:


@page {
  @bottom-left {
    content: counter(page);
  }
}

@page :left {
  counter-increment: page 2;
}

Customizing your page headers, footers, and page numbers are easy ways to make your printed documents look professionally designed and cohesive. With just a few lines of CSS, you can optimize the printing experience for your readers and make a great first impression.

Hiding Irrelevant Content

When optimizing a website for print, one of the most important things you can do is hide elements that are irrelevant or unnecessary in a printed format. As a user, the last thing you want is to waste paper and ink printing content that doesn’t actually contain useful information.

Hiding the Header and Navigation

The header and main navigation links on a page are essential for navigating the site digitally, but serve no purpose when printed. You can hide these elements for print using CSS display properties and media queries:

header,
nav {
  display: none;
}

@media print {
  header,
  nav {
    display: none;
  }
}

Removing Ads and Widgets

Any ads, widgets, or other extraneous content on the page should also be hidden for print. Use the :not() selector to target elements by class or ID and hide them:

.ad,
sidebar,
.widget {
  display: none;
}

@media print {
  body:not(.content) {
    display: none;
  }
}

This will hide any elements that do not have the .content class, allowing only the main content to be printed.

Hiding Background Images

Background images provide no benefit in a printed format and will only waste ink. You can remove background images for print using:

body {
  background-image: none; /* Remove background image for screen */
}

@media print {
  body {
    background-image: none; /* Remove background image for print */
  }
}

Additional Considerations

A few other things to consider for print optimization include:

Remove hyperlinks by setting a { text-decoration: none; } for print
Increase font sizes and line height for easier reading
Left-align text and avoid floats for a simple print layout
Remove animations/transitions using * { animation: none; transition: none; }

Optimizing your web pages for print using CSS ensures your readers will get a clean, focused version of your content in hard copy format with no wasted space or resources. By hiding irrelevant elements and streamlining the design, you create an optimal print experience for your users.

Fine-Tuning and Testing Print Styles

Now that you have your print styles defined and tested in the browser, it’s time for the final polish. There are a few more things you can do to ensure your printed web pages look as professional as possible.

Double Check the Details

Go over your print CSS with a fine-tooth comb. Triple check that:

Header and footer margins are balanced
No widows or orphans (single words or short lines at the top or bottom of pages)
Page numbers are centered
Hyperlinks are not underlined
There are no artifacts from interactive elements like buttons

Even the smallest details matter when it comes to print design.

Test in Multiple Browsers

Not all browsers render print styles exactly the same. Do some testing across the major ones like:

Chrome
Firefox
Safari
Edge

Check how headers, columns, images, and page breaks appear. Make any final tweaks to get the most consistent results possible.

Consider Media Queries for Other Formats

Most print CSS targets standard 8.5” x 11” paper in portrait orientation. You may want to create media queries for other sizes like:

Legal (8.5” x 14”)
Ledger (11” x 17”)
Landscape orientation

This will ensure your printed web pages look great no matter what size paper or orientation your users select.

Final Debugging

Even with all your testing, there may still be a few pesky bugs to squash. Some things to double check:

Unwanted page breaks: Adjust page-break-before, page-break-after, and page-break-inside as needed.
Images spilling into margins: Add padding, change floats, or resize images.
Text not fitting in columns: Tweak column widths and margins.
Elements not printing at all: Check for display: none and visibility: hidden declarations.

With some final debugging and testing in multiple browsers, your print styles should be polished, professional, and ready to print! Your users will appreciate all the extra effort you put into optimizing their printed web pages.

Conclusion

So there you have it, with just a few tweaks to your CSS you can optimize your web content for print and make life easier on your readers. Using print-specific stylesheets, you can hide unnecessary page elements, adjust font sizes and margins, and generally declutter the information.

Your readers will thank you for a printed page that’s clean, concise, and easy on the eyes. With print style sheets, you really can have the best of both worlds - a robust web design and a print-perfect PDF. Give it a try and unleash your inner print designer!

Also published here.