Efeitos de texto retro: riso, duplo e rasto

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.

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.

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.

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.

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.

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

Como usar bem os efeitos de texto retro

1. 1

   Começa pelo tipo de letra certo

   Pesado e simples, ou uma serifada suave dos anos 70. Os tipos de letra retro estão listados por década.

2. 2

   Aplica-o a duas a cinco palavras

   Só ao título. Os detalhes ficam planos e simples.

3. 3

   Tira as cores do fundo

   O eco, o rasto ou a segunda tinta devem vir da paleta que o design já tem.

4. 4

   Mantém o desfasamento intencional

   Pequeno no riso, um pouco mais ousado no duplo, em passos regulares no rasto.

5. 5

   Usa um efeito por design

   Riso mais rasto mais contorno é um disfarce. Um só efeito é uma escolha.

Para o conjunto mais amplo de tratamentos, incluindo contornos e extrusões, vê efeitos de texto, texto com contorno e efeitos de texto 3D. O grão torna o riso especialmente convincente; gradientes granulados 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.