vocab.design

aesthetic · editorial

Halftone

also called dot screen, Ben Day dots, comic dots (community), newsprint effect

Rendering tone as a grid of dots that vary in size, borrowed from print and used to give flat interface art a comic or newsprint feel.

A press can put ink down or leave paper bare, and nothing in between, so continuous tone had to be faked. The halftone screen does it by breaking the image into a regular lattice of dots whose size, not whose colour, carries the value: tiny dots read as a light grey, fat dots that almost touch read as near black, and at arm’s length the eye averages the lot back into a photograph. Colour printing runs four of these screens, one per CMYK ink, each rotated to a different angle so the lattices interfere as little as possible, which is why a magnified newspaper photograph shows rosettes rather than a neat grid. Ben Day dots are the older cousin: a mechanical dot or line pattern of fixed size laid into flat areas of comic art, which is why the two names get used for the same look even though the processes are not the same.

On the web the effect is cheap. A repeating radial-gradient at a small background-size, doubled and offset by half a cell to give the lattice its diagonal, is a halftone field, and changing only the dot radius walks it up the tone ramp. An SVG filter can go further and screen an actual image, and a canvas pass further still, but most interface uses are decorative: a dotted gradient behind a hero, a dot shadow offset under display type, dot texture inside an illustration’s flat shapes. Pop art is the reason it reads as loud rather than as technical, since Lichtenstein enlarged the printing artefact until it became the subject, and every comic pastiche since has inherited that reading.

Two things go wrong. The lattice is a fixed pixel pattern, so it aliases against display pixels and against browser zoom, producing moire that moves when the page scrolls; picking a cell size that is an even multiple of a device pixel, or accepting a slightly soft dot, is the usual fix. And a dot pattern eats contrast wherever text sits on it, so a headline over a halftone field needs its own solid backing rather than a hope that the dots average out. Keep the whole thing decorative, behind aria-hidden where it is a layer of its own, and remember that tone made of dots is one of the styles that suffers most from being scaled: the same panel at 200 percent zoom should still be dots and not a grey wash.

Which word?

If you wantsay
tone made of print dots that grow and shrinkhalftone
removing banding by adding fine noisedithering
flat spot colors that overprint and slip out of registerrisograph style
comic outlines, flat primaries, and printed dotspop art style