Designing For Print With Css

The Print Media Query

The @media print rule forms the foundation of print styling in CSS. Any styles defined within this block apply only when the document is printed, either to a physical printer or saved as a PDF. This approach keeps print styles organized and separate from screen styles while allowing them to coexist in the same stylesheet.

Basic Implementation

@media print {
 /* All print-specific styles go here */
 body {
 font-size: 12pt;
 line-height: 1.5;
 }

 .navigation,
 .sidebar,
 .advertisement {
 display: none;
 }
}

The @media print rule accepts all standard CSS properties, allowing complete control over typography, layout, spacing, and visibility in printed output. Styles within this block override conflicting screen styles for print contexts, ensuring that printed pages display exactly as intended regardless of the screen design.

Best Practices for Media Queries

When implementing print media queries, consider organizing your print styles with a clear strategy. Group all print-specific styles within the @media print block rather than scattering them throughout your stylesheet. This approach makes maintenance easier and ensures consistency across your print output.

Use the cascade to your advantage--define base styles that work for both screen and print, then add print-specific adjustments within the media query. This reduces code duplication and makes your stylesheets more maintainable.

Alternative Approaches

Some developers prefer separate print stylesheets linked with the media="print" attribute on the link element. This approach separates print styles into their own file and can improve organization for very large print style sets. However, it requires maintaining an additional HTTP request and stylesheet file.

<link rel="stylesheet" href="styles.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">

Embedding print styles within your main stylesheet using the @media print block keeps related styles together and simplifies stylesheet management. This approach is generally recommended for most projects as it reduces the number of HTTP requests and keeps related CSS together.

For websites that require comprehensive media query strategies, our web development team can implement print styles alongside responsive design for all screen sizes.

Page Setup With @page

The @page rule provides fundamental control over page appearance in printed output. Unlike most CSS rules that apply to elements, @page applies to the page itself, controlling margins, size, and other page-level properties. This rule is essential for achieving professional-looking printed documents.

The @page Rule

@page {
 size: A4;
 margin: 2cm;
}

@page :first {
 margin-top: 4cm; /* Extra space on first page */
}

The @page rule accepts several descriptors that control different aspects of page appearance. The size descriptor sets page dimensions, supporting named page sizes like A4, Letter, and Legal, as well as explicit width and height values. The margin descriptor sets all four margins simultaneously, while individual margin descriptors provide fine-grained control.

Available Page Sizes

The size descriptor supports numerous standard page sizes used in different regions and industries:

• A-series (ISO): A3, A4, A5 (commonly used for documents)
• US Letter: Letter, Legal, Ledger
• Business cards: 3.5in×2in, 55mm×85mm
• Custom: Explicit width and height values

@page {
 size: Letter; /* US Letter paper */
 margin: 1in;
}

Page Pseudo-Classes

The @page rule supports several pseudo-classes that allow different styling for different pages in a printed document. The :first pseudo-class targets only the first page of a document, useful for adding headers or extra spacing. The :left and :right pseudo-classes target left-facing and right-facing pages respectively, enabling mirrored margins for double-sided printing.

@page :left {
 margin-left: 3cm;
 margin-right: 2cm;
}

@page :right {
 margin-left: 2cm;
 margin-right: 3cm;
}

@page :blank {
 content: "This page is intentionally left blank";
}

These pseudo-classes enable professional document formatting that matches traditional print publishing standards. When printing booklets, reports, or multi-page documents, mirrored margins ensure consistent binding margins while maintaining readable content areas. Mirrored margins are particularly important for documents that will be bound on one edge, such as books or manuals.

Professional print styling is an essential component of comprehensive SEO strategies, ensuring that printed materials from your website maintain brand consistency and usability.

Hiding Elements For Print

One of the most common print styling tasks involves hiding elements that serve no purpose on paper. Navigation menus, sidebars, footers with site links, social sharing buttons, advertisements, and interactive forms typically contribute nothing to printed documents and should be hidden to reduce clutter and save space.

Strategic Element Removal

@media print {
 .main-navigation,
 .site-header .search-form,
 .social-share-buttons,
 .advertising-banner,
 .sidebar-widget,
 .comments-section,
 .footer-navigation {
 display: none !important;
 }
}

Using display: none removes elements entirely from the printed output, reclaiming the space they occupied on screen. The !important declaration ensures these styles take precedence over any conflicting inline or external styles, though well-structured stylesheets should not require this declaration in most cases.

Elements to Consider Hiding

When auditing your site for print-friendly design, identify elements that add no value to printed content:

• Navigation menus: Users already have the content they need
• Search forms: Interactive elements don't function on paper
• Social sharing buttons: Clickable elements are irrelevant when printed
• Advertisement banners: Waste ink and don't serve print readers
• Sidebar widgets: Often contain dynamic or promotional content
• Comments sections: May be valuable but often better excluded
• Newsletter signup forms: Can't be interacted with after printing

Content Preservation

When hiding elements, be careful not to inadvertently remove important content. Some elements that appear decorative on screen may contain valuable information for print readers. For example, contact information displayed in a header should remain visible, while a complex navigation menu might be replaced with a simple "Table of Contents" link.

Consider creating alternative content for print that is hidden on screen. Using CSS classes like print-only, you can include phone numbers, addresses, or other contact information specifically for printed documents. This technique maintains clean screen layouts while providing comprehensive information in print output. Learn more about CSS best practices for professional web development.

@media print {
 .print-only {
 display: block !important;
 }

 .screen-only {
 display: none !important;
 }

 .print-header {
 display: block;
 text-align: center;
 margin-bottom: 1cm;
 }
}

Implementing proper print styles demonstrates the attention to detail that characterizes our professional web development services.

Typography For Print

Print typography requires different considerations than screen typography. Print resolution vastly exceeds screen resolution, allowing smaller fonts to remain readable. Serif fonts traditionally perform better in extended print reading, though sans-serif fonts work well for headlines and short passages. Fixed-width fonts excel for tabular data and code snippets.

Font Considerations

@media print {
 body {
 font-family: "Georgia", "Times New Roman", serif;
 font-size: 12pt;
 line-height: 1.5;
 color: black;
 }

 h1, h2, h3 {
 font-family: "Helvetica Neue", Arial, sans-serif;
 }
}

Setting font size in points (pt) rather than pixels or ems aligns with traditional print measurement and produces consistent sizing across printers and browsers. A base font size of 10-12pt works well for body text, with headings sized proportionally larger. This measurement system has been standard in printing for centuries and translates reliably across output devices.

Recommended Typography Values

For optimal print readability, consider these guidelines when setting typography:

• Body text: 10-12pt font size with 1.4-1.6 line height
• Headings: Proportionally larger (14-18pt for H1, decreasing for smaller headings)
• Font families: Serif for body text improves readability in extended reading
• Code snippets: Monospace fonts like Courier New or Consolas

Color And Contrast

Printed output should use pure black text on white backgrounds for optimal readability and minimum ink consumption. Dark gray text (#333333 or similar) also works well for body copy, while headings can use slightly darker shades. Avoid light text on dark backgrounds, as this dramatically increases ink usage and may reduce readability depending on print quality.

@media print {
 body {
 color: #333;
 background: white;
 }

 a {
 color: #000;
 text-decoration: underline;
 }

 h1, h2, h3, h4 {
 color: #000;
 }
}

Link underlines should remain enabled in print, as there are no hover states or visual cues to indicate interactivity. Consider removing link colors to maintain consistent document appearance, but keep underlines so readers can identify which text contains links. This maintains the document's professional appearance while ensuring readers understand which text contains links.

For websites that need polished typography across all media, our web development services ensure consistent, professional presentation.

Page Breaks And Content Flow

CSS provides properties for controlling page breaks within content, preventing awkward breaks that separate related content across pages. The page-break-before, page-break-after,, and page-break-inside properties offer fine-grained control over page break behavior.

Controlling Page Breaks

@media print {
 h1, h2, h3 {
 page-break-after: avoid;
 }

 table, figure {
 page-break-inside: avoid;
 }

 .break-before-section {
 page-break-before: always;
 }

 .avoid-break-after {
 page-break-after: avoid;
 }
}

Setting page-break-after: avoid on headings prevents awkward situations where a heading appears at the bottom of a page with its content beginning on the next page. Similarly, page-break-inside: avoid on tables and figures ensures related content remains together. These rules create more professional, readable printed documents.

Best Practices for Page Breaks

When designing print styles, consider the logical flow of content and how page breaks affect readability:

• Headings: Always keep headings with their following content
• Tables: Prevent breaks within table rows when possible
• Figures: Keep images with their captions
• Lists: Avoid breaking list items across pages
• Code blocks: Keep code examples together

Preventing Orphaned Content

The orphans and widows properties control the minimum number of lines that must appear at the bottom and top of a page respectively. These properties help prevent isolated lines (orphans) at the bottom of a page or single lines (widows) at the top of the next page, improving the visual flow of printed content.

@media print {
 body {
 orphans: 3;
 widows: 3;
 }
}

Setting orphans: 3 ensures at least three lines of a paragraph appear at the bottom of a page before a break, while widows: 3 ensures at least three lines appear at the top of the next page. These values work well for most body text at standard font sizes, though you may adjust them based on font size and line length. Values of 2-4 lines typically provide good results for most document types.

Implementing proper page break control is essential for professional web applications that generate printable documents like reports, invoices, and certificates.

Links In Print

One of the most valuable print styling techniques involves displaying URLs after linked text, making printed links actionable for readers. The CSS content property combined with attr() function extracts attribute values for display.

Printing Link URLs

@media print {
 a[href^="http"]::after {
 content: " (" attr(href) ")";
 font-size: 0.9em;
 color: #666;
 }

 a[href^="#"]::after,
 a[href*="example.com"]::after {
 content: ""; /* Don't show URL for internal links */
 }
}

This technique appends the URL in parentheses after each external link. Selectors can differentiate between internal and external links, printing URLs only where they provide value. The [href^="http"] selector targets absolute URLs (typically external), while the [href^="#"] selector targets anchor links within the same page.

Advanced Link Selectors

You can create sophisticated link formatting rules based on link type and destination:

@media print {
 /* External links with full URL */
 a[href^="http"]:not([href*="yoursite.com"])::after {
 content: " (" attr(href) ")";
 }

 /* Email links show address */
 a[href^="mailto:"]::after {
 content: " (email: " attr(href) ")";
 }

 /* Phone numbers */
 a[href^="tel:"]::after {
 content: " (" attr(href) ")";
 }

 /* Skip anchor and relative links */
 a[href^="#"]::after,
 a[href^="/"]::after {
 content: "";
 }
}

Link Formatting

Consider the visual presentation of link URLs in your print output. Smaller font sizes (85-90% of body text) and muted colors prevent URLs from dominating the visual hierarchy while remaining readable. Parentheses or brackets clearly distinguish URLs from surrounding text.

@media print {
 a::after {
 content: " <" attr(href) ">";
 font-size: 0.85em;
 color: #555;
 }

 /* Skip URLs for certain link types */
 a[href^="mailto:"]::after {
 content: " (" attr(href) ")";
 }

 a[href^="tel:"]::after {
 content: "";
 }
}

This approach makes printed documents more useful by preserving the source of linked information, which is essential for legal documents, research papers, and reference materials.

For comprehensive link handling strategies, our web development team can implement advanced print styles across your entire website.

Images And Graphics

Background Images

By default, most browsers do not print background images or background colors to save ink. If your design relies on background images for important visual elements, you may need to adjust print settings or provide alternative styling. The -webkit-print-color-adjust property forces background printing in WebKit browsers.

@media print {
 .important-background {
 background-image: none;
 background-color: #f0f0f0;
 -webkit-print-color-adjust: exact;
 print-color-adjust: exact;
 }
}

The print-color-adjust property (with the -webkit- prefix for Safari and older Chrome) enables background color printing. Use this feature sparingly, as it increases ink consumption. Reserve it for situations where background color conveys meaningful information rather than decorative purposes.

Image Optimization

Consider reducing image size or quality for print output. High-resolution images intended for retina screens may produce unnecessarily large print files. Using the CSS content property, you can replace large images with smaller alternatives or text descriptions specifically for print.

@media print {
 .hero-image {
 display: block;
 max-width: 50%;
 height: auto;
 }

 .decorative-banner {
 display: none;
 }

 .product-image {
 max-width: 30%;
 }
}

Image Handling Guidelines

When optimizing images for print, follow these best practices:

• Reduce image size: Scale down to 50% of screen display size
• Remove decorative images: Hide unnecessary graphics completely
• Keep essential images: Product photos and diagrams remain visible
• Use color sparingly: Force backgrounds only when necessary
• Consider bandwidth: Print CSS can reduce PDF file size

Replacing Images For Print

For advanced scenarios, you can replace images entirely for print output:

@media print {
 .chart-image {
 display: none;
 }

 .chart-image::after {
 content: "[Chart: Q1-Q4 Revenue Growth - See digital version]";
 display: block;
 font-style: italic;
 }
}

This technique ensures that printed documents remain functional even when complex graphics cannot be displayed, while directing readers to the full digital experience.

Our web development services include comprehensive image optimization strategies for both screen and print output.

Cross-Browser Print Compatibility

Different browsers implement print styles with varying degrees of accuracy and consistency. Chrome and Firefox generally follow print specifications closely, while Safari's WebKit engine has some unique behaviors. Testing print styles across multiple browsers helps ensure consistent output for all users.

Common Browser Differences

Understanding browser differences helps you write more effective print styles:

• Default margins: Some browsers apply default margins, others do not
• Background printing: WebKit browsers require explicit color-adjust settings
• Page size detection: Different methods of determining paper size
• Running headers: Variable support for fixed-position elements

Common Issues And Solutions

Issue: Content cut off at page edges Solution: Use @page { margin: } to explicitly set margins and ensure content falls within printable areas. Test with actual printers, as printable areas vary between devices.

@page {
 margin: 2cm;
}

Issue: Background colors not printing Solution: Use -webkit-print-color-adjust: exact and print-color-adjust: exact to force background color printing. Be aware this setting depends on browser configuration and user preferences.

Issue: Links not wrapping properly Solution: Use word-wrap: break-word on link content to prevent long URLs from extending beyond page margins. This ensures URLs break at word boundaries rather than creating overflow.

@media print {
 a {
 word-wrap: break-word;
 }
}

Testing Print Styles

Effective print style development requires thorough testing:

1. Use browser print preview (Ctrl+P or Cmd+P) during development
2. Test PDF output using "Save as PDF" option for accuracy
3. Use browser DevTools print media type emulation
4. Test across multiple browsers and operating systems
5. Print to actual physical printers when possible
6. Test different page sizes and orientations

Browser developer tools increasingly include print preview emulation. Chrome DevTools offers a "Rendering" tab with print media type emulation, allowing you to view pages as they would appear in print without actually printing. Firefox includes similar functionality in its responsive design mode.

Comprehensive print styling demonstrates the quality of professional web development, ensuring that every aspect of the user experience is considered, including offline use cases.

Sources

1. MDN Web Docs - Printing - Official web standards documentation for print CSS
2. A List Apart - CSS Design: Going to Print - Industry-standard best practices from CSS expert Eric Meyer
3. WP Engine - How to Style your Website for Print with CSS - Practical guide for print styling implementation
4. MDN Web Docs - @page Rule - @page at-rule documentation for page setup
5. MDN Web Docs - CSS Paged Media Module - Complete guide to CSS paged media specifications