TL;DR
Get business pricing on monitors, keyboards and dev gear
- Business-only prices and quantity discounts
- Tax-exempt purchasing
- Multiple users, one account, clear invoices
Brennen Puth published an essay arguing that websites with mostly text should be designed to print well, after finding his own page looked poor on paper. He describes using print-specific CSS to adjust text, hide page elements and make links readable in grayscale, while acknowledging that some layout problems remain.
Web developer Brennen Puth is urging publishers of text-heavy websites to improve how their pages look on paper. In an essay published Oct. 24 and updated Oct. 26, he describes testing a printout of his own site and finding its typography, header and links poorly suited to the page. He outlines print-specific CSS changes and notes that some formatting issues remain unresolved.
Puth said he reads printed papers because marking up a physical document helps him engage with the material. When he tried printing his own webpage using the browser’s normal print command, he found that the text was too large, the header looked bad and links appeared too faint in grayscale. The content was visible, but the result was not a layout he considered acceptable.
His example uses CSS rules that apply only when a page is printed. They hide elements marked as unsuitable for paper, show elements intended only for print, set explicit font sizes for body text and headings, add a border to a code-block style and change links to black. Puth says he added a brief author attribution for print and removed his site header from the printed version.
The essay does not present a formal study or claim that most readers print webpages. Puth says he doubts many people print them regularly and acknowledges that adapting his own relatively simple site took a noticeable amount of time. He also says code blocks remain difficult to format because they can behave as a single chunk and run into page breaks.
Print Styling and User Choice
Print styling can affect whether a webpage is usable after a reader sends it to a printer. Screen layouts may include large display text, navigation, colored links or other elements that lose their purpose or legibility on paper. Puth argues that print-specific rules can adapt text-focused pages for paper without changing their on-screen design.
His proposal concerns giving readers another way to use a page’s content. Some readers may want a durable copy, prefer to mark up a document by hand or need a format they can use away from a screen. Puth describes print styling as a way to accommodate those preferences, while noting that creating and maintaining the rules takes time.
Products Worth Considering
Amazon Kindle Paperwhite Signature Edition (12th Generation, 2024), 32 GB, Metallic Black
DJI Osmo Mobile 8 Gimbal with Mic Mini Transmitter, Infinity Black
Bose QuietComfort Wireless Noise-Cancelling Over-Ear Headphones, Black
As an affiliate, we earn on qualifying purchases.
Puth’s Print CSS Example
Browsers have long allowed users to print webpages, but a default printout does not automatically mean the page has been designed for paper. Puth’s essay focuses on the distinction between making content technically printable and making it pleasant to read in print. His proposed approach uses CSS print media rules, which let a site apply different styling when a browser prepares a page for printing.
On Oct. 26, Puth added that feedback from readers on Hacker News and Lobsters had prompted him to rethink parts of his example and simplify his stylesheet. He said the feedback pointed out things he had missed. That update indicates the code shown in the post is an evolving personal example, not a settled standard or a claim that the sample rules will suit every website.
“I would personally love to experience more webpages that think about how printing works.”
— Brennen Puth, in his essay
Limits of the Example
The essay does not establish how often people print webpages or how many sites currently provide dedicated print layouts. Puth explicitly says he is unsure how many people print pages regularly and suggests he may be unusual in doing so. No readership survey or usability testing is included.
It is also unclear how well the sample CSS works across different browsers, printers, page types or accessibility needs. Puth calls code blocks the weakest part of his own print layout and asks readers for ideas on preventing them from breaking badly across pages. His Oct. 26 update says he is simplifying the stylesheet, but does not specify a final version or report results from broader testing.
A Revised Stylesheet Ahead
Puth said he was simplifying the CSS after feedback received through Hacker News and Lobsters. The essay does not give a date for a final revision or identify a particular fix for code blocks, so those details remain open. Readers can test the example by using their browser’s print preview, though the result will depend on the page and printing setup.
Site owners can inspect a print preview to see how their screen designs translate to paper. Puth’s post presents an example for his own site rather than a universal recipe. Whether other publishers adopt print-specific styles is not known.
Key Questions
What is Puth asking website owners to do?
He is asking publishers, especially those with text-focused sites, to consider how their pages look when printed and to use print-specific styling where it helps.
What did Puth change in his print stylesheet?
His example hides selected screen elements, shows a print-only attribution, adjusts text and heading sizes, changes code-block styling and makes links black for grayscale printing.
Does the essay show that most people print webpages?
No. Puth says he doubts many people print webpages regularly and offers no survey data about how common the practice is.
What problem does Puth say remains?
He says code blocks are still difficult to format because they tend to stay together as a chunk and can break awkwardly at page boundaries.
Did Puth revise the example after publishing?
Yes. In an Oct. 26 update, he said feedback from readers on Hacker News and Lobsters had led him to simplify the stylesheet. He did not specify a final version.
Source: brennenputh.me
