Websites Should Be Printable: A Forgotten Web Design Principle
Printability is a usability metric that tests a website's information architecture and semantic HTML.
The article centers on Brennen Puth's "Websites Should Be Printable," pointing out that print styles are widely neglected in modern frontend development, causing chaotic print output on many sites. The author argues that printability is essentially a usability metric that tests whether page content is truly built on semantic HTML. Print rendering, reading modes, and search engine crawling share the same de-styled extraction logic, so improving the print experience requires only a few dozen lines of CSS—but only if the page has clean HTML structure. Viewing printing as the last link in the progressive enhancement chain can reverse-constrain information architecture design and preserve content portability.
Introduction
In an era dominated by responsive design, dark mode, and PWA, "print styles" have become almost the most frequently skipped chapter in frontend development. In his blog post "Websites Should Be Printable," Brennen Puth makes a simple yet pointed argument: if a website cannot be printed properly, its information architecture is itself flawed. The post garnered 235 points and 162 comments on Hacker News, showing that this seemingly "retro" topic strikes a chord with a considerable number of developers.
Why Print Styles Have Been Marginalized
The decline of print styles has a clear technical trajectory. Early web pages were document-centric, and the browser's default print output was barely usable; with the rise of single-page applications, CSS frameworks, and component libraries, developers focused their attention on on-screen rendering, and @media print gradually became an optional optimization. Many modern sites, when printed, output navigation bars, sidebar ads, floating buttons, and full-block dark backgrounds, squeezing the body text into a few scattered lines.
A more insidious problem lies in semantic structure. When pages stack layouts with numerous divs and carry key information in background images, print output simply loses that content. Printing is essentially a "degraded rendering"—it strips away interactions, animations, and some styles, leaving only the document flow. Whether a website can survive this degradation tests whether its content is truly built on semantic HTML.
@media print is a CSS media query used to define style rules for a document when printed or in print preview. Its syntax matches screen media queries, and developers can use it to override default styles, hide unnecessary elements, and adjust font sizes and colors. Browsers automatically apply these rules when generating print output, but if not explicitly defined, they fall back to the user agent's default print stylesheet—which usually only does the most basic typesetting. Media queries themselves are the cornerstone of responsive design, and @media print is just one of many media types, yet it has long been neglected because the development workflow lacks a print preview step.
Printability Is a Usability Metric
Understanding "printable" as a usability dimension is more accurate than treating it as a visual detail. Users print web pages in far more scenarios than one might imagine: saving receipts, printing recipes, printing reference materials for papers, printing contract terms, reading in offline environments. Many in the Hacker News comment section mentioned that they habitually print long articles to PDF for archiving, and poorly typeset pages directly break this workflow.
This means printability directly relates to the portability of information. A page that can only be read properly at a specific screen size and in a specific browser effectively locks its content to the device. Conversely, pages with clear structure and print-friendliness usually also have better accessibility support—the semantic information that screen readers rely on highly overlaps with the structural information that print rendering relies on.
Minimal Practices for a print Stylesheet
Improving the print experience doesn't require complex engineering. Define an @media print rule to hide navigation, ads, and interactive controls; set the body container width to auto and font sizes to absolute values suitable for paper; remove dark backgrounds and ensure sufficient contrast between text and background; add visible URL text for links. The common prerequisite for these rules is that the page itself has clean HTML structure—if the body text is wrapped in multiple layers of non-semantic containers, no print style can save it.
Progressive Enhancement is a web development strategy that advocates building from the most basic, widely compatible semantic HTML first, then layering CSS styles and JavaScript interactions on top, ensuring core content is accessible in any environment. Its counterpart, "graceful degradation," starts from the full experience and subtracts for older environments. The print scenario is naturally an extreme test of progressive enhancement: it strips away almost all enhancement layers, leaving only the document flow. Therefore, a page that remains clearly structured in print preview usually means its foundation layer is robust enough, which also explains why printability shares the same underlying requirements as accessibility and SEO.
Semantic HTML Is the Fundamental Solution
Brennen Puth's argument can be further extended: printability is not about patching pages, but a continuous constraint on information architecture. When developers examine pages by the standard of "does this content still hold up without styles," many design decisions naturally converge—body text uses correct heading hierarchy, lists use list elements, tables retain headers, images provide alt text.
This constraint is equally valuable in AI scraping and content aggregation scenarios. Search engines, reading modes, RSS renderers, and various scraping tools are essentially performing "de-styled" extraction similar to printing. A page with chaotic print output often performs equally poorly in reading modes and structured extraction. From this perspective, printability shares the same underlying requirements as SEO and accessibility.
The Progressive Enhancement Perspective
It is reasonable to view printing as the last link in the progressive enhancement chain: the foundation layer is semantic HTML, the middle layer is screen styles and interactions, and the top layer is animations and rich media. Print style checks whether the foundation layer is solid. Websites that remain clear in print preview usually also maintain dignity when JavaScript is disabled, reading mode is enabled, or search engines crawl them.
Conclusion
The scale of discussion sparked by "Websites Should Be Printable" shows that this is not a niche aesthetic preference, but a reminder of the shifted focus in modern web development. While pursuing visual effects and interactive experiences, preserving the ability for "content to be taken away" is one of the most basic respects a website can show its users. A print stylesheet is only a few dozen lines of CSS, but it tests whether the entire page's information structure is honest.
Sources: Brennen Puth's blog post "Websites Should Be Printable," Hacker News discussion thread (235 points, 162 comments).
Related articles
world2vec: Building Mechanistic World Models with Latent Dynamics Learning
world2vec proposes a reward-free method for learning mechanistic world models via latent dynamics, faithfully reproducing systems over long horizons with at least an order of magnitude fewer parameters than DreamerV3, TD-MPC2, and LeWM, and achieving accurate system identification on 71 attractor benchmarks.
A New KL-DRO Paradigm: Adaptive Scenario Generation Around a Learned Density Model
KL-DRO research proposes centering the KL ball on a learned density model instead of the empirical distribution, with adaptive scenario generation guiding sampling toward the worst case. Experiments show lower cost under distribution shift when records are scarce and the model can extrapolate, with comparable in-distribution cost.
ODE Samplers for Discrete Diffusion Models: Exponential Residual Flows Accelerate Generation
Discrete diffusion models lack deterministic ODE sampling? This article introduces Exponential Residual Flows (ERFs), which introduce continuous residual variables per token to construct piecewise ODEs for deterministic sampling and support consistency distillation acceleration. Superior to prior methods on code and text generation tasks.