El efecto trama de puntos en un sitio web

Mira una foto de periódico con una lupa: está hecha de puntos. Las sombras son puntos gruesos y apretados, las altas luces puntos minúsculos. Es el fotograbado de medios tonos, la trama del impresor, que en francés se llama similigravure. En un sitio, la capa del estudio conserva su rejilla: puntos regulares, muy finos, colocados sobre toda la página, que dan a la pantalla un aire de papel impreso y de documento técnico.

Sin

Tramado

De dónde viene el efecto

Una prensa sabe depositar tinta, o nada; no conoce el gris. Para imprimir una fotografía y sus tonos continuos, el fotograbado traduce cada tono en puntos regularmente espaciados, tanto más gruesos cuanto más oscuro es el matiz (Larousse). A distancia de lectura, el ojo mezcla los puntos de tinta con el blanco del papel y recompone los grises.

El procedimiento tardó en encontrarse. William Henry Fox Talbot, inventor de la fotografía sobre papel, lo buscaba ya en los años 1840; hicieron falta unos cuarenta años para que funcionara de forma fiable, a mediados de los años 1880. Se fotografiaba entonces el original a través de una trama de vidrio, cuadriculada con aberturas minúsculas. La foto en medios tonos, impresa de una sola pasada con el texto, dominó después las publicaciones ilustradas desde 1900 aproximadamente hasta los años sesenta, cuando el offset mejoró (Yale University Art Gallery, según Richard Benson). Grabada en relieve, la trama llegaba como mucho a unos 150 puntos por pulgada.

El motivo acabó convirtiéndose en un signo en sí mismo. El pop art lo amplió hasta hacerlo visible: Andy Warhol se sirvió de la trama de medios tonos para hablar del vínculo entre la imagen de las celebridades, la cultura popular y el arte (Cleveland Museum of Art, 2022).

Cuándo usarla

La trama de puntos dice impresión, informe, precisión. Conviene a:

• un software o una herramienta en línea que quiere el aire de un manual cuidado;
• una editorial, una revista, una librería, una imprenta;
• una oficina de ingeniería, un despacho de ingenieros asesores, un topógrafo;
• una marca que juega con el cómic o el pop art.

Una maquetación del estudio la aplica por defecto: la maquetación Software, que la lleva sola. La hoja de estilos de la biblioteca la destina a las direcciones técnicas y editoriales, aquellas en las que el grano de película parecería sucio.

Cuándo prescindir de ella. Para una página cálida, artesanal o gastronómica, la trama enfría. No la combines con las líneas de trama: dos rejillas regulares superpuestas pueden ondular en moaré. Y en una página clara cargada de texto pequeño, cada punto se suma a las letras.

La dosis justa

En la biblioteca, la trama coloca un punto de un píxel de ancho cada tres píxeles, en el color del texto del sitio al 55 %, y toda la capa está al 30 % de opacidad. A distancia normal, los puntos se funden en una textura fina, un velo ligero. Se ven al acercarse, como en el periódico.

Todos los puntos tienen el mismo tamaño. La capa coloca la rejilla del impresor sobre la imagen, que conserva sus tonos continuos: la trama le da una superficie, sin descomponerla en puntos.

Como las otras texturas, deja desnuda la primera pantalla y sube a medida que se baja. La regla de la biblioteca vale: dos capas como mucho. La maquetación Software solo aplica una, y a menudo basta para una página que ante todo hay que leer.

Lo que cuesta

Casi nada. Un disco minúsculo, dibujado una vez por el navegador y repetido en mosaico por toda la superficie, sin ningún archivo que descargar. La capa se coloca en posición fija y no se mueve. Solo varía su opacidad, durante el primer desplazamiento, y la opacidad es una de las dos propiedades que un navegador sabe cambiar sin repintar la pantalla (web.dev).

Accesibilidad

• Contraste. Los puntos pasan sobre el texto como sobre la imagen, en el color del texto: sobre las letras, apenas se ven; sobre el fondo, lo acercan un poco al color del texto. Mide el contraste del texto corriente, al menos 4,5 a 1 (WCAG 2.2, criterio 1.4.3), y relee a ojo la letra pequeña.
• Moaré. Una rejilla tan fina puede ondular en algunas pantallas escaladas, al 125 % o al 150 %, o con ciertos niveles de zoom. Mira la página en los aparatos de tus clientes antes de publicarla.
• Movimiento reducido. Cuando el visitante pide menos animación (prefers-reduced-motion), el grano y la escarcha desaparecen. La trama se queda, porque está quieta.
• Sin destellos. Nada en esta capa se enciende ni se apaga.

Cómo está hecha

Un degradado radial, radial-gradient(), dibuja un disco de medio píxel de radio, y luego background-size fija el tamaño de la baldosa en tres píxeles por tres: el navegador la repite por toda la superficie (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 lleva la intensidad, --m-voile la subida de la capa después de la primera pantalla. El disco toma el color del texto: la trama sigue, pues, la paleta, clara en una página oscura, oscura en una página clara.

En el estudio

La trama de puntos es una de las diez texturas de la biblioteca. Se elige en la etapa «La textura», después del fondo.