PDFPipe

Cards and badges / Business card

Business card PDF size and bleed

85.6 by 53.98 millimetres is the ID-1 rectangle: the size of a bank card, and the business card standard across most of the world.

The dimensions

One measurement in four units. Millimetres and inches are what a printer works in; points are what the PDF itself stores; pixels are only useful for checking a screen mock-up against the real thing.

  • Millimetres: 85.6 x 53.98 mm
  • Inches: 3.37 x 2.13 in
  • Points: 243 x 153 pt
  • CSS pixels: 324 x 204 px at 96 dpi

Where the size comes from

The dimensions are fixed by ISO 7810 as the ID-1 format, which is why a business card, a bank card, a driving licence and an access badge all fit the same wallet slot. The United States uses a slightly different 3.5 by 2 inch card, which is 88.9 by 50.8mm: wider and shorter, and not interchangeable with ID-1 stock.

What gets printed at this size

  • business cards, printed in sheets and trimmed
  • membership, loyalty and gift cards
  • access and identity badges that go in a wallet

Margins that survive a real printer

5mm of clear space on every side, which sounds generous until you remember that commercial trimming wanders by about a millimetre. Anything closer than 4mm to the trim can end up visibly off-centre across a run. If there is a background colour, extend it 3mm beyond every edge as bleed and accept that the bleed is there to be cut off.

The CSS

Business card is not one of the six named formats the API accepts, so the size has to come from the document. Declare it in the page box and set prefer_css_page_size in the request.

css
@page {
  /* The trimmed card. Add 3mm bleed on each side, giving 91.6 x 59.98mm,
     only if the printer has asked for a bleed file. */
  size: 85.6mm 53.98mm;
  margin: 5mm;
}

body {
  margin: 0;
  /* Nothing on a card should be below about 7pt. It stops being
     readable and starts being texture. */
  font-size: 7.5pt;
}

The render request

With a custom size the options carry no format at all: the one flag tells the renderer to use the page box the document declares.

json
{
  "html": "<!doctype html>...",
  "options": {
    // No named format. The page box in the document's own CSS is the
    // size, and this flag is what tells the renderer to use it.
    "prefer_css_page_size": true
  }
}

The mistake people make

Designing to the US 3.5 by 2 inch card and sending it to a printer working in ID-1, or the reverse. The two differ by 3.3mm in width and 3.2mm in height, which is enough that centred content ends up visibly off and edge-aligned content ends up cut.

Frequently asked

What is Business card in pixels?

324 x 204 px at 96 dpi, at the 96 pixels to the inch that CSS assumes. That number is useful for comparing a screen mock-up against the page, and useless for laying out the document: use 85.6 x 53.98 mm instead, because a page laid out in pixels shifts whenever the render scale changes.

Can I pass Business card as a format?

No. The API accepts six named formats: A4, A3, A5, Letter, Legal and Tabloid. Business card is reached through the document's page box with prefer_css_page_size set, which is a supported path and not a workaround.

Does landscape need a different page size?

No. Landscape is the same rectangle turned, so it is set as an orientation rather than as swapped dimensions. Writing the width and height the other way round produces the same page and makes the intent harder to read later.

Other page sizes

Sizes that come up in the same conversation, and one from each of the other families.

Paste the CSS below into the playground and see the page box it produces.