Designing something that needs to work both on screen and on paper exposes a fact that doesn't come up otherwise: a "pixel" isn't a real-world size, and several CSS units that behave predictably on screen become unreliable — or meaningless — the moment ink hits paper.
Units That Only Make Sense On Screen
- vw / vh — tied to the browser viewport, which doesn't exist on a printed page. Print stylesheets should avoid these entirely.
- px — technically works in print CSS, but since it's based on the 96-PPI screen convention rather than a printer's actual DPI, sizes can come out smaller or larger than expected on paper.
- % — still calculates fine relative to a parent, but percentages of a viewport-sized layout won't translate to a fixed page size the same way.
Units Built For Physical Size
- in, cm, mm — these describe real-world physical distance regardless of any screen or printer, which is exactly what you want when a design needs to match a physical dimension (a business card, a label, a poster).
- pt — the print industry's native unit, and what most PDF and print tooling expects internally.
How the Units Map Onto Each Other
CSS ties every absolute unit to one anchor: the reference pixel, defined as 1/96 of an inch. On screen, the browser treats the pixel as the base and derives inches from it. On paper, the printer works the other way round — the inch is a real inch, and a CSS pixel becomes 1/96 of it. That's why the same numbers can look "wrong" on a monitor yet measure correctly with a ruler on a printout.
| Unit | Pixels (CSS) | On screen | On paper |
|---|---|---|---|
| 1px | 1 | Reliable for layout | About 0.26mm |
| 1pt | 1.3333 | Works, no advantage over px | Exactly 1/72 inch |
| 1mm | 3.7795 | Rarely matches a ruler | Exactly 1mm |
| 1cm | 37.795 | Rarely matches a ruler | Exactly 1cm |
| 1in | 96 | Rarely matches a ruler | Exactly 1 inch |
| 1rem | 16 (default) | Follows user font setting | Usually 12pt (16px) |
| 1vw / 1vh | Varies | 1% of the window | 1% of the page box, unpredictable in practice |
Note the last row: browsers do resolve vw and vh during printing, typically against the printable page area, but the result depends on paper size, margins, and the browser's print settings, so you can't rely on it.
A Practical Print Stylesheet Pattern
Most sites benefit from a dedicated @media print block that overrides screen-only units:
@media print { body { font-size: 12pt; } .container { width: 6.5in; } }
This keeps day-to-day screen styling untouched while giving print output units that will actually hold their real-world size once printed. A fuller version that you can drop into most sites looks like this:
@page {
size: A4; /* or: letter */
margin: 20mm 18mm;
}
@media print {
body { font-size: 11pt; line-height: 1.4; color: #000; background: #fff; }
h1 { font-size: 20pt; }
h2 { font-size: 15pt; break-after: avoid; }
.container{ width: auto; max-width: none; padding: 0; }
nav, footer, .ads, video { display: none; }
img { max-width: 100%; break-inside: avoid; }
a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}A few details matter here. The @page rule sets the paper size and margins in physical units. Setting width: auto on the container lets the content fill the printable area instead of a fixed desktop width that might overflow. And printing link URLs after the link text keeps them useful on paper, where nobody can click.
Page Sizes in CSS Units
When you do need fixed widths for print, it helps to know the printable area. With the margins below, these are the content widths left over:
| Paper | Page size | Margins | Content width |
|---|---|---|---|
| US Letter | 8.5in × 11in (816 × 1056px) | 1in each side | 6.5in (624px) |
| A4 | 210mm × 297mm (about 794 × 1123px) | 20mm each side | 170mm (about 643px) |
| A5 | 148mm × 210mm (about 559 × 794px) | 15mm each side | 118mm (about 446px) |
That 6.5in figure is where the .container { width: 6.5in; } in the earlier example comes from. If you need to check one of these conversions yourself, the PX to MM and PX to Inch converters use the same 96px-per-inch reference.
Typography Is the Biggest Gotcha
Font sizes set in vw for a punchy, screen-scaling hero heading will print at whatever arbitrary size the viewport happened to be measured at — completely unrelated to a sensible printed font size. If a page might realistically get printed (an invoice, a recipe, a resume builder), give its print stylesheet its own explicit pt or in-based sizing rather than inheriting the screen values.
A simple, readable print type scale might be 11pt body text, 9pt captions and footnotes, and headings stepping up through 13pt, 15pt, and 20pt. Those are conventional sizes in document design and they translate to 14.67px, 12px, 17.33px, 20px, and 26.67px if you ever need the screen equivalents. For more on the conversion itself, see PT to PX: What Points Mean in Web Design.
What About rem and em in Print?
Relative font units still work when printing. They resolve against the root font size just as they do on screen, so if your print stylesheet sets html { font-size: 11pt; }, every rem-based value in the document scales with it. This is often the cleanest approach: change one root size in @media print and let the rest of a rem-based design follow, rather than overriding every heading individually.
The catch is anything sized in px or vw on screen. Those don't follow the root size, so they need explicit print overrides.
Print Resolution and Why px Isn't a Printer Dot
A printer at 300 DPI lays down 300 dots per inch, but the browser still treats a CSS inch as 96 CSS pixels. When printing, it simply maps each CSS pixel onto roughly 3.125 printer dots. Text and vector shapes stay sharp because they're rendered at the printer's full resolution. Raster images are the exception: a 600px-wide photo set to width: 6.25in has only 96 image pixels per inch, which can look soft on paper. For crisp print, the image needs closer to 300 pixels per printed inch — about 1875px wide for that same 6.25in slot. The difference between screen and printer density is covered in DPI vs PPI.
Common Print Mistakes
- Fixed desktop widths. A
width: 1200pxcontainer is 12.5 inches wide — wider than both Letter and A4 — so content gets cut off or shrunk to fit. - Background colours and images disappearing. Browsers skip backgrounds by default to save ink. Don't put essential information (status colours, logos) only in a background.
- Sticky and fixed elements. A
position: fixedheader can repeat on every page or overlap content. Set it toposition: staticor hide it in print. - Headings stranded at the bottom of a page. Use
break-after: avoidon headings andbreak-inside: avoidon tables, figures, and cards. - Testing only on screen. Use your browser's print preview, or the print media emulation in developer tools, before shipping.
Frequently Asked Questions
Will a 1cm box on my screen measure 1cm with a ruler?
Usually not. On screen, 1cm is 37.795 CSS pixels, and how big that looks depends on your display's pixel density and the operating system's scaling. On a printed page, though, it should measure 1cm, as long as the print dialog isn't set to "fit to page" or a custom scale.
Should print stylesheets use pt or mm?
Both work. Points are the traditional choice for font sizes, while mm or in are more natural for page margins, label dimensions, and box sizes. A common split is pt for type and mm or in for layout.
Why does my printout look smaller than expected?
The most common cause is the browser shrinking an overly wide layout to fit the paper. Check the print dialog's scale setting, and remove fixed px widths in your print stylesheet so content fits the printable area naturally.
Can I set paper size from CSS?
Yes, with @page { size: A4; } or size: letter, plus landscape if needed. Browser support for the full range of @page features varies, so treat it as a strong hint and test in your target browsers.
Try it yourself: take the widest fixed element on your site and run its width through the PX to Inch converter — if it's more than about 6.5in, it needs a print override. Our CSS unit converters cover px, pt, in, cm, and mm in both directions.