The halftone effect explained: dots, cell size and screen angles

Tone built out of solid dots

A photograph has continuous tone: any given spot can be 12% grey or 13% grey or anything in between. A printing press has no such range. Ink is either on the paper or it isn’t.

Halftoning bridges that gap by throwing tone away and buying it back with area. The image is divided into a grid of cells, and each cell gets one solid mark sized by how dark that patch of the original is — a small dot where 8% coverage is needed, one that nearly touches its neighbours where 85% is. Ink density never changes, only the fraction of paper it covers. Step far enough back that individual dots stop resolving and your eye averages each cell into the grey the original asked for. Every control in a halftone tool adjusts one of three things: cell size, grid orientation, or the shape that fills each cell.

Why print has no alternative

Offset presses lay down a film of ink at essentially fixed density; you cannot ask for half-strength black in one region and full-strength in another. The same constraint holds almost everywhere ink meets a substrate — screen printing pushes ink through mesh that is open or blocked, and a laser printer fuses toner or it doesn’t. Coverage is the only variable left, which is why old newsprint dissolves into dots under a loupe.

Design work now uses halftones for a second reason that has nothing to do with presses: the look. Comics, risograph zines and screen-printed posters reach for one precisely because it reads as printed. When that is the goal the rules below turn into style choices — but knowing what they were for tells you which are worth breaking.

Cell size is the screen ruling

Print measures the fineness of a halftone in lines per inch — dot rows packed into an inch. Newsprint runs coarse at around 85 lpi, magazine stock sits at 133 to 175, high-end coated work goes past 200. A browser tool states the same idea as a cell size in pixels.

The number that matters alongside it is the resolution of your source. Each cell samples a patch of the original and collapses it to one value, so it needs at least a couple of pixels inside it to have anything to say. The old scanning rule of thumb — resolution about twice the screen ruling, so 300 ppi for a 150 lpi screen — is that relationship in print units. Push the cell below what the source can feed and the halftone starts faithfully reproducing JPEG artifacts instead of the photograph.

For actual printing, err coarse — absorbent paper spreads ink. Dots much under a third of a millimetre tend to fill in, and shadows that looked delicate on screen come back as flat black.

Why the grid gets rotated

With a single ink the screen angle is mostly taste, and 45° is the traditional answer: a grid running straight up and down reads as obvious rows and columns, while the same grid tilted is much harder for the eye to pick out, so the dots recede and the image comes forward.

With more than one ink the angle stops being cosmetic. Two regular grids overlaid at a slight offset interfere and produce a third, much larger pattern — moiré — that swims across the image and ruins it. The defence is to separate the screens as widely as possible, and since a square dot grid repeats every 90°, the widest even spacing available to three screens is 30°. That is where the conventional CMYK angles come from: black at 45°, magenta at 75°, cyan at 105° — the same grid as 15°.

Those three carry real contrast against paper, and 30° of separation turns their interference into a tight rosette rather than a broad beat. Yellow gets the leftover slot at 90°, only 15° from its neighbours, which would be intolerable for any other ink. It works because yellow on white is so low in contrast that the interference stays below notice.

Dot shape sets the character

Round dots are the newsprint default. As coverage rises, neighbouring circles reach each other in all four directions at roughly the same moment, so somewhere in the shadows the pattern snaps from separate dots to a connected web and the tone jumps with it. Squares meet on all four sides at once at 50% coverage, landing that jump in the midtones and giving a harder, more graphic result. Diamonds stagger the joins — two sides touch before the other two — so tone ramps evenly, which is why elliptical and diamond screens became the print default. Lines drop dots altogether and modulate stroke thickness, for an engraved, banknote-like texture.

The source image contributes as much as the shape does. A flat, low-contrast photo puts nearly every cell in the middle of the range, so you get a field of near-identical marks and the picture vanishes into texture. Pushing contrast drives shadows toward solid and highlights toward bare paper, which gives the dots something to describe. Halftoning usually takes more contrast than the photo looked like it needed.

Vector or raster

Exporting the dots as SVG keeps every mark as a real shape. That buys scale — a vector halftone blown up to billboard size stays as crisp as the day it was made — plus recolouring, editing individual dots in Illustrator, and handing paths to a cutting plotter or screen-printing workflow that wants outlines.

The cost is element count, and it grows unkindly: cells scale with area divided by cell size squared, so halving the cell quadruples the shapes. A fine screen across a large canvas reaches hundreds of thousands of elements, and files that size stall every editor that opens them. PNG has the opposite profile — cost fixed by pixel dimensions no matter how many dots are in there. So a coarse graphic halftone headed for print or further editing wants SVG; a fine screen for a website or a layout at known size wants PNG.

Making one in the browser

Our halftone generator runs the whole process on your device. Drop in a JPEG, PNG, WebP, AVIF or GIF and the preview updates live: cell size from 4 to 40 px, grid angle across the full 0–180° range, dot size from 50% to 150% of the cell — past 100% the marks overlap, which is how shadows go solid. Brightness and contrast run −100 to +100 and reshape the tone before dots are sized; invert grows the dots toward the highlights instead. The shapes are circle, square, diamond and line; colours are black on white, white on black, a custom pair, or a transparent background that survives both exports.

What it does not do is separate channels. Every export is one grid, at one angle, in one dot colour, derived from luminance — so the CMYK arrangement above is context for reading printed work, not something the tool outputs. Stacking several transparent-background exports in different colours and angles gets close to a layered look, but the channel split is on you.

Two caps are worth knowing before you start. PNG renders at the original resolution up to 6,000 px on the longest side, and larger images are scaled to that cap so the browser doesn’t run out of memory mid-render. SVG export switches off above 60,000 shapes, since past that the file stops opening comfortably anywhere — a few extra pixels of cell size usually brings the count well under. One more quirk: transparent images are composited onto white before tone is measured, so a cut-out logo halftones as artwork on paper rather than a solid black slab.

Nothing is uploaded at any point. The image is decoded, measured and redrawn entirely in your browser, which matters when the photo you’re stylising belongs to a client who hasn’t published it yet.