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

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

Um tratamento transforma uma linha de texto numa peça de lettering, desenhada nas cores do teu Mark. Aqui estão os oito, com os trabalhos em que cada um é bom e os que convém evitar.

## The short version

- O Gradiently tem oito efeitos de lettering: Contorno, Interior, Recorte, Extrusão, Duplo, Rasto, Riso e Halo.
- Cada tratamento é desenhado nas cores do Mark do design, por isso o lettering pertence sempre ao fundo.
- Os efeitos de lettering funcionam melhor em palavras de exibição curtas, como um título, um nome ou uma única palavra, e não em texto corrente.
- O Contorno, o Recorte e o Extrusão trazem o seu próprio contraste e servem cartazes ousados; o Interior, o Duplo e o Riso servem visuais editoriais e de impressão.
- Usa um tratamento por design, na linha que mais importa, e mantém o texto de apoio simples.

O Gradiently tem oito **efeitos de lettering**: Contorno, Interior, Recorte, Extrusão, Duplo, Rasto, Riso e Halo. Cada um transforma uma linha de texto em lettering desenhado nas cores do teu Mark: linhas de nível a envolver as palavras, uma linha esculpida dentro de cada letra, palavras recortadas numa placa, letras tridimensionais profundas e mais. São para palavras de exibição, um título ou um nome, e funcionam melhor um de cada vez, na linha que mais queres que vejam.

## Os oito tratamentos de lettering de relance

| Tratamento | O que desenha | Sensação | Melhor para |
| --- | --- | --- | --- |
| **Contorno** | Linhas de nível que se propagam à volta das palavras | Mapas, topografia, som | Cartazes de festivais, capas de álbuns, marcas de ar livre |
| **Interior** | Uma linha esculpida dentro de cada letra, para o Mark se ver através como segunda cor | Sinalética, impressão vintage | Títulos ao estilo de montra, ementas, etiquetas |
| **Recorte** | Palavras recortadas numa placa sólida | Stencil, trabalho em papel | Capas ousadas, publicações de saldos, declarações de uma palavra |
| **Extrusão** | Letras profundas com laterais nas cores do Mark | Sólido, escultural, retro | Títulos de eventos, lançamentos, miniaturas do YouTube |
| **Duplo** | Letras abertas desenhadas duas vezes, ligeiramente afastadas | Eco, movimento, moda | Capas editoriais, música, vida noturna |
| **Rasto** | Contornos que seguem atrás das letras, com uma cor de rasto que podes definir | Velocidade, movimento, anos 1970 | Desporto, contagens decrescentes, stories enérgicos |
| **Riso** | Duas tintas ligeiramente desalinhadas, com um pontilhado granuloso | Fanzines de risografia, impressão independente | Cartazes, fanzines, padarias, livrarias |
| **Halo** | Uma luz suave na cor do Mark à volta das letras | Néon, crepúsculo, sonhador | Só decoração, nunca como solução de legibilidade |

Os oito tratamentos. Cada um é desenhado a partir da paleta do Mark, por isso mudar o Mark recolore o lettering.

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

Estes três incorporam nas letras um contorno forte, e é por isso que aguentam em Marks cheios de vida. O **Contorno** envolve as palavras com linhas como num mapa em relevo, para o lettering parecer erguer-se do fundo. O **Recorte** compõe as palavras como formas recortadas numa placa sólida, o que se lê como seguro e gráfico. O **Extrusão** dá profundidade a cada letra, desenhada nas cores do Mark, o visual clássico para um título de lançamento ou uma miniatura.

Um cartaz vertical com a palavra Solstício em tamanho muito grande sobre um Mark de gradiente quente

Uma palavra, muito grande: a escala para que o Contorno e o Extrusão foram feitos.

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

O título tratado no topo, com os pormenores simples por baixo. Só o título leva o efeito.

Se queres saber como funciona em geral a letra extrudida e com contorno, os [efeitos de texto 3D](https://gradiently.design/pt-pt/guide/3d-text-effect) e o [texto com contorno](https://gradiently.design/pt-pt/guide/outline-text) explicam o ofício por trás deles.

## Interior, Duplo e Riso: a família da impressão e do editorial

O **Interior** esculpe uma única linha dentro de cada letra, e como a linha mostra o próprio Mark, o fundo passa a ser a segunda cor do lettering. Serve melhor tipos de letra pesados e largos, onde há espaço dentro do traço. O **Duplo** desenha letras abertas duas vezes, ligeiramente deslocadas, para um eco que lembra a moda ou a impressão musical. O **Riso** imita uma risografia: duas tintas que não coincidem bem e um pontilhado granuloso, perfeito para tudo o que deva parecer impresso à mão.

> **Combina o tratamento com o tipo de letra** O Interior e o Recorte precisam de traços grossos, por isso emparelha-os com um tipo de exibição pesado. O Duplo e o Rasto ficam melhor em letras abertas e simples. O Riso perdoa quase qualquer tipo de letra, o que o torna uma primeira tentativa segura.

## Rasto e Halo: movimento e ambiente

O **Rasto** repete o contorno de uma palavra atrás dela, como letras que deixam um rasto. Podes definir a cor do rasto, e lê-se como velocidade: bom para desporto, contagens decrescentes e tudo o que deva parecer em movimento mesmo numa imagem parada. O **Halo** rodeia as letras com uma luz suave na cor do Mark. É puramente decorativo, um ambiente e não uma ferramenta, e nunca um modo de salvar texto difícil de ler. Se uma linha custa a ler, sobe o nível de reação do Mark ou deixa a [tinta automática](https://gradiently.design/pt-pt/guide/auto-ink-legibility) escolher a outra tinta.

## Escolher um efeito de lettering para o trabalho

| Estás a fazer | Experimenta primeiro | Depois experimenta |
| --- | --- | --- |
| Um cartaz de concerto ou festival | Contorno | Riso |
| Uma publicação de lançamento de produto | Extrusão | Recorte |
| O título da ementa de um café ou padaria | Interior | Riso |
| Uma miniatura do YouTube | Extrusão | Recorte |
| Uma capa ao estilo de revista ou a abertura de um carrossel | Duplo | Interior |
| Uma contagem decrescente ou um story de desporto | Rasto | Extrusão |
| Um fanzine ou um cartaz de livraria | Riso | Duplo |

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

### Evita

- Um tratamento em texto corrente ou em pormenores pequenos
- Dois tratamentos diferentes no mesmo design
- Títulos longos de oito palavras ou mais
- Usar o Halo para tornar legível uma linha fraca

### Faz

- Um tratamento numa ou duas palavras de exibição
- Texto de apoio simples e bem espaçado
- Tipos de letra pesados para o Interior e o Recorte
- Verificar no telemóvel, no tamanho real

## Como juntar um efeito de lettering no Studio

1. **Seleciona o texto** Escolhe o título ou a palavra que queres tratar. Mantém tudo o resto como letra simples.
2. **Escolhe um tratamento** Escolhe um dos oito tratamentos de lettering. É desenhado de imediato nas cores do Mark do design.
3. **Ajusta a letra** Usa um peso maior ou mais largo se o efeito parecer apertado, e junta um pouco de espaçamento entre letras no Duplo e no Rasto.
4. **Experimenta outro Mark** Troca o Mark e vê o lettering recolorir-se com ele. É a forma mais rápida de avaliar um tratamento.
5. **Verifica todos os tamanhos** Redimensiona para um story ou uma miniatura e confirma que a palavra tratada continua a ler-se a essa escala.

## Efeitos de lettering em CSS, para a web

Se precisares de um visual semelhante num site, dois destes traduzem-se bem para CSS: um contorno ao espírito do Duplo e uma extrusão por degraus. Ambos usam texto real, por isso 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;
}
```

As sombras de bordas duras e sem desfoque constroem profundidade e não um brilho. O `-webkit-text-stroke` é suportado em todos os navegadores atuais; vê a [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 se traduzem bem para a web, vê os [efeitos de texto](https://gradiently.design/pt-pt/guide/text-effects). E se estás a decidir se precisas mesmo de lettering, [lettering vs tipografia](https://gradiently.design/pt-pt/guide/lettering-vs-typography) é uma boa leitura.

## FAQ

### Que efeitos de lettering tem o Gradiently?

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

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

É melhor não. Os tratamentos são feitos para palavras de exibição curtas; a letra simples mantém o texto mais longo fácil de ler.

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

O Contorno, o Extrusão e o Riso são boas escolhas para cartazes. O Contorno e o Extrusão trazem o seu próprio contraste, e o Riso dá um ar de impresso.

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

Sim. Cada tratamento é desenhado a partir da paleta do Mark, por isso trocar o Mark recolore o lettering.

### Devo usar o Halo para tornar o texto mais fácil de ler?

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