Type is the only image

Palette — four inks, no more

A proof sheet only ever has three colours: the paper, the ink, and the proofreader’s pencil. A cool metal grey plays the fourth part — the colour of type metal and of labels that should inform without shouting. Red is rationed: it only appears where a correction, a value, or a decision happens.

Type — the cast, honestly credited

On a foundry site the typefaces are not styling, they are the merchandise. The “Kernhaus families” are played by open variable Google fonts, chosen for the size of their playable axis ranges:

Techniques — how the instrument works

The signature element is the hero: a giant specimen word whose variable axes are wired to the pointer. X plays width, Y plays weight; the readouts tick like flight instruments. The values are eased with a small lerp loop so the word feels like it has mass:

hero.addEventListener("pointermove", e => {
  const nx = (e.clientX - r.left) / r.width;   // 0…1 across
  const ny = (e.clientY - r.top) / r.height;
  target.wdth = 62 + nx * 63;                  // axis range 62–125
  target.wght = 100 + ny * 800;
});
// each frame: approach the target, then paint one CSS property
cur.wdth += (target.wdth - cur.wdth) * 0.12;
word.style.fontVariationSettings =
  `"wdth" ${cur.wdth.toFixed(1)}, "wght" ${Math.round(cur.wght)}`;

Two range sliders sit in the panel and stay in sync with the pointer — they are the touch and keyboard way to play the same instrument, not an afterthought. The kerning bench animates a real property (margin on the second glyph) while a rAF counter ticks the value from +240 to the shipped kern in units per em. The anatomy diagram is one live Fraunces “g” under an SVG overlay; the leader lines draw in with the classic stroke-dashoffset trick, each delayed by a CSS custom property:

.leader { stroke-dasharray: 220; stroke-dashoffset: 220;
  transition: stroke-dashoffset .9s ease calc(.5s + var(--d) * .35s); }
.drawn .leader { stroke-dashoffset: 0; }

The proof-sheet corrections are the same idea in miniature: planted errors (a doubled word, a letter set in the wrong family — a genuine Zwiebelfisch) get struck through and annotated in red when the sheet scrolls into view. Press G anywhere to lay a correction-red baseline grid over the whole site — a fixed overlay of repeating-linear-gradient, one line every 28px.

Three passes

1. Correctness & composition. The anatomy callouts were floating in space, so the “g” moved into the SVG as a text node — now the baseline is exact by construction. The proof-sheet corrections were re-anchored to the errors they mark, and the hero stage got an overflow guard so the widest width never breaks the page.
2. Elevate. Gave the proof paragraph real proofing leading (2.1) so the red pencil has room between lines; made the tariff row headers render in whichever family you select — you see what you are buying; let the ledger names and waterfall rows flex their axes on hover; fine-tuned the Ohr and Bauch callout points onto the glyph.
3. Taste. Chanel pass — the axis fill-bars under the hero sliders said the same thing twice, so they went. The hero word now fits larger, especially at 390px; the mobile nav holds one line; reduced-motion shows every correction and diagram already settled, and both pages report zero console errors.

Do this yourself

A recipe for building a site of this kind with Claude:

1. Pick a subject with its own vocabulary. A foundry has proofs, kerns, waterfalls, Zwiebelfische. Ask Claude to list ten artifacts from the subject’s workshop before any design talk.
2. Set one hard constraint. Ours was “zero images”. A real constraint forces craft into type, layout and motion instead of stock art.
3. Write the palette as a story, not hexes. “Paper, ink, and the proofreader’s pencil” produces discipline that “primary + accent” never will.
4. Choose fonts for their axes, not their looks. Ask for variable fonts with big ranges and wire one to input — pointer, scroll, or sliders. That’s your signature element; keep everything else quiet.
5. Make structure mean something. Our sections are numbered proof sheets because foundries actually number proofs. Delete any label that encodes nothing.
6. Demand screenshots between passes. Have Claude screenshot desktop and mobile, critique composition hard, and fix what it sees — three times, minimum.
7. End with the Chanel rule. Remove one accessory. Then check keyboard focus, touch fallbacks and reduced motion — craft is what survives the edge cases.

← Back to the foundry