# 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.

Source: https://useqr.app/docs/design/qr-code-typography-pairing · Last reviewed 2026-08-21 · UseQR is free forever, MIT licensed, no signup.

---

## 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](/docs/print/the-10-to-1-distance-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](/docs/design/qr-code-on-a-busy-background).
For colour choices, the same luminance logic as the code applies — and note from
[the colourblind-users page](/docs/design/qr-codes-for-colorblind-users) 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](/glossary/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](/docs/design/qr-code-frames-and-cta-labels) — and the evidence on
what label wording earns is weighed in
[does "scan me" text increase scans](/docs/design/does-scan-me-text-increase-scans).

## URL typography

The [short URL fallback](/docs/design/qr-code-next-to-a-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.

## Try it

- https://useqr.app/url
- https://useqr.app/size-calculator