H · 8 / 26

H — Halftone

Tone built from dots.

The style

Grey, from black ink alone.

A printing press lays down ink or leaves the paper bare; it has no grey. Halftone fakes one. The picture is broken into a grid of dots, large where it is dark and small where it is light, and at reading distance the eye blends them back into tone.

In March 1880 the New York Daily Graphic printed a photograph this way, and in the years after, Frederic Ives and Georg Meisenbach patented screen processes that made it routine. Around then the illustrator Benjamin Day sold tints of even dots — the Ben-Day dots of comic books, which Roy Lichtenstein blew up into paintings in the 1960s.

Colour printing lays four screens, cyan, magenta, yellow and black, each turned to its own angle so the dots form rosettes instead of moiré. On a screen the style keeps that grain: dots for tone, flat inks, heavy black lines.

In use

The comic, read on screen.

A comic reader on the desktop, open at issue three of The Night Edition: Ben-Day skies, a wire photograph screened in dots, speech bubbles and sound effects. Read it page by page, or panel by panel.

  1. Tints are Ben-Day dotsSkies, walls and shadows are even dots in one ink, a CSS pattern. Only the photograph is a true halftone, its dots growing with the dark.
  2. Lettering stays live textBubbles and captions are HTML over the art, so they reflow, read aloud, and grow when you turn on large lettering.
  3. Panel by panelGuided view steps through one panel at a time and reads out what it says, the way a comic reader zooms from panel to panel.
Panel · The Night Edition #3
Page 1 of 2
  1. Night over the harbour: black warehouses under a dotted blue sky, one print works lit at the end of the pier.

    11:52 P.M. Pier 9 Print Works. Eight minutes to the plate deadline.

  2. A black desk phone, its handset jumping on the cradle.

    The phone: Pier 9? We’ve got the comet. Hold page one!

    Sound: Brring!
  3. The press room clock at 11:53, on a yellow sunburst.

    Mira, night foreman.

    Mira: Hold it? The plates are on the press!

  4. A photograph in halftone dots: a comet with a long tail over the harbour, two cranes black on the skyline.

    The wire photo comes in.

    Mira: Screen it at 85 lines. Newsprint drinks anything finer.

The kit

Every part, every state.

The parts that reader is built from, in print terms: key lines, tints, a red plate out of register. Rows of states hold still for comparison; everything else works.

Button

The shadow is a second plate, 4px out of register

Press a button and it moves onto its shadow: the plates come into register. Disabled drops to a dashed line and a 20% tint, with the label on clean paper so it stays legible.

Text field

22 of 28 characters
Focus prints the red plate under the field

Select

For newsprint.
A native select; the arrow sits on a yellow key

Switch, checkbox, radio

Overprint black
Marks
Paper
Checked is solid ink; off is a 20% tint

Slider

Each dot is 2.0px across the radius at a 9px pitch.
The track is the tone ramp: paper to solid

Progress

Print run6,400 of 10,000
Making plates
The fill is yellow with a red tint; the unknown one drifts

Segments and tabs

All four platesOverprinted, they fall into rosettes.
Arrow keys move between plates

List rows

Selected prints yellow; hover takes the second sheet

Card and loading

The Night Edition8 panels · Reading
Four-Colour SundayOut Thursday
Loading is a 10% tint in the shape of the card

Toast

Plate 2 approved!
A speech bubble; stays until dismissed

Modal

The scrim is a 50% tint, not a grey wash

Steps

  1. Done: Prepress
  2. Done: Plates
  3. 3Press
  4. 4Fold
  5. 5Out

Badges and avatars

New!Ben-Day 30%On pressSold out
  • Mira Okafor
  • Jun Tanaka
  • Rosa Alvarez
2 new issues
Labels sit on a solid chip over the tint
Signature

A screen you can turn.

Any picture, screened live. Set the frequency, the angle and the dot, print in one ink or four, and turn the rosette off to watch the colour plates collide. Bring your own picture; it stays on this page.

Drop a picture on the plate, or choose one below. It is read on this page and never leaves it.

Picture
Inks
Dot shape
Tokens

The system, in numbers.

Nine inks with their contrast, the tints, the screens and their angles, three typefaces, and the lines. Copy them as custom properties, with the Ben-Day tint and the print button.

Inks
  • --paper #f4efe1Newsprint: the page and every ground
  • --paper-2 #ebe4d0A second sheet: wells and tracks
  • --ink #1a1a1aBlack plate: type and key lines, 15.2:1
  • --ink-2 #4a4640Grey type, 8.2:1
  • --red-ink #b3261eRed type, 5.7:1; white on it 6.5:1
  • --red #e23b2eSpot red: offsets, bursts, big type
  • --cyan #00a3d9Process cyan, screened at 15°
  • --magenta #e5007eProcess magenta, at 75°
  • --yellow #ffe500Process yellow, at 0°
Type
  • Hold page one!Anton · display, in capitals
  • Hold page one!Libre Franklin · text, 400 to 700
  • Hold page one!Comic Neue Bold · lettering
Tints, at a 9px pitch
  • 10%
  • 20%
  • 30%
  • 50%
  • 70%
  • 90%
Screens on screen
  • Coarse · 12pxCovers, bursts, a picture as a poster
  • Standard · 7pxTints behind panels and skies
  • Fine · 4pxShading inside small parts
  • Floor · 3pxBelow this, dots blur to grey on screen
Screen angles
  • C 15°
  • M 75°
  • Y 0°
  • K 45°
Rulings in print
  • Newsprint85 lpi
  • Uncoated110 lpi
  • Coated150 lpi
Lines
  • Rule · 2px
  • Key line · 3px
  • Offset · 4px
Spacing
  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48
  • 64
:root {
  /* Paper and inks */
  --paper: #f4efe1;
  --paper-2: #ebe4d0;
  --ink: #1a1a1a;
  --ink-2: #4a4640;
  --red-ink: #b3261e;
  --red: #e23b2e;
  --cyan: #00a3d9;
  --magenta: #e5007e;
  --yellow: #ffe500;

  /* The screen: one pitch, one angle, everywhere */
  --pitch: 7px;
  --dot: 1.7px; /* about 37% coverage at 7px */
  --angle-c: 15deg;
  --angle-m: 75deg;
  --angle-y: 0deg;
  --angle-k: 45deg;

  /* Lines and the second plate */
  --rule: 2px;
  --key: 3px;
  --offset: 4px;
  --radius: 0;

  /* Type */
  --font-display: 'Anton', Impact, sans-serif;
  --font-text: 'Libre Franklin', system-ui, sans-serif;
  --font-lettering: 'Comic Neue', 'Comic Sans MS', cursive;
}

/* A Ben-Day tint: two offset grids of round dots, 45° in effect */
.ben-day {
  --tint: var(--ink);
  background-image:
    radial-gradient(circle, var(--tint) var(--dot), transparent calc(var(--dot) + 0.6px)),
    radial-gradient(circle, var(--tint) var(--dot), transparent calc(var(--dot) + 0.6px));
  background-size: var(--pitch) var(--pitch);
  background-position: 0 0, calc(var(--pitch) / 2) calc(var(--pitch) / 2);
}

/* A button with its red plate out of register */
.print {
  border: var(--rule) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--offset) var(--offset) 0 var(--red);
}
.print:active {
  transform: translate(var(--offset), var(--offset));
  box-shadow: 0 0 0 var(--red);
}

Do

  • Pick one screen and keep it: the same pitch and angle for every tint on the page.
  • Put dots where tone lives — pictures, skies, shading — and set type on solid paper or solid ink.
  • Size the dots for where they land: about 85 lines to the inch on newsprint, 150 on coated stock, and big on purpose on a screen.
  • Give each colour screen its own angle — cyan 15°, magenta 75°, yellow 0°, black 45° — so the dots fall into rosettes.

Don’t

  • Two screens, nearly one angle

    A 45° screen over one at 50° and the dots beat against each other in broad waves: moiré. Keep screens apart by 30°, or use one.

  • Type over the dots

    Small type on a 40% tint loses its edges to every dot it crosses. Give it a solid ground, or set it big and black.

  • Dots too fine to survive

    Below about 3px the dots blur to flat grey on a screen, and on soft newsprint fine dots spread and fill in. The texture you drew is gone.

In the wild

Where the style shows up outside this page.

  1. A Scene in Shantytown

    The Daily Graphic, New York · 1880One of the first photographs printed in a newspaper as a halftone.

  2. Whaam!

    Roy Lichtenstein · 1963Ben-Day dots from cheap comics, painted by hand at gallery scale.

  3. Raster paintings

    Sigmar Polke · 1960sPress photos blown up until the dots break apart into pattern.

  4. Spider-Man: Into the Spider-Verse

    Sony Pictures Animation · 2018Dot shading and misregistered colour in a moving 3D film.