Two-page invoice
Traditional trade invoice
The Pine & Rivet order appears here in a quieter treatment, showing how the same underlying business content can support a different visual system.
Highlighted features
Bundled Source Sans 3 with @font-face
@font-face loads the bundled Source Sans 3 files, so the invoice renders with its intended typography without a network request.
Monochrome ruled table and header group
Black rules define the compact item table, and display: table-header-group marks its header for paged layout.
Payment and totals kept together
break-inside: avoid on the settlement block keeps the payment details and totals together on the final page.
How the layout works
This version uses the same order as the modern trade invoice to make the effect of the stylesheet easy to compare. A letter-size @page rule repeats the invoice reference and a counter(page) / counter(pages) footer on both sheets.
@font-face loads bundled Source Sans 3 files for consistent typography without a network request. Grid places the customer and order facts; black rules separate the compact item table, and thead is marked as a table header group. The settlement block uses break-inside: avoid to keep payment details and totals together on the final page.
Generate the PDF
Extract the source ZIP, keep invoice.html, invoice.css, and fonts/ together, and run from that directory.
precisionpdf invoice.html invoice.pdffrom precisionpdf import HTML
HTML(filename="invoice.html").write_pdf("invoice.pdf")