# Efeitos de texto retro: riso, duplo e rasto

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

Não precisas de um pacote de filtros para dar um ar vintage à tipografia. Três tratamentos, vindos da impressão barata, dos cartazes desalinhados e dos genéricos antigos, fazem quase todo o trabalho.

## The short version

- A maioria dos efeitos de texto retro vem de três tratamentos: o desregisto riso, um eco duplo desfasado e um rasto de cópias repetidas.
- Um efeito riso imita a impressão em risografia, em que duas tintas se sobrepõem ligeiramente desalinhadas e se misturam onde se cruzam.
- Um efeito duplo coloca uma cópia sólida da palavra atrás do original, desfasada uma curta distância e numa cor contrastante.
- Um efeito rasto repete a palavra várias vezes atrás de si, cada cópia mais afastada, sugerindo velocidade ou um genérico dos anos 70.
- Os efeitos retro funcionam melhor em poucas palavras grandes, num tipo de letra pesado, com cores tiradas do fundo e um só efeito por design.

Quase todos os **efeitos de texto retro** que vês são um de três tratamentos. O **riso** imita a impressão barata a duas cores, com tintas ligeiramente desalinhadas. O **duplo** põe uma cópia sólida da palavra atrás de si, desfasada numa segunda cor, como uma serigrafia com uma camada fora do sítio. O **rasto** repete a palavra várias vezes atrás de si, afastando-se, como um cartão de título dos anos 70 ou uma palavra em movimento. Cada um funciona em poucas palavras grandes, num tipo de letra pesado, com as cores do próprio design, um efeito de cada vez.

| Efeito | Aspeto | Sensação | Ideal para |
| --- | --- | --- | --- |
| Riso | Duas tintas, ligeiramente fora de registo, que se misturam onde se sobrepõem | Artesanal, indie, zine | Livrarias, cafés, concertos, estúdios criativos |
| Duplo | Um eco sólido desfasado atrás da palavra | Ousado, pop, serigrafia | Promoções, streetwear, lançamentos |
| Rasto | Várias cópias repetidas que se afastam | Movimento, anos 70, psicadélico | Música, eventos, campanhas de verão |

Três tratamentos, três vozes diferentes. Escolhe pelo que a mensagem deve transmitir, não pelo que parece mais impressionante.

## O efeito de texto riso

Uma risografia é uma impressora de stencil, e cada cor de tinta tem o seu próprio stencil e tambor, pelo que um design a duas cores é impresso em duas camadas. As camadas raramente ficam perfeitamente alinhadas, o que deixa uma nesga de cada cor à vista e uma terceira cor onde as tintas se sobrepõem. Os rosas fluorescentes, os azuis vivos e os amarelos solares das tintas riso tornaram-se um estilo próprio, popular em zines, editoras independentes e ilustradores.

- Rosa fluorescente: #ff48b0
- Azul médio: #0078bf
- Amarelo: #ffe800
- Verde-azulado: #00838a
- Vermelho vivo: #f15060
- Papel não revestido: #f4efe6

Aproximações no ecrã de tintas riso populares, sobre um tom de papel quase branco. Escolhe duas tintas: rosa e azul, ou amarelo e verde-azulado, são pares clássicos.

Para acertares, mantém o desfasamento pequeno, uns poucos por cento da altura da letra, e deixa as cores *multiplicarem-se* onde se sobrepõem, em vez de uma cobrir a outra. Se puderes, junta um pouco de grão às letras: a tinta riso verdadeira assenta de forma ligeiramente irregular no papel não revestido. O rosa sobre o azul dá um violeta profundo na sobreposição, e é esse pormenor que vende o efeito.

## O efeito de texto duplo

Como técnica, o duplo é o mais simples dos três: uma cópia sólida da palavra, numa cor contrastante, atrás do original e ligeiramente desfasada. Lê-se como uma serigrafia ou um autocolante, confiante e gráfico. Ao contrário de uma sombra projetada, o eco é nítido e colorido, não escuro e suave. Leva o desfasamento um pouco além do que parece seguro, cerca de 5 a 8 por cento da altura da letra; demasiado perto, e parece um erro.

- Fundo quente, eco vermelho escuro: `linear-gradient(135deg, #fde68a 0%, #fb923c 100%)`
- Fundo menta, eco azul-marinho: `linear-gradient(135deg, #a7f3d0 0%, #22d3ee 100%)`
- Fundo violeta, eco rosa: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`

Fundos que combinam com um efeito duplo. A cor do eco deve contrastar com o fundo e com a face da letra.

## O efeito de texto rasto

O rasto repete a palavra de quatro a oito vezes atrás de si, cada cópia mais afastada. Quando as cópias mudam de cor pelo caminho, por exemplo numa paleta quente de pôr do sol, obténs o inconfundível aspeto de título dos anos 70. Quando perdem opacidade, obténs movimento, como se a palavra tivesse acabado de chegar. Mantém os passos regulares e a direção consistente; um espaçamento aleatório parece avariado, não vintage.

Uma publicação vertical com as palavras Far out em grande sobre um gradiente quente, com os detalhes de um evento no terraço por baixo

Um título curto e forte sobre um fundo quente: a forma de que um rasto ou um duplo precisam.

Uma capa vertical de story para uma feira de edição independente, com o número da edição acima do título e os detalhes por baixo

Um story de feira de zines, onde um acabamento riso a duas cores no título ficaria como em casa.

## Efeitos de texto retro em CSS

Os três podem ser feitos com `text-shadow`, mais um modo de mistura para o riso. Usa desfasamentos em `em` para que o efeito acompanhe o tamanho do tipo de letra, e mantém o texto como texto real e selecionável.

```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 o riso, escreve a palavra duas vezes: `<h1 class="riso" data-text="Zine fair">Zine fair</h1>`. O multiply funciona em fundos claros, como a tinta real no papel. Alguns leitores de ecrã anunciam o conteúdo gerado, por isso a palavra pode ser lida duas vezes.

> **O riso precisa de um fundo claro** O multiply escurece, tal como a tinta no papel, por isso desaparece em fundos escuros. Para um design escuro, usa antes o efeito duplo.

## Como usar bem os efeitos de texto retro

1. **Começa pelo tipo de letra certo** Pesado e simples, ou uma serifada suave dos anos 70. Os [tipos de letra retro](https://gradiently.design/pt-pt/guide/retro-fonts) estão listados por década.
2. **Aplica-o a duas a cinco palavras** Só ao título. Os detalhes ficam planos e simples.
3. **Tira as cores do fundo** O eco, o rasto ou a segunda tinta devem vir da paleta que o design já tem.
4. **Mantém o desfasamento intencional** Pequeno no riso, um pouco mais ousado no duplo, em passos regulares no rasto.
5. **Usa um efeito por design** Riso mais rasto mais contorno é um disfarce. Um só efeito é uma escolha.

### Evita

- Um rasto num título longo
- Tintas riso num fundo preto
- Um eco tão próximo que parece uma falha de impressão
- Brilhos misturados com os desfasamentos
- Um efeito diferente em cada publicação

### Faz

- Um rasto numa ou duas palavras curtas
- Riso em tons de papel e cores claras
- Um desfasamento claro e confiante
- Apenas cópias nítidas e sólidas
- Um efeito retro como assinatura da campanha

Para o conjunto mais amplo de tratamentos, incluindo contornos e extrusões, vê [efeitos de texto](https://gradiently.design/pt-pt/guide/text-effects), [texto com contorno](https://gradiently.design/pt-pt/guide/outline-text) e [efeitos de texto 3D](https://gradiently.design/pt-pt/guide/3d-text-effect). O grão torna o riso especialmente convincente; [gradientes granulados](https://gradiently.design/pt-pt/guide/grainy-gradients) mostra como o juntar a um fundo.

## Riso, Duplo e Rasto no Gradiently

Os tratamentos de Lettering do Gradiently incluem Riso, Duplo e Rasto, cada um desenhado nas cores do próprio Mark, por isso não há cópias para empilhar à mão. As versões inclinam-se para o gráfico: o Riso imprime a segunda tinta como uma meia-tinta fina, um pouco fora de registo; o Duplo desenha letras abertas com um segundo contorno à volta; o Rasto envia contornos que se desvanecem para trás de palavras sólidas. O Mark mantém as palavras legíveis ao mover a sua zona mais calma para trás delas, e o seu grão dá a um título retro a superfície impressa de que precisa.

## FAQ

### O que é um efeito de texto riso?

Imita a impressão em risografia: duas cores de tinta impressas ligeiramente desalinhadas, que se sobrepõem e se misturam numa terceira cor onde se encontram.

### Como faço um efeito de texto retro em CSS?

Empilha cópias sólidas de `text-shadow` sem desfocagem. Uma cópia dá um efeito duplo, várias cópias em degraus dão um rasto, e um pseudoelemento com multiply dá o riso.

### Que cores combinam com um efeito de texto dos anos 70?

Degraus quentes de pôr do sol, como dourado, laranja, ferrugem e castanho, sobre um fundo creme ou castanho escuro.

### Qual é a diferença entre um efeito duplo e uma sombra projetada?

O duplo é uma cópia nítida e colorida, desfasada atrás da palavra. Uma sombra projetada costuma ser escura e desfocada.