Efeitos de texto retrô: riso, duplo e rastro

Quase todo efeito de texto retrô que você vê é um de três tratamentos. O Riso imita a impressão barata em duas cores, com tintas se sobrepondo um pouco fora de alinhamento. O Duplo coloca uma cópia sólida da palavra atrás de si, deslocada em uma segunda cor, como uma serigrafia com uma camada desalinhada. O Rastro repete a palavra várias vezes atrás de si, afastando-se, como um letreiro de abertura dos anos 1970 ou uma palavra em movimento. Cada um funciona em poucas palavras grandes de uma fonte pesada, em cores tiradas do design, um efeito de cada vez.

O efeito de texto riso

A risografia é uma impressora de estêncil, e cada cor de tinta tem o seu estêncil e o seu tambor, então um design em duas cores é impresso em duas camadas. As camadas raramente se alinham com perfeição, o que deixa uma fresta de cada cor à mostra e uma terceira cor onde as tintas se sobrepõem. Os rosas fluorescentes, azuis vivos e amarelos solares das tintas riso viraram um estilo próprio, popular entre zines, editoras independentes e ilustradores.

Para acertar, mantenha o deslocamento pequeno, uma pequena porcentagem da altura da letra, e deixe as cores se multiplicarem onde se sobrepõem, em vez de uma cobrir a outra. Se puder, adicione um pouco de granulação às letras: a tinta riso de verdade se assenta de modo levemente irregular no papel não revestido. Rosa sobre azul dá um violeta profundo na sobreposição, e esse é o detalhe 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, em uma cor contrastante, atrás da original e levemente deslocada. Parece uma serigrafia ou um adesivo, confiante e gráfico. Ao contrário de uma sombra projetada, o eco é nítido e colorido, não escuro e suave. Leve o deslocamento um pouco além do que parece seguro, cerca de 5 a 8 por cento da altura da letra; muito perto e parece um erro.

O efeito de texto rastro

O rastro 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 uma paleta quente de pôr do sol, por exemplo, surge o inconfundível visual de abertura dos anos 70. Quando perdem opacidade, surge o movimento, como se a palavra tivesse acabado de chegar. Mantenha os passos uniformes e a direção consistente; espaçamento aleatório parece quebrado, não vintage.

Efeitos de texto retrô em CSS

Os três podem ser feitos com text-shadow, mais um modo de mesclagem para o riso. Use deslocamentos em em para que o efeito acompanhe o tamanho da fonte e mantenha o texto como texto real, 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 retrô

1. 1

   Comece pela fonte certa

   Pesada e simples, ou uma serifada macia dos anos 70. Fontes retrô lista fontes por década.

2. 2

   Aplique em duas a cinco palavras

   Só no título. Os detalhes ficam chapados e simples.

3. 3

   Tire as cores do fundo

   O eco, o rastro ou a segunda tinta devem vir da paleta que já está no design.

4. 4

   Mantenha o deslocamento intencional

   Pequeno para o riso, um pouco mais ousado para o duplo, em passos uniformes para o rastro.

5. 5

   Use um efeito por design

   Riso mais rastro mais contorno é uma fantasia. Um efeito é uma escolha.

Para o conjunto mais amplo de tratamentos, incluindo contornos e extrusões, veja efeitos de texto, texto com contorno e efeitos de texto 3D. A granulação deixa o riso especialmente convincente; degradês granulados mostra como adicioná-la a um fundo.

Riso, Duplo e Rastro no Gradiently

Os tratamentos de Lettering do Gradiently incluem Riso, Duplo e Rastro, cada um desenhado nas próprias cores do Mark, então não há cópias para empilhar à mão. As versões dele são mais gráficas: o Riso imprime a segunda tinta como um meio-tom fino, um pouco fora de registro; o Duplo desenha letras vazadas com um segundo contorno em volta; o Rastro manda contornos que se desfazem para trás de palavras sólidas. O Mark mantém as palavras legíveis ao levar a região mais calma para trás delas, e a sua granulação dá a um título retrô a superfície impressa que ele pede.