Efeitos de lettering: Contorno, Interno, Recorte, Extrusão e mais

O Gradiently tem oito efeitos de lettering: Contorno, Interno, Recorte, Extrusão, Duplo, Rastro, Riso e Halo. Cada um transforma uma linha de texto em lettering desenhado nas cores do seu Mark: linhas de elevação ao redor das palavras, uma linha entalhada dentro de cada letra, palavras recortadas de uma chapa, letras profundas em três dimensões e mais. Eles são para palavras de destaque, um título ou um nome, e funcionam melhor um de cada vez, na linha que você mais quer que as pessoas vejam.

Os oito tratamentos de lettering num relance

Contorno, Recorte e Extrusão: lettering com contraste próprio

Esses três constroem uma borda forte nas letras, e por isso aguentam bem Marks cheios de movimento. O Contorno cerca as palavras com linhas como um mapa de relevo, e o lettering parece subir do fundo. O Recorte compõe as palavras como formas recortadas de uma chapa sólida, o que soa confiante e gráfico. A Extrusão dá profundidade a cada letra, desenhada nas cores do Mark, o visual clássico para o título de um lançamento ou uma thumbnail.

Se você quer entender como funcionam o texto com extrusão e o texto contornado em geral, efeitos de texto 3D e texto com contorno explicam a técnica por trás deles.

Interno, Duplo e Riso: a família editorial e de impressão

O Interno entalha uma linha dentro de cada letra, e como essa linha mostra o próprio Mark, o fundo vira a segunda cor do lettering. Ele funciona melhor com fontes pesadas e largas, em que há espaço dentro do traço. O Duplo desenha letras vazadas duas vezes, levemente deslocadas, criando um eco que lembra impressos de moda ou de música. O Riso imita a risografia: duas tintas que não se alinham por completo e um pontilhado granulado, perfeito para qualquer coisa que deva parecer impressa à mão.

Rastro e Halo: movimento e clima

O Rastro repete o contorno de uma palavra atrás dela, como letras deixando uma esteira. Você define a cor do rastro, e ele transmite velocidade: ótimo para esporte, contagens regressivas e qualquer coisa que deva parecer em movimento mesmo numa imagem parada. O Halo envolve as letras com uma luz suave na cor do Mark. Ele é puramente decorativo, um clima e não uma ferramenta, e nunca serve para salvar um texto difícil de ler. Se uma linha está difícil de ler, aumente o nível de reação do Mark ou deixe a tinta automática escolher a outra tinta.

Como escolher o efeito de lettering para cada trabalho

Como adicionar um efeito de lettering no Studio

1. 1

   Selecione o texto

   Escolha o título ou a palavra que você quer tratar. Deixe todo o resto como texto simples.

2. 2

   Escolha um tratamento

   Escolha um dos oito tratamentos de lettering. Ele aparece na hora, nas cores do Mark do design.

3. 3

   Ajuste a fonte

   Use um peso maior ou uma fonte mais larga se o efeito parecer apertado, e acrescente um pouco de espaçamento entre letras no Duplo e no Rastro.

4. 4

   Teste outro Mark

   Troque o Mark e veja o lettering mudar de cor junto. É o jeito mais rápido de avaliar um tratamento.

5. 5

   Confira todos os tamanhos

   Redimensione para story ou thumbnail e confirme que a palavra tratada continua legível nessa escala.

Efeitos de lettering em CSS, para a web

Se você precisa de um visual parecido num site, dois desses efeitos passam bem para o CSS: um contorno no espírito do Duplo e uma extrusão em degraus. Os dois usam texto de verdade, então continuam selecionáveis e acessíveis.

/* Open outline letters, in the spirit of Double */
.outline {
  color: transparent;
  -webkit-text-stroke: 2px #f4b26a;
  text-shadow: 6px 6px 0 #7a2e5c;
}

/* A stepped extrusion in two tones */
.extrude {
  color: #fbe7d4;
  text-shadow:
    1px 1px 0 #c2577a,
    2px 2px 0 #c2577a,
    3px 3px 0 #a3456a,
    4px 4px 0 #a3456a,
    5px 5px 0 #7a2e5c,
    6px 6px 0 #7a2e5c;
}

Para a família mais ampla de efeitos, incluindo os que não passam bem para a web, veja efeitos de texto. E se você está decidindo se precisa mesmo de lettering, lettering ou tipografia é uma leitura útil.