Fulfilment / 4 x 6 inch
4x6 shipping label HTML template
A 4 by 6 inch thermal label with a service band, a large delivery address, a routing code and a barcode with real quiet zones.
When this document is the right one
A parcel is despatched. The reader is a sorting machine first and a delivery driver second, and neither of them is looking at the design.
Why each part is there
The fields are visible in the markup. What is not visible is why they are present, which is the part that gets removed first when someone adapts a template for their own use.
- The delivery address at 13pt and the postcode larger still, because a driver reads it at arm's length in poor light.
- A routing code in very large type, which is the field a sorter uses to send the parcel to the right depot.
- Barcode quiet zones of 7mm at each end, which is blank paper the scanner needs to find where the code starts.
- The human-readable number under the barcode, because the fallback when a scan fails is somebody typing it.
- A sender block small enough not to compete, since it only matters if the parcel is undeliverable.
The template
A complete file. Doctype, stylesheet, body: paste it into a renderer unchanged and it produces a finished 4 x 6 inch page. Replace the sample data and the styling holds.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shipping label, H00448812203</title>
<style>
/* 4 by 6 inches, the thermal shipping label every carrier accepts. Die cut
stock has no unprintable border, so the margin is zero and the quiet
zones around the barcodes do the work instead. */
@page { size: 101.6mm 152.4mm; margin: 0; }
* { box-sizing: border-box; }
body {
margin: 0; height: 152.4mm; padding: 3mm;
font: 9pt/1.25 Arial, Helvetica, sans-serif;
/* One bit per dot. There are no greys on a thermal head: a tint becomes
a dither pattern and a scanner reads that as noise. */
color: #000; background: #fff;
display: flex; flex-direction: column;
}
.rule { border-top: 1.5px solid #000; margin: 2mm 0; }
.rule-heavy { border-top: 3px solid #000; margin: 2mm 0; }
.top { display: flex; justify-content: space-between; align-items: flex-start; }
.service { border: 2px solid #000; padding: 1.5mm 3mm; font-size: 13pt;
font-weight: 700; letter-spacing: 0.04em; }
.from { font-size: 7.5pt; line-height: 1.25; max-width: 48mm; }
.to { margin-top: 1mm; }
.to .k { font-size: 7pt; letter-spacing: 0.12em; text-transform: uppercase; }
.to address { font-style: normal; font-size: 13pt; line-height: 1.25;
font-weight: 700; margin-top: 1mm; }
.to .postcode { font-size: 17pt; letter-spacing: 0.06em; }
.routing { text-align: center; font-size: 26pt; font-weight: 700;
letter-spacing: 0.06em; line-height: 1; margin: 1mm 0; }
/* Linear barcodes need blank paper at each end or the scanner cannot find
where the code starts. 7mm is comfortably over the specified minimum. */
.barcode { margin-top: auto; padding: 0 7mm; text-align: center; }
.barcode img { width: 100%; height: 22mm; display: block; }
.barcode .human { font-size: 10pt; letter-spacing: 0.14em; margin-top: 1.5mm;
font-variant-numeric: tabular-nums; }
.foot { display: flex; justify-content: space-between; font-size: 7pt; margin-top: 2mm; }
</style>
</head>
<body>
<div class="top">
<div class="from">
<strong>FROM</strong><br>
Fennel & Rye<br>
Unit 4, Riverside Works<br>
Bath BA2 3EU<br>
01225 440 118
</div>
<div class="service">48 TRACKED</div>
</div>
<div class="rule-heavy"></div>
<div class="to">
<div class="k">Deliver to</div>
<address>
H Ashworth<br>
41 Sylvan Road<br>
EXETER<br>
<span class="postcode">EX4 6EW</span>
</address>
</div>
<div class="rule"></div>
<div class="routing">EX4 6</div>
<div class="rule"></div>
<div style="font-size:7.5pt">
Order ORD-99031 · 1 of 1 · 2.4 kg · Packed 13 May 2026
</div>
<div class="barcode">
<img src="data:image/png;base64,iVBORw0KGgo=" alt="Tracking barcode">
<div class="human">H00448812203</div>
</div>
<div class="foot">
<span>fennelandrye.example</span>
<span>Not a proof of posting</span>
</div>
</body>
</html>The layout decision worth understanding
Zero page margin, because die cut thermal label stock has no unprintable border and the usable area is the whole label. Everything is solid black on white: a thermal head is one bit per dot, so a tint becomes a dither pattern and a scanner reads that as noise.
The mistake people make adapting it
Rendering at A4 and letting the printer driver scale it to the label. Scaling changes the ratio of bar to space by a fraction of a millimetre, which is enough to push a barcode outside the tolerance a scanner accepts. Render at the final size.
Rendering it
The page box is declared in the template's own CSS as 4 x 6 inch label, so the size travels with the markup rather than living in the code that calls the renderer. 4 x 6 inch label is not one of the six named formats the API accepts, so set prefer_css_page_size on the request and the renderer will use the page box the document declares.
curl -X POST https://api.pdfpipe.xyz/v1/pdf \
-H "Authorization: Bearer $PDFPIPE_KEY" \
-H "Content-Type: application/json" \
-d '{
"html": "<!doctype html>...",
"options": { "prefer_css_page_size": true }
}' \
--output shipping-label.pdfFrequently asked
Can I use this template commercially?
Yes. Copy it, change it, ship it. It is sample markup written to be taken, and the sample data in it is invented, so replace the names and the numbers before anyone sees it.
Why is the page size in the CSS rather than in the API call?
Because a shipping label is a 4 x 6 inch document, and that is a property of the document rather than of the code that renders it. Declaring it in the page box means the size cannot be lost between the template and the call, which is the usual way a document ends up on the wrong paper.
Will it look the same in every renderer?
The layout will, because it uses ordinary CSS. The page break behaviour will not: break-inside and break-after are implemented differently by browser engines and by dedicated print engines, and some of the paged media specification is not implemented in browser renders at all. That difference is documented per property in the paged CSS reference.
Other templates
Documents from the same part of a business, and one from each of the other groups.
Packing slip HTML template
The document that goes in the box: what was ordered, what was actually shipped, and no prices at all.
Returns form HTML template
The form that goes in the box for the customer to send back: numbered steps, a table to fill in, coded reasons and a choice of outcome.
Goods received note HTML template
The buyer's record of what actually arrived: ordered against delivered against accepted, with every discrepancy explained and signed for.
21-per-sheet address label HTML template
Twenty-one addresses in a fixed 3 by 7 grid on A4, with absolute row heights so the print cannot drift out of the die cuts.
HTML invoice template with CSS
The standard commercial invoice: a demand for payment with line items, a tax figure, and terms that say when the money is due.
Payment receipt HTML template
Proof that a payment was made: the amount, the payment reference, the method, and what it was for.
Quotation HTML template with CSS
A priced proposal with a validity date, a scope, optional items kept out of the headline total, and somewhere to sign.
Every template
The full set, grouped by what part of a business produces the document.
4x6 shipping label PDF size
The 4 by 6 inch label is the standard thermal shipping label accepted by every major carrier, and the most common non-paper page size an API renders.
Paste the template into the playground and get the PDF back. No signup, no key.