QR Codes & Barcodes: Design, Types & Best Practices
QR codes and barcodes are the two most common machine-readable formats in the world. This guide explains how each works under the hood, compares barcode types, covers design best practices for print and digital, and helps you choose the right format for your project.
QR Code Structure & Versions
A QR code (Quick Response code) is a two-dimensional barcode invented by Denso Wave in 1994. Originally designed for tracking automotive parts during manufacturing, QR codes have become ubiquitous in marketing, payments, ticketing, and authentication. Unlike traditional barcodes that encode data in one dimension (horizontal bars of varying width), QR codes encode data in a two-dimensional grid of black and white squares called modules. This grid structure allows them to store significantly more data — up to 7,089 numeric characters or 4,296 alphanumeric characters in the largest standard version.
QR codes come in 40 versions (sizes), each version increasing the number of modules by 4 in each direction. Version 1 is the smallest at 21×21 modules, while Version 40 — the largest — reaches 177×177 modules. The version directly determines the data capacity: a Version 1 code can hold roughly 25 alphanumeric characters at error correction Level L, while a Version 40 code can hold 4,296 alphanumeric characters at the same level. In practice, most QR codes use versions between 1 and 10 because larger versions require more pixels and must be printed bigger to scan reliably.
The data encoding mode also affects capacity. QR codes support four encoding modes:
- Numeric (digits 0–9) — most efficient, up to 7,089 characters at Version 40, Level L
- Alphanumeric (A–Z, 0–9, space, and nine special characters) — up to 4,296 characters
- Byte/Binary — encodes any data in 8-bit bytes, up to 2,953 bytes
- Kanji — optimized for Japanese characters using double-byte encoding, up to 1,817 characters
Most QR code generators automatically select the most compact encoding mode for your input. A URL consisting of letters, digits, and a few symbols will use alphanumeric encoding; a plain sentence with mixed case will fall back to byte encoding.
Error Correction Levels
One of the QR code's most powerful features is its built-in error correction. The QR code specification (ISO/IEC 18004) defines four levels, each providing a different percentage of data recovery capability. Higher error correction means the code can survive more damage but holds less actual data because more capacity is consumed by redundant codewords.
| Level | Recovery | Alphanumeric Capacity (V40) | Best For |
|---|---|---|---|
| L (Low) | ~7% of codewords | 4,296 | Controlled environments, digital screens, high-contrast printing |
| M (Medium) | ~15% of codewords | 3,391 | General-purpose use — the most common default choice |
| Q (Quartile) | ~25% of codewords | 2,706 | Decorated codes, moderate wear expected, some overlay |
| H (High) | ~30% of codewords | 2,223 | Industrial use, logos overlaid on the code, rough or dirty surfaces, harsh environments |
For most marketing and business applications, Level M strikes the best balance between data capacity and resilience. If you plan to overlay a logo or brand element in the center of the QR code, use Level H — this provides enough redundancy to recover data even when 20–30% of the code area is obscured. If you are printing QR codes on rough surfaces like corrugated cardboard, concrete, or fabric, Level H is also recommended because the texture may partially obscure individual modules.
QR Code Design Best Practices
- Use high contrast. Dark foreground on a light background remains the gold standard. Black on white is universally supported. If you customize colors, ensure at least a 4.5:1 contrast ratio. Avoid light-on-dark schemes (white QR code on black background) — many scanners still struggle with these.
- Size for the scanning distance.A QR code should be at least 1/10th of the scanning distance. A billboard meant to be scanned from 10 meters away needs a QR code at least 1 meter wide. For printed materials scanned at arm's length (30 cm), a minimum of 2 cm × 2 cm works well.
- Respect the quiet zone. Always leave at least 4 modules of blank space on all four sides. Without this margin, scanners cannot locate the finder patterns reliably. Never place text, logos, or borders inside the quiet zone.
- Keep the data short. Shorter data means smaller QR codes, which scan faster and more reliably. Use a URL shortener for long links, but prefer your own branded short domain over third-party services that might shut down or break.
- Avoid overcomplicating the design. Rounded modules, subtle gradients, and small logo overlays are fine. Drastic modifications — like removing finder patterns or using very similar foreground/background colors — will break scanning.
- Test before printing. Always scan your QR code on at least three different devices (iOS, Android, and a dedicated scanner app) before sending it to print. Screen rendering and print rendering can differ, especially at small sizes.
Barcode Types
While QR codes dominate the consumer-facing 2D space, traditional barcodes remain the backbone of retail, logistics, healthcare, and manufacturing. Understanding the differences between barcode types is essential for choosing the right format for your use case.
| Type | Dimensions | Data Capacity | Use Cases |
|---|---|---|---|
| Code 128 | 1D linear | Up to 80 alphanumeric characters | Logistics, shipping labels, supply chain management |
| EAN-13 | 1D linear | Exactly 13 digits | Retail products (international standard, required for most stores) |
| UPC-A | 1D linear | Exactly 12 digits | Retail products (primarily United States and Canada) |
| Code 39 | 1D linear | Up to 43 characters (alphanumeric + special) | Automotive, defense, healthcare — older but widely supported |
| Data Matrix | 2D matrix | Up to 2,335 alphanumeric characters | Electronics, medical devices, small-item marking (ECC 200) |
| PDF417 | 2D stacked | Up to 1,850 characters (with error correction) | Travel documents, government IDs, boarding passes |
Code 128 is the most versatile 1D barcode because it supports the full ASCII character set and offers high data density. It is the default choice for shipping labels and inventory systems. EAN-13 and UPC-A are fixed-length codes used exclusively at retail point-of-sale — you will find them on virtually every consumer product. Code 39 is one of the oldest barcode symbologies and is still common in automotive and defense industries because of its simplicity and wide hardware support.
On the 2D side, Data Matrix is popular in electronics manufacturing and healthcare because it can be printed very small and still scanned reliably, even when etched directly onto components. PDF417(Portable Data File 417) is a stacked linear barcode — essentially multiple 1D rows stacked on top of each other — and is the standard for US driver's licenses, airline boarding passes, and many government-issued IDs.
When to Use QR vs Barcode
Choosing between QR codes and traditional barcodes depends on your use case, the type of data you need to encode, and the scanning infrastructure available.
Use QR Codes When
- Encoding URLs or rich data — QR codes can store website links, WiFi credentials, vCard contact information, calendar events, and payment instructions
- Consumer-facing applications — restaurant menus, event tickets, marketing materials, business cards, and product packaging where users scan with their phone
- Small space, large data — QR codes encode data in two dimensions, so they hold far more information in a given area than a 1D barcode
- Damage tolerance matters — built-in error correction allows QR codes to scan even when partially damaged, dirty, or obscured
Use Traditional Barcodes When
- Retail point-of-sale — EAN-13 and UPC-A are required by virtually all POS systems and retail partners
- Logistics and inventory — Code 128 is the standard for shipping labels and warehouse tracking
- Hardware compatibility — 1D barcode scanners are cheaper, simpler, and more widely deployed in industrial settings
- Speed and simplicity — for simple numeric IDs or SKUs, a 1D barcode is faster to generate, print, and scan
Sizing Guidelines
Correct sizing is critical for scan reliability. A code that is too small or too densely packed will fail to scan, especially on older devices or in poor lighting conditions.
- Minimum QR code size: 2 cm × 2 cm (approximately 0.8 inches) for close-range scanning
- Scanning distance rule: The QR code should be at least 1/10th of the distance from which it will be scanned. For a poster viewed from 1 meter away, the QR code should be at least 10 cm wide
- Quiet zone: At least 4 modules of white space on all four sides for QR codes. For 1D barcodes, the quiet zone should be at least 10× the width of the narrowest bar
- Print resolution: Use at least 300 DPI for printed QR codes. Lower resolutions can cause individual modules to blur together, especially at small sizes
Digital
- Minimum size: At least 150 × 150 pixels for desktop web contexts, and 100 × 100 pixels for mobile-optimized pages
- High-DPI displays: Provide 2× resolution images for retina and other high-density screens to ensure crisp rendering of individual modules
- Email and social media: Use at least 200 × 200 pixels. Compress as PNG — JPEG compression can blur the module edges
Common Mistakes
- Low contrast colors: Using similar foreground and background colors (like dark gray on black, or light yellow on white) makes modules indistinguishable to scanners. Always test with a contrast checker.
- No quiet zone: Placing text, logos, borders, or other elements too close to the code edges. This is the single most common cause of scanning failure for both QR codes and barcodes.
- Inverted colors: White QR code on a dark background. While technically supported by some scanners, many phone cameras and apps fail to detect the finder patterns when inverted.
- Encoding too much data: Overloading a QR code forces it into a higher version (larger grid), which requires a bigger print size to scan reliably. Use URL shorteners or minimize the encoded content.
- Placing on curved surfaces without correction: QR codes on cups, cylinders, or rounded packaging can become distorted. Use specialized generators that apply distortion correction, or flatten the surface as much as possible.
- Using unreliable URL shorteners: Third-party URL shortening services can shut down, change policies, or break links. If you need short URLs, use your own branded domain with redirects.
- Not testing across devices: Different phones, scanning apps, and lighting conditions produce different results. Test on at least three devices before distributing printed codes.
- Linking to non-mobile-friendly pages: QR codes are almost always scanned with phones. If the destination is not mobile-optimized, users will bounce immediately.
QR & Barcode Utilities & Resources
KnowKit offers free browser-based utilities for generating and decoding both QR codes and barcodes. All processing happens client-side in your browser — no data is uploaded to any server.
- QR Code Generator — Create custom QR codes with configurable error correction levels, colors, and sizes
- QR Code Decoder — Upload or drag-and-drop an image to decode an existing QR code
- Barcode Generator — Generate barcodes in multiple formats including Code 128, EAN-13, UPC-A, and Code 39
- Barcode Decoder — Scan and decode barcodes from uploaded images, supporting all major 1D and 2D formats
QR codes and barcodes are fundamental utilities for bridging the physical and digital worlds. QR codes excel at encoding rich, variable-length data for consumer applications, while traditional barcodes remain indispensable for retail, logistics, and industrial identification. Understanding the structure, capabilities, and limitations of each format ensures you choose the right utility for the job and design codes that scan reliably every time.
Nelson
Developer and creator of KnowKit. Building browser-based tools since 2024.