# Efeitos de texto que não parecem datados: contorno, 3D e eco

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

A maioria dos efeitos de texto parece datada porque é aplicada em tudo, na força máxima, sem motivo. Usados em uma palavra, com o peso e a cor certos, estão entre as ferramentas mais expressivas da tipografia.

## The short version

- Efeitos de texto são tratamentos aplicados às letras, como contornos, linhas internas, extrusão, ecos deslocados, desalinhamento de impressão e brilhos.
- Os efeitos funcionam melhor em poucas palavras grandes, em um peso forte, onde dão personalidade sem dificultar a leitura.
- Os efeitos parecem datados quando são aplicados na força máxima em todas as linhas, empilhados ou usados para consertar uma tipografia fraca.
- Texto com contorno precisa de uma fonte grossa e simples e de um fundo calmo, porque as letras perdem a forma sólida.
- Escolha um efeito por design e tire as cores dele da paleta do fundo, para que pareça pensado e não acrescentado.

**Efeitos de texto** são tratamentos aplicados às letras, como um contorno, uma linha interna, uma extrusão 3D, um eco deslocado, um desalinhamento de impressão ou um brilho suave. Eles não parecem datados quando três regras valem: use um efeito por design, aplique em poucas palavras grandes com peso forte e tire as cores do fundo, não de uma predefinição. Os efeitos falham quando são empilhados, espalhados por todas as linhas ou usados para salvar uma tipografia que não estava funcionando.

Este guia mostra as principais famílias de efeito, quando cada uma combina com a mensagem, como mantê-las legíveis e como criar algumas em CSS. Se você ainda não escolheu a fonte, comece pelas [fontes display](https://gradiently.design/pt-br/guide/display-fonts), já que a maioria dos efeitos precisa de letras grandes e robustas para funcionar.

## Os principais tipos de efeito de texto

A maioria dos tratamentos de lettering pertence a algumas poucas famílias. Cada uma carrega suas próprias associações, e é por isso que escolher uma é, na verdade, escolher um tom de voz.

| Efeito | Como é | Tom que transmite | Risco para a leitura |
| --- | --- | --- | --- |
| Contorno | Letras desenhadas só com o traço | Leve, moderno, editorial | Alto em fundos carregados |
| Linha interna | Uma linha fina dentro de cada traço | Letreiro vintage, artesanal, esporte | Baixo em tamanhos grandes |
| Extrusão | Letras com profundidade 3D | Retrô, divertido, chamativo | Moderado |
| Duplo ou eco | Uma cópia deslocada ou um rastro atrás | Movimento, música, energia | Moderado |
| Recorte | Letras fatiadas e deslocadas | Tensão, moda, tecnologia | Moderado |
| Riso | Camadas de cor deslocadas, textura de impressão | Impresso independente, zines, calor | Baixo se o deslocamento for pequeno |
| Halo ou brilho | Luz suave em volta das letras | Noite, neon, luxo tranquilo | Baixo em fundos escuros |

Sete famílias de efeito de lettering. Quanto maior o risco, mais cuidado o efeito exige.

## Quando um efeito de texto ajuda e quando atrapalha

Um efeito ajuda quando carrega um sentido que as palavras sozinhas não carregam. Um eco atrás de *Alto* faz a palavra vibrar. Uma extrusão em um cardápio retrô situa o cardápio no tempo. Um brilho no pôster de um evento noturno sugere o ambiente. Quando o efeito não diz nada, vira enfeite, e enfeite envelhece rápido.

Um design vertical com uma palavra grande sobre um gradiente vivo, o tipo de layout que combina com um efeito de lettering

Uma palavra grande é onde um efeito ganha seu lugar: há pouco para ler e muito para sentir.

Um pôster de evento vertical com o título estilizado e os detalhes em texto simples sobre um gradiente escuro

Em um pôster de evento, o efeito fica só no título. Datas e detalhes continuam simples.

### Evite

- Um efeito no título e no texto corrido
- Contorno mais sombra mais brilho na mesma palavra
- Cores padrão, como uma sombra preta em tudo
- Fontes finas ou leves sob efeitos pesados
- Efeitos usados para fazer um texto fraco parecer empolgante

### Faça

- Um efeito, nas poucas palavras maiores
- Um tratamento por design, usado com convicção
- Cores do efeito tiradas da paleta do fundo
- Letras pesadas e simples que resistem ao efeito
- Um texto que funciona sem efeito e depois um efeito que acrescenta tom

## Como deixar o texto com contorno legível

O texto com contorno é o efeito com mais chance de falhar, porque tira a forma sólida que torna as letras fáceis de reconhecer. Use em uma sem serifa ou slab pesada, com formas abertas, em tamanhos grandes, sobre um fundo calmo. Deixe o traço grosso o bastante para ser lido como linha, não como fio de cabelo: algo entre 2 e 4 por cento do tamanho da fonte é um bom começo.

Um padrão confiável combina uma palavra sólida com uma palavra em contorno, como *Sessões* sólida e *de verão* em contorno. A palavra sólida ancora a leitura; o contorno acrescenta ritmo. Nunca use contorno em texto pequeno e confira no celular, onde os traços finos somem primeiro.

```css
/* Outline: a stroke, no fill. */
.outline {
  color: transparent;
  -webkit-text-stroke: 0.03em #f5f0ff;
}

/* Extrude: stacked shadows, each 1px further. */
.extrude {
  color: #fde8d0;
  text-shadow:
    1px 1px 0 #d9485f,
    2px 2px 0 #d9485f,
    3px 3px 0 #b83250,
    4px 4px 0 #b83250,
    5px 5px 0 #8f2442,
    6px 6px 0 #8f2442;
}

/* Echo: one offset copy in a palette colour. */
.echo {
  color: #ffffff;
  text-shadow: 0.06em 0.06em 0 #7c3aed;
}

/* Halo: a soft glow for dark grounds. */
.halo {
  color: #fff7ed;
  text-shadow: 0 0 0.25em rgb(251 146 60 / 0.55),
               0 0 0.8em rgb(244 114 182 / 0.35);
}
```

Quatro efeitos em CSS puro. O `-webkit-text-stroke` funciona em todos os principais navegadores, apesar do prefixo. Sombras em `em` acompanham o tamanho do texto.

> **Acessibilidade** Efeitos feitos em CSS mantêm as palavras como texto de verdade, então leitores de tela, buscadores e ferramentas de tradução continuam lendo o texto. Efeitos embutidos em imagens exigem que as palavras sejam repetidas no texto alternativo.

## Como escolher as cores dos efeitos de texto

Os efeitos parecem acrescentados quando as cores vêm do nada. Parecem pensados quando vêm do fundo. Tire a cor da lateral da extrusão da parte mais escura do gradiente, a do eco da cor mais saturada e a do brilho da mais clara. Assim o efeito parece luz e matéria da mesma cena.

- Fundo: violeta noturno: #1a1033
- Eco: violeta: #7c3aed
- Brilho: luz rosa: #f472b6
- Face da letra: branco quente: #fde8d0

Cores de efeito tiradas de um único gradiente: um fundo escuro, um eco saturado, um brilho e uma face de letra quente.

Mantenha a face da letra com alto contraste em relação ao fundo e deixe o efeito entre os dois em luminosidade. Assim o efeito acrescenta profundidade sem tirar contraste das letras. Para as regras de contraste por trás disso, veja [contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility).

## Efeitos de texto no Gradiently

O Studio do Gradiently traz oito tratamentos de Lettering: Contorno, Interno, Recorte, Extrusão, Duplo, Rastro, Riso e Halo. Um Mark também sabe onde estão as palavras: a região mais calma dele vai para trás delas, e a Tinta automática escolhe texto claro ou escuro para cada linha a partir da paleta do próprio Mark, o que dá a uma palavra tratada um fundo estável. As mesmas regras continuam valendo: um tratamento, poucas palavras, uma fonte pesada.

Um design quadrado com uma frase curta em tamanho grande sobre um gradiente calmo, com bastante espaço vazio

Uma única frase tratada sobre um campo calmo mostra a contenção fazendo o trabalho.

Para saber mais sobre como fazer o texto ser lido em fundos coloridos, leia [texto sobre gradiente](https://gradiently.design/pt-br/guide/text-on-gradient); para efeitos feitos com o próprio gradiente, veja [texto com gradiente em CSS](https://gradiently.design/pt-br/guide/css-gradient-text).

## FAQ

### Quais efeitos de texto parecem modernos?

Os contidos: um contorno grosso junto de uma palavra sólida, um eco pequeno e deslocado, um leve desalinhamento riso ou um brilho suave em fundo escuro, cada um usado em uma ou duas palavras grandes.

### Como faço texto com contorno em CSS?

Deixe a cor do texto transparente e adicione `-webkit-text-stroke` com uma espessura e uma cor, como `-webkit-text-stroke: 0.03em #ffffff`. Funciona em todos os principais navegadores.

### Como faço um efeito de texto 3D?

Empilhe várias camadas de `text-shadow`, cada uma deslocada um pixel a mais na mesma direção, escurecendo em direção ao fundo. Tire as cores do seu fundo para que a profundidade pareça iluminada pela mesma luz.

### Efeitos de texto atrapalham a leitura?

Podem atrapalhar. Limite os efeitos a palavras grandes e pesadas, um efeito por design, e confira se a face da letra ainda tem contraste forte com o fundo.