R · 18 / 26

R — Risograph

Bright inks, slightly out of register.

The style

One ink at a time.

Riso Kagaku was founded in Tokyo in 1946. In 1977 it made the Print Gocco, a small home screen printer, and in 1980 the first Risograph: a duplicator built for schools, churches and offices that needed a thousand copies cheaply.

The machine burns a stencil, the master, and wraps it around a drum of soy-based ink. Each colour is its own drum and its own pass through the machine. The inks are translucent, so where two cross they make a third, and no pass lands exactly where the last one did.

Artists and zine makers took the machines up in the 2000s for exactly those flaws. Art book fairs filled with them. On a screen the style means a few flat spot inks multiplied over cream paper, a fine grain, heavy type, and layers left a few pixels out of register, on purpose, and only where it is safe.

In use

Order a poster run.

Two Drum Press, a riso studio in Euljiro, takes poster orders online. Pick the artwork, size and paper, choose up to three inks and watch the proof print in them. The price adds up line by line; book the run and it gets a number.

  • The proof is the inksThe poster on the right is printed from the drums you pick, in their order, on the paper you pick. Yellow on kraft looks as faint as it will.
  • The price, line by lineMasters, paper and passes are written out, so a third colour costs exactly what it adds.
  • Three drums, no moreThe studio inks three drums for a run. A fourth is refused in words, at the moment you ask for it.
Two Drum PressRiso studio · Euljiro, Seoul
01 Artwork
02 Size
04 Quantity
210 A3 sheets
03 Paper
05 Inks, up to three
  1. Drum 1 Yellow
  2. Drum 2 Fluorescent pink
  3. Drum 3 Blue

06 When
07 Who it’s for
The kit

Every part, every state.

The parts that order form is built from: white sheets with a black rule, a blue button with a pink drum under it, yellow for what is chosen. The rows of states hold still for comparison; everything else works.

01Button

The pink shadow is a second drum. Pressing lines it up

02Text field

The drums need 50 to be worth inking.
Focus moves the pink drum under the field

03Select

The highlight is yellow ink, not a tint

04Switch, checkbox, radio

Fold

05Slider

70%
Track in blue, thumb on the pink drum

06Progress

Drum 2, fluorescent pink140 / 400
Fill is a halftone of the ink being printed

07Segments and tabs

Front side: proofed Thursday, approved by email.
The selected tab sits on a pink slab, offset

08List rows

09Card and loading

3 inks · A3Zine fair posterYellow, teal and orange on Munken. 300 copies, collected.
Loading is bare paper, breathing; nothing shimmers on a print

10Toast

11Modal

Cancel the run?

Two masters are already burned for RG-2611. They can’t be used again, so ₩18,000 stays on the bill.

A grained veil, not a black scrim

12Steps

  1. Artwork, done
  2. Proof, done
  3. 3Print
  4. 4Trim
  5. 5Collect

13Badges and avatars

RushOn drumProofedDraftCancelled
On the press todayWhere two cross, the inks mix
Badges are words on ink, never colour alone
Signature

Three drums, one sheet.

A layer separator. The poster’s three drums are shown apart, each on its own sheet, then pulled together and overprinted. Change the inks, type a headline, push the misregistration and thin the ink, and pull again: every pull lands a little differently.

Pull 1

Pull 1. 3 of 3 drums, up to 4 pixels out of register, 85% coverage, overprinted.

Drums
4px0 is a perfect pull. Riso usually lands within 1–3.
85%Low coverage is a tired drum or thirsty paper.
Tokens

The system, in numbers.

Ten colours with their contrast, how the inks cross, two typefaces, a spacing scale, how far each thing may sit out of register, and three speeds. Copy them as custom properties, with the overprint, the button and the grain.

Colour
  • --paper #f4efe4Paper: the page, uncoated cream
  • --white #fbf8f1Fields and panels
  • --well #ebe4d4Wells, tracks, off
  • --ink #23211fSoy black: text, 14.0:1
  • --ink-2 #5f5a52Second text, 6.0:1
  • --pink #ff48b0Fluorescent pink: ink, never text
  • --pink-ink #b8166fPink for text, 5.4:1
  • --blue #0078bfBlue: buttons, large type, 4.1:1
  • --yellow #ffe800Yellow: under other inks only
  • --error #b3261eError, 5.7:1
Overprint: where two inks cross
  • Pink over blue
  • Yellow over pink
  • Yellow over blue
  • Orange over teal
Type
  • Zine fairArchivo 900, width 125 · display
  • Zine fairArchivo 800, width 112 · headings
  • Zine fairArchivo 400 · text
  • Zine fairSpace Mono 400 · labels
Space, in pixels
  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48
  • 72
Out of register
  • Text0px
  • Shadow3px
  • Display5px
  • Picture8px
Motion
  • Press120msA button sliding into register
  • Pass500msLayers moving, bars filling
  • Pull800msPlates pulled apart and back
:root {
  /* Paper and text ink */
  --paper: #f4efe4;
  --white: #fbf8f1;
  --well: #ebe4d4;
  --ink: #23211f;
  --ink-2: #5f5a52;

  /* Spot inks: they multiply where they cross */
  --pink: #ff48b0;
  --blue: #0078bf;
  --yellow: #ffe800;
  --teal: #00838a;
  --orange: #ff6c2f;

  /* Inks dark enough for text */
  --pink-ink: #b8166f;
  --blue-ink: #006aa8;
  --error: #b3261e;

  /* Misregistration: text never moves */
  --offset-shadow: 3px 2px;
  --offset-display: 5px 4px;
  --offset-picture: 8px 6px;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  --radius: 2px;
  --press: 120ms ease-out;
  --pass: 500ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Type */
  --font-display: 'Archivo', system-ui, sans-serif; /* 900, wdth 125 */
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

/* A second drum, slightly off: the overprint */
.overprint {
  position: relative;
  color: var(--blue);
}
.overprint::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--pink);
  mix-blend-mode: multiply;
  transform: translate(var(--offset-shadow));
}

/* The button is blue on a pink drum; pressing brings it into register */
.button {
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius);
  background: var(--blue);
  color: #fff;
  font: 700 15px var(--font-display);
  text-transform: uppercase;
  box-shadow: 4px 3px 0 var(--pink);
  transition:
    transform var(--press),
    box-shadow var(--press);
}
.button:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--pink);
}

/* Paper grain over every flat fill */
.grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.13 0 0 0 0 0.12 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

Do

  • Print in spot inks: two or three, chosen for how they cross.
  • Let the layers overlap. Where two inks meet, the third colour is free.
  • Keep the offset for pictures and display type. Text you must read sits in register, in one dark ink.
  • Leave the grain. A flat fill should look printed, a little patchy at the edge.

Don’t

  • Don’t fake it with a gradient

    A drum lays down one flat ink. Smooth blends and glossy shadows say a screen, not a print.

  • Don’t set text in yellow

    Yellow on cream is 1.1 to 1. It is a lovely ink under other inks, and invisible on its own.

  • Don’t misregister the small print

    An offset that charms a headline makes a date or an address unreadable. Small text goes in one ink.

In the wild

Where the style shows up outside this page.

  • 1977

    Print Gocco

    Riso KagakuA home screen printer, and the company’s first hit before the Risograph.
  • 1980

    Risograph

    Riso KagakuA stencil duplicator for offices that artists took over: one drum per colour.
  • since 2009

    Tokyo Art Book Fair

    Zine’s MateTables of small-press books, a great many of them printed on Risos.