Posters, Flyers and Event Graphics

You make printed pieces that a print shop accepts first time and people can read from across the room: the right trim size with bleed, everything important inside the safe area, a hierarchy that answers "what, when, where, how" in that order, a QR code that scans, and fonts embedded in the PDF. You build them in HTML and CSS, print them to PDF with headless Chromium, and check the PDF itself, not just the design.

When to use

• "Make a poster for the spring market", "an A5 flyer for the opening".
• "We need posters, flyers and a social post for the event."
• "Make a menu / price list / notice to print in the shop."
• "Get this ready for the print shop" (an existing design that needs bleed, size or a PDF).
• "Add a QR code to the poster that goes to the booking page."

What you need

• The facts, from the owner: event or offer name, date with day, time, venue and address, price, booking link, organiser, sponsors (with their agreement), access information. Never invent or round them.
• The print route: which printer, which size, quantity, single or double-sided. Find the printer's file spec (bleed, safe area, PDF standard, colour) on their help page with web_search / web_extract; ask the owner with clarify when you can't tell. Office printing means no bleed.
• Brand colours, fonts and logo (SVG preferred) from the owner or their brand kit.
• Imagery: the owner's photos, image_generate art (no text in it), or licensed photos (licence rules: load media-use with skill_view and read its sources-and-licences reference). At least 300 ppi at print size for flyers, 150 for posters.
• Your computer set up: run the check in references/setup.md first, every time (installs outside /home/user are lost when the computer is rebuilt). Copy scripts/render.py, scripts/print_tools.py, scripts/gfx_check.py, scripts/get_font.py and references/templates/a4-event-poster.html into the job.

Method

1. Fix the spec in writing.
   • At the top of your notes: trim (e.g. A4 210 x 297 mm), bleed (e.g. 3 mm), safe margin (e.g. 8 mm), page size = trim plus twice the bleed (216 x 303 mm), colour and PDF requirements, quantity.
   • Sizes and rules: references/print-specs.md.
2. Order the information into five levels.
   • The draw, when and where, the hook, the action, the source (references/poster-layout.md).
   • Cut anything beyond that to the web page the QR code opens.
3. Set the page up in CSS.
   • From the template: @page { size: <trim + 2 x bleed>; margin: 0 }, a .sheet of that size with backgrounds running to the edge, and a .safe box inset by bleed plus safe margin for every word and logo.
   • Units in mm.
4. Load fonts as local files, so they embed.
   • Run ~/.venvs/gfx/bin/python tools/get_font.py "Fraunces" 700,900 fonts/ and paste the printed @font-face lines.
   • Two typefaces at most.
   • Size type for distance (references/poster-layout.md).
5. Images.
   • Generate or source them, then check effective resolution at the printed size: tools/print_tools.py ppi photo.jpg --width-mm 210.
   • Keep logos, icons and QR codes as SVG.
6. QR code: tools/print_tools.py qr "https://example.com/book" qr.svg --dark "#111111"; at least 20 mm wide on a flyer, larger for distance; quiet zone clear; a short readable URL beside it.
7. Export the PDF: tools/render.py poster.html out/poster-a4-bleed3.pdf --pdf.
8. Check the PDF, not the HTML.
   • tools/print_tools.py pdf-check out/poster-a4-bleed3.pdf --trim 210x297 --bleed 3: page size right, every font embedded.
   • tools/print_tools.py pdf-preview out/poster-a4-bleed3.pdf --dpi 150, then vision_analyze the PNG: hierarchy reads in the right order, nothing inside the trim margin that shouldn't be, bleed filled wherever colour meets the edge, no overlaps, no fallback fonts, no typos.
   • tools/print_tools.py qr-verify out/poster-a4-bleed3.page1.png --expect "https://example.com/book".
   • tools/gfx_check.py contrast for each text colour on its background (4.5:1 for the facts).
9. Make the rest of the set from the same content and tokens: flyer sizes as separate PDFs, and the social sizes as PNG (see social-post-graphics for those rules).
10. Hand over for sign-off.

• show_card (type media) with the preview PNGs, the PDF paths, the spec you built to, and the facts read back for the owner to confirm.
• Ordering print spends the owner's money: never place an order or upload to a print shop without their explicit go-ahead.

Output

• out/<piece>-<size>-bleed<mm>.pdf per printed piece (page = trim + bleed, fonts embedded), plus a preview PNG of each page.
• The HTML source, fonts, images and qr.svg next to them.
• A spec note: printer, trim, bleed, safe margin, paper suggestion, quantity, and the facts read back.

  Printer: <name and product page>     Piece: A3 poster, single-sided, 50 copies
  Trim 297 x 420 mm, bleed 3 mm, safe 10 mm, PDF 303 x 426 mm, RGB, fonts embedded
  Paper suggestion: 170 gsm silk (owner to choose)
  Facts to confirm: Sat 18 April, 10:00 to 16:00, Old Tram Depot, 4 Canal Street, free entry
  QR: https://example.com/spring-market (decoded from the final PDF)
  

• Social and screen versions when the owner asked for a set.

Checks before you finish

• pdf-check passes: page size equals trim plus bleed (or the paper size for office printing), every font embedded.
• All text and logos inside the safe area; colour and photos run into the bleed where they touch the edge.
• Every photo at least 300 ppi (flyers) or 150 ppi (posters) at its printed size.
• The QR code decodes from the rendered preview to the exact URL, and the URL works (web_extract it).
• Date, day, time, venue, price and names match what the owner gave, word for word.
• Contrast passes for the facts; small print is no smaller than 2.5 mm.
• The social and screen versions say the same thing as the print piece, with the same facts.

Pitfalls

• No bleed, or bleed added by scaling the design. Build the page at trim plus bleed from the start; never stretch to fill.
• Text near the trim. Cutting tolerance eats it. Keep the safe margin.
• Web or variable fonts in the PDF. They can turn into Type 3 drawings that strict preflight rejects; load static font files.
• Low-resolution photos that looked fine on screen. Check ppi at print size before you design around a photo.
• QR codes that don't scan: too small, low contrast, no quiet zone, a logo pasted over them, or a typo in the URL. Verify from the final PDF.
• Too much information. Posters are read in seconds; move detail to the web page.
• Ordering print yourself. The owner approves the proof and the spend.
• Forgetting the day name. "Sat 18 April" saves everyone a calendar check; dates alone cause no-shows.
• Sponsor logos without permission. Use partner marks only when the owner confirms the partner agreed.