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

[Canonical HTML page](https://gradiently.design/pt-br/guide/lettering-treatments)

Um tratamento transforma uma linha de texto em lettering, desenhado nas cores do seu Mark. Aqui estão os oito, com os trabalhos em que cada um se sai bem e os que é melhor evitar.

## The short version

- O Gradiently tem oito efeitos de lettering: Contorno, Interno, Recorte, Extrusão, Duplo, Rastro, Riso e Halo.
- Cada tratamento é desenhado nas cores do Mark do design, então o lettering sempre pertence ao fundo.
- Os efeitos de lettering funcionam melhor em palavras curtas de destaque, como um título, um nome ou uma palavra só, e não em texto corrido.
- Contorno, Recorte e Extrusão têm contraste próprio e combinam com cartazes fortes; Interno, Duplo e Riso combinam com visuais editoriais e de impressão.
- Use um tratamento por design, na linha que mais importa, e deixe o texto de apoio simples.

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

| Tratamento | O que desenha | Lembra | Melhor para |
| --- | --- | --- | --- |
| **Contorno** | Linhas de elevação ondulando ao redor das palavras | Mapas, topografia, som | Cartazes de festival, capas de álbum, marcas de aventura |
| **Interno** | Uma linha entalhada dentro de cada letra, para o Mark aparecer como segunda cor | Letreiros, impressão vintage | Títulos estilo fachada de loja, cardápios, rótulos |
| **Recorte** | Palavras recortadas de uma chapa sólida | Estêncil, papel recortado | Capas fortes, posts de promoção, frases de uma palavra |
| **Extrusão** | Letras profundas com laterais nas cores do Mark | Sólido, escultural, retrô | Títulos de eventos, lançamentos, thumbnails do YouTube |
| **Duplo** | Letras vazadas desenhadas duas vezes, levemente afastadas | Eco, movimento, moda | Capas editoriais, música, vida noturna |
| **Rastro** | Contornos arrastando atrás das letras, com uma cor de rastro que você define | Velocidade, movimento, anos 1970 | Esporte, contagens regressivas, stories cheios de energia |
| **Riso** | Duas tintas levemente fora de registro, com pontilhado granulado | Zines em risografia, impressão independente | Cartazes, zines, padarias, livrarias |
| **Halo** | Uma luz suave na cor do Mark em volta das letras | Neon, entardecer, sonho | Só decoração, nunca para corrigir legibilidade |

Os oito tratamentos. Cada um sai da paleta do Mark, então trocar o Mark recolore o lettering junto.

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

Um cartaz retrato com a palavra Solstício em tamanho enorme sobre um Mark em degradê quente

Uma palavra, enorme: a escala para a qual o Contorno e a Extrusão foram feitos.

O mesmo design Solstício como cartaz de evento, com o título grande e os detalhes de apoio simples embaixo

O título tratado no alto, com os detalhes simples embaixo. Só o título recebe o efeito.

Se você quer entender como funcionam o texto com extrusão e o texto contornado em geral, [efeitos de texto 3D](https://gradiently.design/pt-br/guide/3d-text-effect) e [texto com contorno](https://gradiently.design/pt-br/guide/outline-text) 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.

> **Combine o tratamento com a fonte** Interno e Recorte precisam de traços grossos, então use com uma fonte de display pesada. Duplo e Rastro ficam melhores em letras abertas e simples. O Riso perdoa quase qualquer fonte, o que faz dele uma primeira tentativa segura.

## 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](https://gradiently.design/pt-br/guide/auto-ink-legibility) escolher a outra tinta.

## Como escolher o efeito de lettering para cada trabalho

| Você está criando | Teste primeiro | Depois teste |
| --- | --- | --- |
| Um cartaz de show ou festival | Contorno | Riso |
| Um post de lançamento de produto | Extrusão | Recorte |
| O título do cardápio de um café ou padaria | Interno | Riso |
| Uma thumbnail do YouTube | Extrusão | Recorte |
| Uma capa estilo revista ou a abertura de um carrossel | Duplo | Interno |
| Uma contagem regressiva ou um story de esporte | Rastro | Extrusão |
| Um zine ou cartaz de livraria | Riso | Duplo |

Pontos de partida, não regras. Teste dois, veja os dois no tamanho em que as pessoas vão realmente ver e fique com o que se lê primeiro.

### Evite

- Um tratamento em texto corrido ou detalhes pequenos
- Dois tratamentos diferentes no mesmo design
- Títulos longos, de oito palavras ou mais
- Halo usado para deixar legível uma linha fraca

### Faça

- Um tratamento em uma ou duas palavras de destaque
- Texto de apoio simples e bem espaçado
- Fontes pesadas para Interno e Recorte
- Confira no celular, no tamanho real

## Como adicionar um efeito de lettering no Studio

1. **Selecione o texto** Escolha o título ou a palavra que você quer tratar. Deixe todo o resto como texto simples.
2. **Escolha um tratamento** Escolha um dos oito tratamentos de lettering. Ele aparece na hora, nas cores do Mark do design.
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. **Teste outro Mark** Troque o Mark e veja o lettering mudar de cor junto. É o jeito mais rápido de avaliar um tratamento.
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.

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

Sombras de borda dura, sem desfoque, constroem profundidade em vez de brilho. O `-webkit-text-stroke` funciona em todos os navegadores atuais; veja o [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke).

Para a família mais ampla de efeitos, incluindo os que não passam bem para a web, veja [efeitos de texto](https://gradiently.design/pt-br/guide/text-effects). E se você está decidindo se precisa mesmo de lettering, [lettering ou tipografia](https://gradiently.design/pt-br/guide/lettering-vs-typography) é uma leitura útil.

## FAQ

### Quais efeitos de lettering o Gradiently tem?

Oito: Contorno, Interno, Recorte, Extrusão, Duplo, Rastro, Riso e Halo, cada um desenhado nas cores do Mark do design.

### Posso usar efeitos de lettering em texto corrido?

É melhor não. Os tratamentos foram feitos para palavras curtas de destaque; o texto simples mantém os trechos longos fáceis de ler.

### Qual efeito de lettering é melhor para um cartaz?

Contorno, Extrusão e Riso são ótimas escolhas para cartaz. Contorno e Extrusão têm contraste próprio, e o Riso dá uma sensação de impresso.

### Os efeitos de lettering mudam de cor com o Mark?

Sim. Todo tratamento sai da paleta do Mark, então trocar o Mark recolore o lettering.

### Devo usar o Halo para deixar o texto mais legível?

Não. O Halo é decorativo. Para legibilidade, aumente o nível de reação do Mark ou deixe a tinta automática escolher a outra tinta.