Efectos de texto retro: lettering riso, doble y con estela

Casi todo efecto de texto retro que ves es uno de tres tratamientos. Riso imita la impresión barata a dos tintas, con las tintas solapadas ligeramente fuera de línea. Doble coloca una copia sólida de la palabra detrás de sí misma, desplazada y en un segundo color, como una serigrafía con una capa mal alineada. Estela repite la palabra varias veces detrás de sí misma, alejándose paso a paso, como una cartela de títulos de los años 70 o una palabra en movimiento. Cada uno funciona con pocas palabras grandes en una tipografía gruesa, con colores del propio diseño y un efecto cada vez.

El efecto de texto riso

Una risografía es una impresora de estarcido, y cada color de tinta tiene su propia plantilla y su propio tambor, de modo que un diseño a dos colores se imprime en dos capas. Las capas rara vez encajan a la perfección, lo que deja asomar un filo de cada color y un tercer color donde se solapan las tintas. Los rosas fluorescentes, los azules vivos y los amarillos solares de las tintas riso se han convertido en un estilo propio, muy popular entre fanzines, editoriales independientes e ilustradores.

Para acertar, mantén el desplazamiento pequeño, unos pocos puntos porcentuales de la altura de la letra, y deja que los colores se multipliquen donde se solapan en lugar de que uno tape al otro. Añade un poco de grano a las letras si puedes: la tinta riso real se asienta de forma algo irregular sobre el papel sin estucar. El rosa sobre azul da un violeta profundo en el solape, y ese detalle es el que vende el efecto.

El efecto de texto doble

Como técnica, el doble es la más simple de las tres: una copia sólida de la palabra, en un color que contraste, detrás de la original y ligeramente desplazada. Se lee como una serigrafía o una pegatina, segura y gráfica. A diferencia de una sombra proyectada, el eco es nítido y colorido, no oscuro y suave. Lleva el desplazamiento un poco más allá de lo que parece prudente, alrededor del 5 al 8 % de la altura de la letra; demasiado cerca parece un error.

El efecto de texto con estela

La estela repite la palabra de cuatro a ocho veces detrás de sí misma, cada copia un paso más lejos. Si las copias cambian de color por el camino, por ejemplo con una paleta cálida de atardecer, obtienes el inconfundible aspecto de títulos de los años 70. Si se desvanecen en opacidad, obtienes movimiento, como si la palabra acabara de llegar. Mantén los pasos uniformes y la dirección constante; un espaciado aleatorio parece roto, no vintage.

Efectos de texto retro en CSS

Los tres se pueden construir con text-shadow, más un modo de fusión para el riso. Usa desplazamientos en em para que el efecto escale con el tamaño de la fuente y mantén el texto como texto real y seleccionable.

/* Double: one crisp echo */
.double {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #b91c1c;
}

/* Trail: repeated copies through a warm palette */
.trail {
  color: #fff7ed;
  text-shadow:
    0.04em 0.04em 0 #fbbf24,
    0.08em 0.08em 0 #f97316,
    0.12em 0.12em 0 #ea580c,
    0.16em 0.16em 0 #c2410c,
    0.20em 0.20em 0 #7c2d12;
}

/* Riso: two inks multiplied, slightly out of register */
.riso {
  position: relative;
  color: #0078bf;
  mix-blend-mode: multiply;
}
.riso::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #ff48b0;
  transform: translate(0.04em, -0.03em);
  mix-blend-mode: multiply;
}

Cómo usar bien los efectos de texto retro

1. 1

   Empieza con la tipografía adecuada

   Gruesa y sencilla, o una serif suave de los 70. Fuentes retro las clasifica por décadas.

2. 2

   Aplícalo a entre dos y cinco palabras

   Solo al titular. Los detalles se quedan planos y simples.

3. 3

   Toma los colores del fondo

   El eco, la estela o la segunda tinta deben salir de la paleta que ya hay en el diseño.

4. 4

   Haz que el desplazamiento sea intencionado

   Pequeño para el riso, algo más atrevido para el doble, con pasos uniformes para la estela.

5. 5

   Usa un efecto por diseño

   Riso más estela más contorno es un disfraz. Un efecto es una decisión.

Para el conjunto más amplio de tratamientos, con contornos y extrusiones, consulta efectos de texto, texto con contorno y efectos de texto 3D. El grano hace especialmente convincente el riso; los degradados con grano muestran cómo añadirlo a un fondo.

Riso, Doble y Estela en Gradiently

Los tratamientos de Lettering de Gradiently incluyen Riso, Doble y Estela, cada uno dibujado en los colores del propio Mark, así que no hay copias que apilar a mano. Sus versiones tiran a lo gráfico: Riso imprime la segunda tinta como una trama fina, algo desregistrada; Doble dibuja letras abiertas con un segundo contorno alrededor; Estela envía contornos que se desvanecen detrás de palabras sólidas. El Mark mantiene legibles las palabras al llevar su zona más calmada detrás de ellas, y su grano da a un titular retro la superficie impresa que pide.