Typography pairing for QR codes

Size the call-to-action label so its x-height is about 1.5–2 modules of the code it accompanies — then the text is readable at roughly the distance the code scans. Use a medium or bold weight, dark on light, set directly above or below the code, and never inside the quiet zone.

The matching-distance rule

A code and its label serve the same reader at the same distance, so their sizes should be derived from each other. The code is scannable out to about 10× its width (the 10:1 rule); text legibility scales with x-height. Setting the label's x-height to 1.5–2 modules of the code puts the label's comfortable reading distance at, or slightly beyond, the code's scanning distance — which is the correct order, because the reader must be persuaded by the label before they approach to scan.

Worked example: a 5 cm version 2 code has 25 modules of 2 mm each. Label x-height: 3–4 mm. In a typical face where x-height is about half the point size, that is a 17–23 pt label. Scale linearly from there:

Code width (v2)	Module	Label x-height	Approx. point size
3 cm	1.2 mm	1.8–2.4 mm	10–14 pt
5 cm	2 mm	3–4 mm	17–23 pt
10 cm	4 mm	6–8 mm	34–45 pt
20 cm (poster)	8 mm	12–16 mm	68–90 pt

Denser codes have smaller modules at the same width; recompute from the actual module size, not the overall width.

Weight and colour

At distance, stroke width decides survival. Medium or semibold is the floor for labels meant to read across a room — thin and light weights that look elegant at desk distance dissolve at 3 m, and hairline strokes disappear entirely in print. Keep labels dark on light, exactly like the code: reversed type over photography inherits every problem described in QR codes on busy backgrounds. For colour choices, the same luminance logic as the code applies — and note from the colourblind-users page that red labels on dark grounds vanish for protanopes.

Placement

Set the label directly above or below the code, centred, inside the same visual block. Two hard rules:

Never inside the quiet zone. To a decoder, letterforms are dark modules; a caption tucked into the 4-module margin sabotages code location.
Not beside the code in narrow layouts — it splits the unit and forces a size compromise on both.

Integrated label-and-border treatments are their own pattern with their own rules — see frames and CTA labels — and the evidence on what label wording earns is weighed in does "scan me" text increase scans.

URL typography

The short URL fallback has a job the CTA label does not: being retyped accurately. Choose a face where 0/O and 1/l/I are unmistakable — many geometric sans faces fail this — set it lowercase, and consider slight letterspacing. A URL the reader cannot transcribe is decoration.

FAQ

How big should the "scan me" text be next to a QR code?

Give it an x-height of 1.5–2 modules of the accompanying code — for a 5 cm code that is roughly 17–23 pt. Sized this way, the label is readable at about the same distance the code scans, which is what makes the pair function as one unit.

What font should I use with a QR code?

Any face with sturdy strokes at your target distance — medium weight or heavier for anything read across a room. For the printed URL, pick a face where 0/O and 1/l/I are clearly distinct, because that line exists to be retyped.

Can text go inside the QR code's quiet zone?

No. The quiet zone must stay clear for at least four module-widths on every side; a decoder reads letterforms as dark modules and may fail to locate the code. Place the label outside the quiet zone, above or below the code.

Should the label be above or below the QR code?

Either works; below is the commonest because the code draws the eye first and the label explains it. What matters is centring the label with the code, keeping it out of the quiet zone, and sizing it to the same viewing distance.