Effet trame de points (halftone) sur un site web

Regardez une photo de journal à la loupe : elle est faite de points. Les ombres sont de gros points serrés, les lumières de points minuscules. C’est la similigravure, la trame de l’imprimerie, qu’on appelle aussi halftone en anglais. Sur un site, le calque de l’atelier en garde la grille : des points réguliers et très fins, posés sur toute la page, qui donnent à l’écran un air de papier imprimé et de document technique.

Sans

Tramé

D’où vient l’effet

Une presse sait poser de l’encre, ou n’en poser aucune ; elle ignore les gris. Pour imprimer une photographie et ses tons continus, la similigravure traduit chaque ton en points également espacés, d’autant plus gros que la teinte est plus foncée (Larousse). À distance de lecture, l’œil mêle les points d’encre au blanc du papier et reconstitue les gris.

La méthode a été longue à trouver. William Henry Fox Talbot, l’inventeur de la photographie sur papier, l’essayait dès les années 1840 ; il a fallu une quarantaine d’années pour qu’elle fonctionne de façon fiable, au milieu des années 1880. On photographiait alors l’original à travers une trame de verre, quadrillée d’ouvertures minuscules. La photo tramée, imprimée en un seul passage avec le texte, a ensuite dominé les publications illustrées d’environ 1900 jusqu’aux années 1960, quand l’offset s’est perfectionné (Yale University Art Gallery, d’après Richard Benson). Gravée en relief, la trame plafonnait autour de 150 points par pouce.

Le motif a fini par devenir un signe en soi. Le pop art l’a agrandi jusqu’à le rendre visible : Andy Warhol s’est servi de la trame pour parler du lien entre l’image des célébrités, la culture populaire et l’art (Cleveland Museum of Art, 2022).

Quand la poser

La trame de points dit l’imprimé, le relevé, la précision. Elle va :

• à un logiciel ou un outil en ligne qui veut l’allure d’une notice soignée ;
• à un éditeur, une revue, une librairie, une imprimerie ;
• à un bureau d’études, un cabinet d’ingénieurs, un géomètre ;
• à une marque qui joue la bande dessinée ou le pop art.

Une mise en page de l’atelier la pose d’office : la mise en page Logiciel, qui la porte seule. La feuille de la bibliothèque la destine aux directions techniques et éditoriales, celles où le grain de film ferait sale.

Quand s’en passer. Pour une page chaleureuse, artisanale ou gourmande, la trame refroidit. Ne la cumulez pas avec les lignes de trame : deux grilles régulières l’une sur l’autre peuvent onduler en moiré. Et sur une page claire chargée de petit texte, chaque point s’ajoute aux lettres.

Le bon dosage

Dans la bibliothèque, la trame pose un point d’un pixel de diamètre tous les trois pixels, dans la couleur du texte du site à 55 %, et le calque entier est à 30 % d’opacité. À distance normale, les points se fondent en une texture fine, un léger voile. On les voit en s’approchant, comme sur le journal.

Tous les points ont la même taille. Le calque pose la grille de l’imprimeur par-dessus l’image, qui garde ses tons continus : la trame lui donne une surface, sans la décomposer en points.

Comme les autres matières, elle laisse le premier écran nu et se lève à mesure qu’on descend. La règle de la bibliothèque tient : deux calques au plus. La mise en page Logiciel n’en pose qu’un, et c’est souvent assez pour une page qui doit d’abord se lire.

Ce qu’elle coûte

Presque rien. Un disque minuscule, dessiné une fois par le navigateur et répété en mosaïque sur toute la surface, sans fichier à télécharger. Le calque est posé en position fixe et ne bouge pas. Seule son opacité varie, pendant le premier défilement, et l’opacité fait partie des deux propriétés qu’un navigateur sait changer sans repeindre l’écran (web.dev).

L’accessibilité

• Le contraste. Les points passent sur le texte comme sur l’image, dans la couleur du texte : sur les lettres, ils se voient à peine ; sur le fond, ils le rapprochent un peu de la couleur du texte. Mesurez le contraste du texte courant, au moins 4,5 pour 1 (WCAG 2.2, critère 1.4.3), et relisez les petits caractères à l’œil.
• Le moiré. Une grille aussi fine peut onduler sur certains écrans mis à l’échelle, à 125 % ou 150 %, ou à certains niveaux de zoom. Regardez la page sur les appareils de vos clients avant de la publier.
• Le mouvement réduit. Quand le visiteur demande moins d’animations (prefers-reduced-motion), le grain et le givre disparaissent. La trame reste, parce qu’elle est immobile.
• Aucun clignotement. Rien, dans ce calque, ne s’allume ni ne s’éteint.

Comment elle est faite

Un dégradé radial, radial-gradient(), dessine un disque d’un demi-pixel de rayon, puis background-size fixe la taille de la tuile à trois pixels sur trois : le navigateur la répète sur toute la 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 porte l’intensité, --m-voile le lever du calque après le premier écran. Le disque prend la couleur du texte : la trame suit donc la palette, claire sur une page sombre, foncée sur une page claire.

Dans l’atelier

La trame de points fait partie des dix matières de la bibliothèque. On la choisit à l’étape « La matière », après le fond.