Design
QR code frames and CTA labels, done safely
A frame or label around a QR code is safe when it sits entirely outside the four-module quiet zone, and useful when it names what scanning does: "Scan for the menu" beats "Scan me". UseQR renders labels below the code via the label parameter, sized at 3.2 times the module by default.
What a frame is allowed to do
A frame is decoration; a label is information. Neither is part of the symbol, and the one hard rule they share is spatial: everything sits outside the quiet zone, the four clear modules on every side of the code. A frame line grazing that margin is, to a decoder, damage to the symbol's boundary, and it produces exactly the intermittent behaviour described in quiet zone too small. Measured practically:
- Frame inner edge: ≥ 4 modules from the outermost dark module, all four sides.
- Label text: below (or above) the code, never beside it inside the margin.
- Frame colour: anything, but if the frame is dark and heavy, give it comfortable distance so it cannot be mistaken for symbol structure, 6 or more modules is a relaxed spacing that also looks better.
Labels that pull their weight
The useful part of a frame is almost always the words. A label converts an anonymous square into a stated offer, and the strongest labels name the destination and the benefit, not the mechanism:
| Weak | Better |
|---|---|
| Scan me | Scan for the menu |
| QR code | Get 10% off: scan |
| Scan here | Scan to pay, UPI |
| n/a | Scan to join the Wi‑Fi |
The honest claim for why: a named destination removes the reader's uncertainty about what will happen, which lowers the cost of trying. Whether that translates into a measurable lift (and how to test it yourself rather than trust vendor numbers) is the subject of does "scan me" text increase scans. The broader craft of writing the line lives in the call to action guide.
Labels in UseQR
Labels are a first-class render option rather than something bolted on in a design tool, which keeps them outside the symbol geometry by construction:
label=Scan for the menu up to 40 characters, rendered below the code
labelbg=0f172a optional label background colour (hex)
The text renders beneath the code at a default size of 3.2 × the module size, so it scales with the code instead of drifting out of proportion. Because it is a URL parameter, a labelled style is shareable and repeatable across a batch: try a labelled code, or generate a whole sticker sheet with consistent labels. Pair the label font with the surrounding layout using the advice in typography pairing, and position the whole assembly by the rules in placement in a layout.
One verification note: because frames and labels live outside the symbol, they cannot corrupt data, but artwork assembled in a design tool can still slide a frame into the quiet zone during a late edit. Decode the final composed artwork with the validator, not the bare code you exported before adding the frame.
FAQ
Do QR code frames affect scanning?
Not when they keep clear of the quiet zone, the four empty modules around the code. Frames that touch or enter that margin cause intermittent scan failures, which is the single rule to check before shipping framed artwork.
What should a QR code label say?
Name the destination or the benefit: "Scan for the menu", "Scan to pay", "Get the guide". Generic labels like "Scan me" identify the object without answering the reader's actual question, which is what happens next.
How big should label text be?
Proportional to the code: around three times the module size works well, which is why UseQR defaults to 3.2 ×. Text far smaller becomes noise at scanning distance; text far larger competes with the code for attention.
Can the frame be part of the QR image file?
It is better when it is, a label rendered by the generator sits outside the symbol by construction and survives every export. Frames added later in design tools work too, but re-verify the final artwork, since a moved frame is a quiet-zone violation waiting to happen.
Try it: free, no signup
Related
- QR code design best practices: seven rules ranked, The seven design rules that decide whether a styled QR code scans, ranked by how often breaking them kills codes, with the number behind each rule.
- Does "scan me" text increase scans: the honest answer, No rigorous public data shows how much CTA labels lift QR scan rates. What the reasoning supports, what vendors claim, and a test you can run yourself.
- Typography pairing for QR codes, Match the CTA label to the code: an x-height of 1.5–2 modules reads at the distance the code scans. Weights, placement and URL typography.
- QR code placement in a layout, Where a QR code belongs on the page: the bottom-right convention, 10 mm clearance from folds and trim, and one code per visual zone.