This covers how the broadsides are built — the single sheets made to be printed, carried into a room, and handed to someone. It sits alongside Color & Palette: Our Solarized System, which covers the palette on screen, and the Reading Experience notes, which cover how the reading experience is implemented. This one is only about the artifacts made for paper.
Every number here was arrived at by printing something and finding out it was wrong.
Paper is not a screen
Most web pages that print at all print by rescue: they are designed for a screen, and a print stylesheet is bolted on afterwards to stop the result being unreadable. That works, and it is what most of this site does.
The broadsides run the other way. Each one is drawn as ink on white in both media, so what you see on the web page is not the artifact — it is a preview of the artifact. The sheet is the thing. The web page is how you get one.
That follows from what a broadside is for. It goes into a room where nobody is going to open a laptop. It gets photocopied badly, folded into a pocket, pinned to a staffroom noticeboard, and read from across a table by somebody who did not choose to read it. Designing for that is a different job from designing a page, and the two overlap less than you would hope.
Why the sheets are white when the site is cream
This looks like a contradiction and is not. Our palette argues hard for a warm #fdf6e3 page rather than pure white — low glare, calm over impact, easier to sit with for an hour. That reasoning is right, and it is a reasoning about screens.
A background colour does not print. Browsers leave Background graphics off by default, so a cream page sent to a printer comes out on white paper with the cream silently dropped. Shipping our warm surface to paper would not produce a warm sheet. It would produce a white sheet, plus the risk that anything else depending on a background — a rule, a bar, a panel — vanishes with it.
So paper brings its own substrate, and the sheet is drawn for the substrate it will actually have. The screen preview is white because that is what comes out of the printer. If someone wants a warm sheet, they buy warm paper — which is the correct place for that decision, and it costs us nothing to support.
The same rule drives a smaller choice: the registration bar across the top of each sheet is a border, not a background. Borders survive the background-graphics setting; background colours do not.
The format
One fixed specification for every sheet, so that several different arguments come off the printer as the same object — a rack, not a pile — and so a reader in any country gets the same artifact from the same file.
- 190 × 259 mm. The intersection of A4 and US Letter. At 9 mm page margins, A4 gives a box of 192 × 279 mm and Letter gives 198 × 261 — so a sheet inside both prints uncropped in either country, with no “US version” to maintain and get out of sync.
- 9 mm margins, not 10. At 10 mm the Letter box is 259.4 mm against a 259 mm sheet. That 0.4 mm of slack was thin enough for sub-pixel rounding to tip the whole thing onto a third page. Found by printing to PDF and counting — the arithmetic said it fit.
- Two sides, A and B. The face carries one thing, readable across a room. The reverse does the work: what to do, the lists, the bibliography. That division is what separates a broadside from a poster — a poster is finished once you have looked at it.
- The mobile breakpoint sits below 700 px. This is the one that looks like a screen concern and is not. Print media queries resolve against the page box, not the screen — and the narrowest real page box is A4 less its margins, 192 mm, about 726 px. A breakpoint set above that matches on paper, collapsing a two-column card into one long column that overruns the sheet and is silently clipped.
Type
Atkinson Hyperlegible throughout, with a monospace face for labels and chrome. Atkinson was drawn by the Braille Institute for letterform distinction at exactly the small sizes a hand-out uses — the 6–9 pt range where a broadside does most of its work. See Accessible Typography for the screen argument; it holds harder on paper, where the reader cannot zoom.
No display serif. A high-contrast serif looks handsome on a screen and loses its hairlines in the first photocopy — which is most of a broadside’s life. If a sheet is going to be reproduced badly, design it for the bad reproduction.
The palette on paper
The sheets use the house palette, but they cannot use the house values. Ink is Solarized base03 (#002b36) at 15.0:1 on white — the palette used as ink, rather than black. Body text on the site is pure black; on paper a slightly softer near-black reads better and is still far above any threshold.
The accents are the problem. Measured as body ink on white, five of Solarized’s eight accent hues fail WCAG AA as they ship — yellow, cyan and green at about 3.2:1, blue 3.7:1, violet 4.4:1. The clearest case is our own primary: #4bbcd4 is a calm call-to-action on a cream screen, and 2.2:1 on white paper. It is not a colour you can print words in.
So each spot ink is a house hue darkened until it clears. This is existing practice, not a new invention — our light-mode secondary #345c00 is already a darkened Solarized green, sitting at 7.3:1 on the cream page. Paper just needs it done to more of them.
| Role | Value | On white |
|---|---|---|
| Ink | #002b36 base03 | 15.0:1 |
| Secondary prose | #073642 base02 | 13.0:1 |
| Small print, credits | #586e75 base01 | 5.4:1 |
| Spot — blue | #175a7d | 7.5:1 |
| Spot — magenta | #96215c | 7.9:1 |
| Spot — orange | #9c3a11 | 6.9:1 |
| Spot — violet | #4c50a0 | 7.1:1 |
| Spot — cyan | #0d5f59 | 7.5:1 |
| Spot — green | #495400 | 8.2:1 |
Each sheet takes a different pair of spots, and the pair is the point. There are more sheets than there are usable hues, so faces will repeat — but a pair does not. The bar across the top is what tells you which sheet you are holding when several are face-down in a stack. That is the registration bar’s real job, and the reason not to reach for a sixth hue when the pairs run low.
What changed to fit WordPress
Each broadside ships as a single Custom HTML block. No plugin, no theme change, no shortcode. Four things break when a self-contained sheet meets a WordPress page, and all four have to stay fixed.
- No global reset, and no rules on
body. A Custom HTML block’s<style>applies to the whole document. A* { margin: 0 }reset from inside a block wrecks the theme’s spacing on that page. Every rule is scoped under the sheet’s own wrapper. - Every class is namespaced. Bare names like
.sheet,.title,.quoteor.footcollide with theme and plugin CSS with near-certainty. - No
@pageat page level.@pageis document-global — declared inside a block it changes the print margins of the entire WordPress page. It exists only inside the print document described below. - Print goes through an iframe, not
window.print(). Callingwindow.print()on a WordPress page prints the header, the navigation, the sidebar, the footer and the cookie banner, with the sheet buried somewhere inside. Instead the Print button clones both sides into a hidden same-origin iframe holding only the broadside and its stylesheet, and prints that. Separate document:@pageapplies to it alone, theme CSS cannot reach in, and the printer gets the sheet instead of the website.
The on-page version is real markup, deliberately. Putting the whole sheet in an iframe would dodge every one of those problems at once — and would also keep the text out of site search, out of Google, and out of the page’s reading order for anyone using a screen reader. Real markup on the page; the iframe only at print time.
How we check
For about a year the two sheets that started this said “two-sided single sheet” in their own copy, and both were lying. Printed to PDF and counted, one came out as three sides on US Letter and two on A4 — a different physical object depending on the reader’s country. Nothing could see it, because the checks that existed measured whether ink was legible, not whether it landed on the page.
- Sheet fitting. Prints each sheet at both paper sizes and counts pages, and separately measures content height against the box — because a fixed-height sheet whose content overruns does not paginate, it is silently clipped. A clean page count can still hide a cut-off final line.
- Contrast. Composites every text element against its real background, on screen and under print emulation, at WCAG AA. Run against the published page as well as the local proof — that is the only way to catch the block colliding with theme or plugin CSS.
- Markup. Catches the things a browser silently repairs — nested links, a block element inside a paragraph, duplicate IDs — by reading the source rather than the DOM, because by the time there is a DOM the damage has already been tidied away.
The contrast gate earned its place on its first run against a live page: it found the active side-toggle button printing white on white, because its dark background dropped out when someone printed the WordPress page itself. The controls are now hidden in print. Screen furniture never belongs on paper.
What the checks cannot see
All three measure something real, and all three have been walked past. Kept here as a standing caveat rather than a solved problem:
- A label can be perfectly legible and still unreadable. A diagram once passed the contrast check on all its labels while one of them sat directly on top of the line it was labelling. Colour was fine. Position was not, and nothing measures position.
- A structurally broken page can measure clean. Nested links once took a card grid apart — boxes ending early, descriptions orphaned, footers floating in space. The contrast check passed it, because the text was legible. The search index passed it, because the words were all there.
- A decorative element can lie across the artwork for as long as nobody looks at the sheet.
Which leaves the rule this actually reduces to: run the checks, then look at the thing. The checks catch what they were built to catch, and the next fault will be of a kind nobody has written a check for yet.
Take it and use it
The whole specification is four numbers and two rules: 190 × 259 mm at 9 mm margins, ink on white in both media, borders rather than backgrounds for anything that must survive to paper, and two inks darkened until they clear AA on white. Everything else is editorial.
The sheets are CC0. If you make broadsides for your own community with this, that is the intended outcome and not a tolerated one — and you will not need our colours, only the method.