How to design a brochure that works online
A brochure built for print doesn't always read well on a screen. A few design choices make yours look great as an online flipbook.
A brochure designed for print and a brochure designed for a screen are not the same document, even when they contain the same words. Print is held at reading distance in good light; a screen is held at arm's length, often outdoors, sometimes at night, by someone with one thumb free. This guide covers the choices that decide whether your brochure survives that.
Start with the page size
A4 portrait is the default because printers use it, not because it reads well. On a laptop, a portrait page uses about half the available width; on a phone held upright, it is tall and narrow and the type ends up small.
A landscape page fills a laptop screen properly and a phone held sideways completely. If your brochure will mostly be read online, consider a 16:9 or 4:3 landscape page instead. If it has to work in both worlds, keep A4 and make the type larger than you would for print.
Type size is the decision that matters most
Nine-point body text is normal in print and marginal on screen. Twelve is safer. The reason is simple: on paper, the reader controls the distance; on a phone, the page is scaled to fit the screen, so your nine points become six.
- Body text: think in terms of what is comfortable at arm's length, not at desk distance.
- Captions and footnotes: the first thing that becomes unreadable. If it matters, do not set it at 6 point.
- Contrast: light grey on white looks refined in a PDF viewer at 200% and disappears on a phone in daylight.
Design in spreads, because that is how it will be read
On a wide screen, a flipbook shows two pages side by side, exactly as in print. That means spreads work: an image across the gutter reads as one image, and a left-right composition keeps its balance.
Two rules follow. Export single pages rather than printer spreads — the viewer pairs them itself. And plan the page count so the pairs land correctly: page one is the cover and stands alone, so the first spread is pages two and three.
Make the useful things clickable
Links in the PDF stay clickable in the flipbook, and this is the most underused feature in online brochures. The ones worth adding:
- Email addresses and phone numbers, so a reader can act in one tap.
- Product or article numbers, each pointing at the page where it can be bought.
- The address, pointing at a map.
- A form or booking link, for the action the brochure exists to prompt.
Add PDF bookmarks per section while you are at it: they become the table of contents in the viewer.
Photographs and file weight
Online, a heavy brochure is a slow brochure, and a slow brochure is one nobody sees. Export images at around 150 PPI rather than 300, use JPEG rather than lossless formats for photographs, and switch off crop marks and bleed for the screen version. A brochure of 20 pages should land between 3 and 8 MB.
Check the result at full screen before publishing: over-compression shows first in gradients and skin tones. Reducing PDF file size goes through this per program.
What to leave out of the screen version
- Bleed and crop marks. They are printer instructions and look like mistakes on screen.
- Blank pages for the binding. Meaningful in print, confusing online.
- Colour bars and registration marks, for the same reason.
- Very long documents. If your print brochure is 60 pages, consider a shorter online edition that links to the full version.
Check it the way a reader will
Before publishing, open your brochure on a phone, outside if you can, and read one page properly rather than glancing at all of them. Most problems — type too small, contrast too low, a caption that vanished, a file that takes eight seconds — are obvious within a minute and invisible on the desktop where you designed it.
Frequently asked questions
What page size works best online?
Landscape, for a screen-first brochure: it fills a laptop and a phone held sideways. A4 portrait works too, but then set the type larger than you would for print.
How large should the type be?
Larger than in print. Nine-point body text is normal on paper and marginal on screen, because the whole page is scaled to fit the device.
Should I export spreads or single pages?
Single pages. The viewer pairs them into spreads itself; a file that already contains spreads ends up showing four pages at once.
What file size should I aim for?
Three to eight megabytes for a 20-page brochure. Export images at about 150 PPI and leave out bleed and crop marks.
Do links in my brochure still work?
Yes. Email addresses, phone numbers, product links and maps stay clickable, which is the most underused feature in online brochures.
How do I check it properly?
Open it on a phone and read one page from top to bottom. Most problems appear within a minute and are invisible on the desktop where you designed it.