The halftone dot effect on a website

Look at a newspaper photo through a magnifying glass: it is made of dots. The shadows are big, tightly packed dots, the highlights tiny ones. This is halftone, the printing screen, known in French as similigravure. On a site, the studio’s layer keeps its grid: regular, very fine dots, laid over the whole page, that give the screen the look of printed paper and technical documents.

Without

Halftone dots

Where the effect comes from

A press can lay down ink, or none at all; it knows nothing of grays. To print a photograph and its continuous tones, halftone translates each tone into evenly spaced dots, all the bigger as the shade is darker (Larousse). At reading distance, the eye blends the ink dots with the white of the paper and rebuilds the grays.

The method took a long time to find. William Henry Fox Talbot, the inventor of photography on paper, was trying it as early as the 1840s; it took some forty years for it to work reliably, in the mid-1880s. The original was then photographed through a glass screen, ruled with tiny openings. The halftone photo, printed in a single pass with the text, went on to dominate illustrated publications from around 1900 until the 1960s, when offset printing improved (Yale University Art Gallery, after Richard Benson). Engraved in relief, the screen topped out around 150 dots per inch.

The pattern ended up becoming a sign in itself. Pop art enlarged it until it was visible: Andy Warhol used the halftone screen to speak about the link between the image of celebrities, popular culture and art (Cleveland Museum of Art, 2022).

When to use it

The halftone dot screen says print, survey, precision. It suits:

• a software product or online tool that wants the look of a carefully made manual;
• a publisher, a magazine, a bookshop, a print shop;
• an engineering firm, a consulting engineers’ office, a surveyor;
• a brand playing on comics or pop art.

One of the studio’s layouts applies it by default: the Software layout, which carries it alone. The library’s stylesheet intends it for technical and editorial directions, those where film grain would look dirty.

When to skip it. For a warm, handmade or food-focused page, halftone cools things down. Don’t combine it with scan lines: two regular grids on top of each other can ripple into moiré. And on a light page heavy with small text, each dot adds itself to the letters.

The right dose

In the library, halftone places a one-pixel-wide dot every three pixels, in the site’s text color at 55%, and the whole layer is at 30% opacity. At normal distance, the dots melt into a fine texture, a light veil. You see them when you come closer, as in the newspaper.

All the dots are the same size. The layer lays the printer’s grid over the image, which keeps its continuous tones: the screen gives it a surface, without breaking it into dots.

Like the other textures, it leaves the first screen bare and rises as you scroll down. The library’s rule holds: two layers at most. The Software layout applies only one, and that is often enough for a page that must be read first.

What it costs

Almost nothing. A tiny disk, drawn once by the browser and tiled over the whole surface, with no file to download. The layer sits in a fixed position and doesn’t move. Only its opacity varies, during the first scroll, and opacity is one of the two properties a browser can change without repainting the screen (web.dev).

Accessibility

• Contrast. The dots pass over the text as over the image, in the text color: on the letters, they barely show; on the background, they bring it a little closer to the text color. Measure the contrast of body text, at least 4.5 to 1 (WCAG 2.2, criterion 1.4.3), and reread the small print by eye.
• Moiré. Such a fine grid can ripple on some scaled screens, at 125% or 150%, or at certain zoom levels. Look at the page on your customers’ devices before publishing it.
• Reduced motion. When the visitor asks for less animation (prefers-reduced-motion), grain and frost disappear. Halftone stays, because it is still.
• No flashing. Nothing in this layer lights up or goes out.

How it is made

A radial gradient, radial-gradient(), draws a disk with a half-pixel radius, then background-size sets the tile size to three pixels by three: the browser repeats it over the whole surface (MDN).

.m.m--trame-points {
  opacity: calc(var(--trame-points, .3) * var(--m-voile, 1));
  background-image: radial-gradient(circle,
    color-mix(in srgb, var(--fg) 55%, transparent) .5px, transparent .5px);
  background-size: 3px 3px;
}

--trame-points carries the intensity, --m-voile the rise of the layer after the first screen. The disk takes the text color: the screen therefore follows the palette, light on a dark page, dark on a light page.

In the studio

Halftone dots are one of the library’s ten textures. You choose them at the “The texture” step, after the background.