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

[Canonical HTML page](https://gradiently.design/es/guide/retro-text-effect)

No necesitas un pack de filtros para que una tipografía parezca vintage. Tres tratamientos, tomados de la impresión barata, los carteles offset y las viejas secuencias de títulos, hacen casi todo el trabajo.

## The short version

- La mayoría de los efectos de texto retro salen de tres tratamientos: el desregistro riso, un eco doble desplazado y una estela de copias repetidas.
- Un efecto riso imita la impresión en risografía, donde dos tintas se solapan ligeramente desalineadas y se mezclan donde se encuentran.
- Un efecto doble coloca una copia sólida de la palabra detrás de la original, desplazada a poca distancia y en un color que contraste.
- Un efecto estela repite la palabra varias veces detrás de sí misma, cada copia más lejos, y sugiere velocidad o una secuencia de títulos de los años 70.
- Los efectos retro quedan mejor en pocas palabras grandes con una tipografía gruesa, con colores tomados del fondo y un solo efecto por diseño.

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.

| Efecto | Parece | Transmite | Va bien para |
| --- | --- | --- | --- |
| Riso | Dos tintas, ligeramente desregistradas, que se mezclan donde se solapan | Artesanal, indie, fanzine | Librerías, café, conciertos, estudios creativos |
| Doble | Un eco sólido desplazado detrás de la palabra | Atrevido, pop, serigrafía | Rebajas, streetwear, lanzamientos |
| Estela | Varias copias repetidas que se alejan paso a paso | Movimiento, años 70, psicodelia | Música, eventos, campañas de verano |

Tres tratamientos, tres voces distintas. Elige según lo que debe sentir el mensaje, no según lo que parezca más impresionante.

## 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.

- Rosa fluorescente: #ff48b0
- Azul medio: #0078bf
- Amarillo: #ffe800
- Verde azulado: #00838a
- Rojo vivo: #f15060
- Papel sin estucar: #f4efe6

Aproximaciones en pantalla de tintas riso populares, sobre un tono de papel blanco roto. Elige dos tintas: rosa y azul, o amarillo y verde azulado, son combinaciones clásicas.

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.

- Fondo cálido, eco rojo profundo: `linear-gradient(135deg, #fde68a 0%, #fb923c 100%)`
- Fondo menta, eco azul marino: `linear-gradient(135deg, #a7f3d0 0%, #22d3ee 100%)`
- Fondo violeta, eco rosa: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`

Fondos que van bien con un efecto doble. El color del eco debe contrastar con el fondo y con la cara de la letra.

## 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.

Una publicación vertical con las palabras Qué locura en grande sobre un degradado cálido, con los detalles de un evento en una azotea debajo

Un titular corto y potente sobre un fondo cálido: la forma que necesita un tratamiento de estela o doble.

Una portada de story vertical para una feria de edición independiente, con un número de edición sobre el título y los detalles debajo

Una story para una feria de fanzines, donde un acabado riso a dos colores en el título quedaría como en casa.

## 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.

```css
/* 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;
}
```

Para el riso, escribe la palabra dos veces: `<h1 class="riso" data-text="Feria del fanzine">Feria del fanzine</h1>`. Multiply funciona sobre fondos claros, como la tinta real sobre papel. Algunos lectores de pantalla anuncian el contenido generado, así que la palabra puede leerse dos veces.

> **El riso necesita un fondo claro** Multiply oscurece, igual que la tinta sobre el papel, así que desaparece sobre fondos oscuros. Para un diseño oscuro, usa el efecto doble.

## Cómo usar bien los efectos de texto retro

1. **Empieza con la tipografía adecuada** Gruesa y sencilla, o una serif suave de los 70. [Fuentes retro](https://gradiently.design/es/guide/retro-fonts) las clasifica por décadas.
2. **Aplícalo a entre dos y cinco palabras** Solo al titular. Los detalles se quedan planos y simples.
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. **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. **Usa un efecto por diseño** Riso más estela más contorno es un disfraz. Un efecto es una decisión.

### Evita

- Una estela en un titular largo
- Tintas riso sobre fondo negro
- Un eco tan cercano que parece un fallo de impresión
- Resplandores mezclados con los desplazamientos
- Un efecto distinto en cada publicación

### Haz

- Una estela en una o dos palabras cortas
- Riso sobre tonos de papel y colores claros
- Un desplazamiento claro y seguro
- Solo copias nítidas y sólidas
- Un efecto retro como firma de campaña

Para el conjunto más amplio de tratamientos, con contornos y extrusiones, consulta [efectos de texto](https://gradiently.design/es/guide/text-effects), [texto con contorno](https://gradiently.design/es/guide/outline-text) y [efectos de texto 3D](https://gradiently.design/es/guide/3d-text-effect). El grano hace especialmente convincente el riso; los [degradados con grano](https://gradiently.design/es/guide/grainy-gradients) 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.

## FAQ

### ¿Qué es un efecto de texto riso?

Imita la impresión en risografía: dos colores de tinta impresos ligeramente desalineados, que se solapan y se mezclan en un tercer color donde se encuentran.

### ¿Cómo hago un efecto de texto retro en CSS?

Apila copias sólidas de `text-shadow` sin desenfoque. Una copia crea un efecto doble, varias copias escalonadas crean una estela y un pseudoelemento multiplicado crea el riso.

### ¿Qué colores van bien con un efecto de texto años 70?

Pasos cálidos de atardecer, como dorado, naranja, óxido y marrón, sobre un fondo crema o marrón profundo.

### ¿Qué diferencia hay entre un efecto doble y una sombra proyectada?

Un doble es una copia nítida y de color desplazada detrás de la palabra. Una sombra proyectada suele ser oscura y desenfocada.