# Efeito de texto vazado: letras ocas que ainda se leem

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

Letras vazadas ficam nítidas num pôster e somem no celular mais que qualquer outro efeito. Veja como escolher a fonte, o traço e o layout para que aguentem, com CSS que funciona em todo navegador.

## The short version

- O efeito de texto contornado desenha só a borda de cada letra, deixando o interior vazado para o fundo aparecer.
- O texto contornado se lê melhor numa sans pesada ou numa slab de formas abertas, em tamanho grande, com um traço de cerca de 2 a 4 por cento do tamanho da fonte.
- Combinar uma palavra contornada com uma palavra sólida dá ao leitor uma âncora e mantém o contorno como ritmo e não como a mensagem toda.
- Em CSS, o texto contornado é feito com -webkit-text-stroke e uma cor transparente, o que todos os principais navegadores suportam.
- Evite contornar texto pequeno, pesos finos ou fontes cursivas, porque os traços finos são a primeira coisa que a tela do celular perde.

O **efeito de texto contornado** mostra só a borda de cada letra, com o interior vazado para o fundo aparecer. Funciona quando três condições se cumprem: uma fonte pesada de formas abertas, um traço grosso o bastante para se ler como linha (cerca de 2 a 4 por cento do tamanho da fonte) e um tamanho grande com um fundo calmo atrás. O layout mais confiável combina uma palavra sólida com uma contornada, para o olho ter algo firme para ler primeiro.

## Por que o texto contornado é difícil de ler

Reconhecemos as letras pelas formas sólidas. Um contorno tira essa massa e deixa duas linhas finas por traço, uma borda externa e uma interna. Em tamanhos grandes, o olho preenche a forma de novo. Em tamanhos pequenos, ou com um traço finíssimo, as duas linhas se embaçam uma na outra ou somem no fundo. Um fundo cheio de detalhes piora, porque o interior vazado mostra cada pedaço de textura.

### Falha

- Pesos leves ou regulares
- Traços finíssimos abaixo de 1 por cento do tamanho
- Fontes cursivas ou serifadas de alto contraste
- Frases inteiras contornadas
- Texto pequeno, abaixo de uns 60 px num post
- Uma foto detalhada aparecendo através das letras

### Funciona

- Pesos black, heavy ou extra bold
- Traços de cerca de 2 a 4 por cento do tamanho
- Fontes sans, slab ou grotescas robustas
- Uma ou duas palavras, o resto sólido
- Tamanhos de título, 120 px ou mais num post
- Um degradê calmo ou uma cor chapada atrás

## Escolhendo a fonte e o traço

Comece pelo peso. Uma fonte black ou extra bold tem traços largos, então seu contorno ainda descreve uma forma clara. Letras abertas também ajudam: os miolos redondos de O, A e e continuam visíveis em vez de se fecharem. Fontes como Archivo Black, Anton ou uma grotesca pesada são bons pontos de partida; [fontes em negrito](https://gradiently.design/pt-br/guide/bold-fonts) traz mais.

| Tamanho da fonte | Espessura do traço | Uso |
| --- | --- | --- |
| 60 px | 2 px | O menor tamanho para uma palavra vazada, e só sobre fundo chapado |
| 120 px | 3 to 4 px | Títulos de posts sociais com 1080 px de largura |
| 200 px | 5 to 7 px | Palavras únicas grandes e linhas de pôster |
| 400 px | 10 to 14 px | Palavras de fundo gigantes e banners |

Espessuras de traço de cerca de 2 a 4 por cento do tamanho da fonte. Engrosse em pesos leves; afine só se as letras começarem a entupir.

A cor importa tanto quanto a espessura. Um traço claro sobre fundo escuro se lê mais fácil que um traço escuro sobre fundo claro, porque linhas claras parecem se espalhar um pouco. Tire a cor do traço da parte mais clara ou mais escura do fundo para que pareça parte do design. Se o fundo é um degradê, confira o traço onde o fundo fica mais próximo da cor do traço; é onde o contorno some primeiro.

## Layouts onde o texto contornado funciona

- **Par sólido e vazado**: *Verão* sólido, *Sessões* contornado. A palavra sólida ancora, o contorno acrescenta ritmo.
- **Palavra repetida**: a mesma palavra empilhada três ou quatro vezes, uma sólida e as outras contornadas, para dar sensação de eco ou movimento. [Efeitos de texto retrô](https://gradiently.design/pt-br/guide/retro-text-effect) cobre os visuais relacionados de duplo e rastro.
- **Palavra de fundo**: uma palavra contornada enorme atrás de um título sólido menor, funcionando como textura e não como texto. Para profundidade em vez de vazado, veja o [efeito de texto 3D](https://gradiently.design/pt-br/guide/3d-text-effect).
- **Contorno ao passar o mouse ou em um segundo estado**: na web, um botão ou link vazado que se preenche quando selecionado.

Um post vertical com a palavra Sessões bem grande e uma pequena linha acima com a palavra Verão

Uma palavra grande, a forma que as letras contornadas pedem: curta e pesada, com pequenos detalhes sólidos embaixo.

Um story vertical de uma série de música de verão com a palavra Sessões como título

A mesma palavra num story. O quadro alto deixa espaço para repeti-la página abaixo, uma cópia sólida e as outras vazadas.

## Como fazer texto contornado em CSS

A propriedade é `-webkit-text-stroke`. Apesar do prefixo, funciona em todos os principais navegadores e faz parte do padrão de compatibilidade da web. Defina a cor do texto como transparente para uma palavra vazada ou mantenha um preenchimento para uma letra sólida com borda. A [referência da MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke) traz os detalhes.

```css
.outline {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 1;
  color: #fafaf9; /* fallback: solid letters */
}

@supports (-webkit-text-stroke: 1px black) {
  .outline {
    color: transparent;
    -webkit-text-stroke: 0.03em #fafaf9; /* about 3% of the size */
  }
}

/* Solid and hollow pair */
.outline-pair .solid { color: #fafaf9; }
.outline-pair .hollow {
  color: transparent;
  -webkit-text-stroke: 0.03em #fafaf9;
}
```

Um traço em `em` escala com o tamanho da fonte. O bloco `@supports` mantém letras sólidas onde a propriedade não está disponível.

> **O traço come a letra** O CSS desenha o traço centrado na borda da letra, então metade dele cai para dentro. Traços grossos numa palavra preenchida a deixam mais fina e podem fechar miolos pequenos. No SVG, `paint-order: stroke` desenha o traço atrás do preenchimento e evita isso.

Leitores de tela leem o texto contornado normalmente, já que continua sendo texto de verdade. Mantenha-o real: não achate títulos contornados em imagens num site. O contraste é o risco que resta, porque as ferramentas medem a cor do texto, que agora é transparente. Confira o traço contra o fundo a olho e com um verificador de contraste na cor do traço. [Contraste de cores e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility) cobre as razões.

## Traço externo e inline: dois estilos de letreiro parentes

O letreiro contornado tem parentes que mantêm mais da forma sólida. Um **traço externo** desenha uma linha ao redor de fora de uma letra sólida, separando-a do fundo como a borda de um adesivo. Um **inline** corta uma linha fina dentro de cada traço, o visual das fontes de exibição gravadas e vitorianas, e de muita placa de loja. Os dois se leem com mais facilidade que uma palavra totalmente vazada, então são uma boa escolha quando as palavras precisam funcionar em tamanhos menores. Para a família mais ampla de tratamentos, veja [efeitos de texto](https://gradiently.design/pt-br/guide/text-effects).

1. **Escolha a palavra** Uma ou duas palavras que carreguem a mensagem, nunca uma frase.
2. **Componha pesada e grande** Um peso black em tamanho de título. O letreiro contornado não é para texto corrido.
3. **Escolha vazado, traço externo ou inline** Vazado para o drama, traço externo para destacar uma palavra de um fundo cheio, inline para um ar artesanal, de letreiro.
4. **Tire a cor do fundo** Use seu tom mais claro ou mais escuro para o traço pertencer ao design.
5. **Confira no celular** Veja o post em tamanho real. Se o contorno piscar ou sumir, engrosse o traço ou preencha a palavra.

Os tratamentos de Lettering do Gradiently cobrem essa família sem você montar camadas à mão: Interno entalha uma linha dentro de cada letra, Duplo desenha letras abertas duas vezes, Rastro deixa contornos se arrastando atrás e Contorno cerca as palavras com linhas de nível. Como o Mark por trás do design move sua região mais calma para trás das palavras, um título vazado ou com inline ganha o fundo firme de que precisa. O lettering em degradê é uma técnica à parte, tratada em [texto em degradê com CSS](https://gradiently.design/pt-br/guide/css-gradient-text).

## FAQ

### Como faço texto contornado em CSS?

Defina `color: transparent` e `-webkit-text-stroke: 0.03em #ffffff` no texto. A propriedade com prefixo funciona em todos os principais navegadores.

### Qual a melhor fonte para texto contornado?

Uma sans ou slab pesada de formas abertas, como Archivo Black ou Anton. Pesos finos e cursivas se desmancham quando contornados.

### Que espessura deve ter o contorno de um texto?

Cerca de 2 a 4 por cento do tamanho da fonte: uns 3 a 4 px para um título de 120 px.

### O texto contornado é acessível?

Os leitores de tela o leem normalmente, mas ele pode falhar no contraste. Use só em palavras grandes e confira a cor do traço contra o fundo.