How to convert HTML to a clean PDF

What makes an HTML page print well, the CSS that controls pages, and how to avoid the usual problems: cut tables, missing images and tiny text.

Open the tool: HTML to PDF Converter

Design for the page width

An A4 page with 20 mm margins leaves 170 mm, about 643 CSS pixels, for content; US Letter with 0.75 in margins leaves 7 in, or 672 px. Layouts wider than that are scaled down, which makes text smaller. Use max-width: 100% on images and percentage or fr widths in grids.

Print CSS in five lines

  • @page { size: A4; margin: 20mm; } sets paper and margins.
  • h2 { break-after: avoid; } keeps headings with their text.
  • tr, figure { break-inside: avoid; } stops rows and images from splitting.
  • .chapter { break-before: page; } starts sections on a new page.
  • @media print { nav, button { display: none; } } hides screen-only parts.

Fonts and images

Fonts installed only on your computer won't be available elsewhere, so link a web font or use common fonts. Images should be at least 150 to 200 pixels per inch at print size: a photo across a Letter page needs about 1,300 pixels of width.

Choosing the output

For invoices, contracts and documentation, use Save as PDF to keep text searchable and links clickable. For posters, certificates and designs that must look identical everywhere, Download PDF draws the page exactly as you see it.