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 rule to target print media, so you can adjust styles specifically for printing. @media First, you'll want to link to a separate print stylesheet in the of your HTML document: In your file, use to wrap print-specific styles. For example, to hide elements like navigation menus that are irrelevant for print, use: print.css @media print { } @media print {
  nav, aside {
    display: none;
  }
} You'll also want to adjust page settings. Use to set margins, page size, and more. For example: @page @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 , , or . 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. Times New Roman Georgia Cambria 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 to cover so the image fills the entire page. background-size 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 , , and properties. For example, to force a page break before an element, use: page-break-before page-break-after page-break-inside <h2> h2 {
  page-break-before: always;
} This will ensure each section starts on its own page. You can also use to prevent page breaks in certain elements: avoid .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 property to remove them from the print layout: display: none 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 , , or remove the position to span the entire top of the page. @top-left @top-right 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]" or 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 and properties. counter-reset counter-increment 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 to target elements by class or ID and hide them: :not() selector .ad,
sidebar,
.widget {
  display: none;
}

@media print {
  body:not(.content) {
    display: none;
  }
} This will hide any elements that do have the .content class, allowing only the main content to be printed. not 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 for print a { text-decoration: none; } 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 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. CSS 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

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Hot Off the Press: Using CSS for Printer Optimization

Too Long; Didn't Read

People Mentioned

Rahul

STORY’S CREDIBILITY

Guide

Code License

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...