COMPOSING ROOM · A COLOPHON

The Early Edition

How tonight's front page gets set — the ink, the faces, and the engine that re-flows the sheet under your hands.

SET AT STONE 4 HARWICK ONE SECTION · GUIDE
01 THE ASSIGNMENT

A working front-page desk, not a picture of one.

The Early Edition is a fictional city broadsheet, first on the street since 1911. The desk is for the night sub-editor: swap the lead story, size the headline, drag the column measure, re-crop the halftone — then put the page to bed.

The single job of the page is to make real typesetting feel physical. Every choice re-flows live under the same rules a stone sub once worked by hand: a deeper headline steals a leg of copy, a tighter measure buys words back, and whatever won't fit jumps to Page A7. Nothing here is decorative — it is all load-bearing type.

02 THE INK

Newsprint, ink, and one spot red.

A press pulls exactly three things: the tone of the paper, the black it lays down, and — on a good day — a single spot colour. The palette holds to that discipline; everything else is the dark of the composing room.

#E8E4DA
NEWSPRINT
Warm off-white stock — never a screen white. The sheet reads as paper under a desk lamp, not a document.
#1A1A1A
INK
A soft, slightly warm black. True #000 looks like toner; press ink has a little brown in it, and so does this.
#C22F2A
SPOT RED
The one extra plate. It marks the sub's own hand — proof marks, the CITY FINAL slug, the copy that jumps to A7.
#211D18
DESK
The room around the sheet — an oiled-wood dark that lets the newsprint glow and keeps the controls quiet.
03 THE FACES

Three metals, cast for three jobs.

PLAYFAIR DISPLAY — THE MASTHEAD & HEADS
THE SPAN IS SAVED

High-contrast Didone with real thick-thin drama. It carries the masthead and every headline — the moment of typographic bravery the page is built around, set as large as the measure allows.

SOURCE SERIF 4 — THE BODY & DECKS
The vote came at 11:19 p.m., after the fourth hour of testimony, and the chamber heard it standing. The harbour bridge wins another fifty years.

An optical-size text serif that stays honest at 13.5px in a justified 100-pixel column. Its italic sets the decks and cutlines without shouting.

IBM PLEX SANS — THE FURNITURE & UI
WIRE BASKET · MEASURE · PUT IT TO BED

The one voice that isn't the newspaper. Every control, kicker, folio and credit line is Plex, so the reader always knows what is the page and what is the desk.

04 THE PRESS

How it's made.

Signature — the live typesetting engine

There is no HTML text flow on the sheet. A hidden canvas measures every word in the exact body face, and a line-breaker packs words into column slots — hyphenating long words, justifying by distributing the slack, then spilling whatever is left down the next leg and, when the page runs out, into a "Continued on Page A7" jump. Headlines are measured the same way so a size change genuinely re-breaks the head and pushes body copy off the page. Change the measure, the head, or the lead, and the whole broadsheet re-sets in a single synchronous pass — the stone sub's craft, in the browser.

Canvas 2D — procedural halftones

Each story's photo is drawn as a greyscale scene into an offscreen canvas, then re-sampled on a rotated 45° grid into ink dots whose radius tracks local darkness — a real newspaper halftone, no raster image anywhere. Dragging inside the frame re-crops the source; device pixel ratio is capped at 2 and the dots re-render only when the crop actually moves.

GSAP — the press run

"Put it to bed" plates the page (an inverted, desaturated filter), rolls a light bar down the sheet, stamps it, and counts the print run up from nothing. It is the only scripted motion on the page, and it is skipped entirely under reduced-motion — the plate and run number simply appear.

05 THE PROOFS

Three passes at the stone.

PASS 1CRAFT
  • Off-lead heads were merging words ("WHISTLETONIGHT"): the sub-head reused the headline builder but lost its display:block line rule, collapsing the set lines inline. Restored the block rule so each line stacks with its spaces intact.
  • The Wire column overran its house ad — the last brief printed straight over "Mercer & Sons." Retired the redundant "Inside the Edition" index box and tightened two briefs so the column foot clears the ad by a clean margin.
PASS 2DEPTH
  • Added a "proof pull" — swapping the lead or changing the measure now fades the freshly-set page in, so a re-flow feels like lifting a wet proof off the stone.
  • Second-read furniture: registration crosses and an ink step-wedge now sit in the sheet's side margins — the marks a pressman checks density against, quiet enough to notice only on a second look.
PASS 3HARDENING
  • Verified the 375px stack, keyboard focus rings, the reduced-motion path (no stuck opacity, instant print), and the full swap → 5-column → put-to-bed flow — all clean, zero console errors.
  • Chanel rule: dropped the vertical "DENSITY" label beside the step-wedge — one mark too many in a margin that was already speaking clearly.