# Efeito de texto com contorno: letras vazadas que ainda se leem

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

As letras vazadas ficam afiadas num cartaz e desaparecem no telemóvel mais vezes do que qualquer outro efeito. Aqui fica como escolher o tipo, o traço e a composição para aguentarem, com CSS que funciona em todos os navegadores.

## The short version

- O efeito de texto com contorno desenha apenas a margem de cada letra, deixando o interior vazado para o fundo aparecer.
- O texto com contorno lê-se melhor num tipo sem serifa pesado ou serifa slab de formas abertas, em tamanho grande, com um traço de cerca de 2 a 4 por cento do tamanho da letra.
- Combinar uma palavra com contorno e 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 com contorno faz-se com -webkit-text-stroke e uma cor transparente, que todos os principais navegadores suportam.
- Evita contornar texto pequeno, pesos finos ou tipos manuscritos, porque os traços finos são a primeira coisa que o ecrã de um telemóvel perde.

O **efeito de texto com contorno** mostra apenas a margem de cada letra, com o interior vazado para o fundo aparecer. Lê-se quando se cumprem três condições: um tipo pesado de formas abertas, um traço grosso o suficiente para se ler como linha (cerca de 2 a 4 por cento do tamanho da letra) e um tamanho grande com um fundo calmo por trás. A composição mais fiável junta uma palavra sólida com uma palavra contornada, para o olhar ter algo firme para ler primeiro.

## Porque é que o texto com contorno é difícil de ler

Reconhecemos as letras pelas suas formas sólidas. Um contorno tira essa massa e deixa duas linhas finas por cada traço, uma margem exterior e uma interior. Em tamanhos grandes o olhar volta a preencher a forma. Em tamanhos pequenos, ou com um traço finíssimo, as duas linhas esborratam-se ou desaparecem no fundo. Um fundo carregado piora tudo, porque o interior vazado mostra cada pedaço de textura.

### Falha

- Pesos leves ou normais
- Traços finíssimos abaixo de 1 por cento do tamanho
- Tipos manuscritos ou serifados de alto contraste
- Frases inteiras contornadas
- Texto pequeno abaixo de cerca de 60 px numa publicação
- Uma fotografia detalhada a aparecer através das letras

### Aguenta

- Pesos black, pesado ou extra negrito
- Traços de cerca de 2 a 4 por cento do tamanho
- Tipos sem serifa robustos, slab ou grotescos
- Uma ou duas palavras, o resto sólido
- Tamanhos de título, 120 px ou mais numa publicação
- Um gradiente calmo ou cor lisa por trás

## Escolher o tipo de letra e o traço

Começa pelo peso. Um tipo black ou extra negrito tem traços largos, por isso o seu contorno ainda descreve uma forma clara. As letras abertas também ajudam: os miolos redondos em O, A e e continuam visíveis em vez de se fecharem. Tipos como Archivo Black, Anton ou um grotesco pesado são bons pontos de partida; [fontes a negrito](https://gradiently.design/pt-pt/guide/bold-fonts) tem mais.

| Tamanho da letra | Largura do traço | Uso |
| --- | --- | --- |
| 60 px | 2 px | O mínimo a que uma palavra vazada deve descer, e só sobre fundo liso |
| 120 px | 3 a 4 px | Títulos de publicações sociais com 1080 px de largura |
| 200 px | 5 a 7 px | Grandes palavras soltas e linhas de cartaz |
| 400 px | 10 a 14 px | Palavras de fundo gigantes e banners |

Larguras de traço a cerca de 2 a 4 por cento do tamanho da letra. Engrossa nos pesos leves; só afina se as letras começarem a entupir.

A cor importa tanto como a largura. Um traço claro sobre fundo escuro lê-se com mais facilidade do que um traço escuro sobre fundo claro, porque as linhas claras parecem espalhar-se ligeiramente. Tira a cor do traço da parte mais clara ou mais escura do fundo para parecer parte do design. Se o fundo for um gradiente, verifica o traço onde o fundo está mais próximo da cor do traço; é aí que o contorno vai desaparecer primeiro.

## Composições onde o texto com contorno 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 restantes contornadas, para dar sensação de eco ou movimento. [Efeitos de texto retro](https://gradiently.design/pt-pt/guide/retro-text-effect) trata dos visuais relacionados de duplo e rasto.
- **Palavra de fundo**: uma palavra enorme contornada atrás de um título sólido mais pequeno, a fazer de textura e não de texto. Para profundidade em vez de vazio, vê [efeito de texto 3D](https://gradiently.design/pt-pt/guide/3d-text-effect).
- **Contorno ao passar o rato ou noutro estado**: na web, um botão ou ligação vazados que se preenchem quando selecionados.

Uma publicação vertical com a palavra Sessões muito grande e uma pequena linha superior a dizer Verão por cima

Uma palavra grande, a forma que o texto com contorno pede: curta e pesada, com pequenos detalhes sólidos por baixo.

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

A mesma palavra num story. O enquadramento alto deixa espaço para a repetir ao longo da página, uma cópia sólida e as restantes vazadas.

## Como fazer texto com contorno 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. Define a cor do texto como transparente para uma palavra vazada, ou mantém um preenchimento para uma letra sólida com margem. A [referência da MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke) tem 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 letra. O bloco `@supports` mantém letras sólidas onde a propriedade não existe.

> **O traço come a letra** O CSS desenha o traço centrado na margem da letra, por isso metade cai para dentro. Traços grossos numa palavra preenchida fazem-na parecer mais fina e podem fechar miolos pequenos. Em SVG, `paint-order: stroke` desenha o traço atrás do preenchimento e evita isto.

Os leitores de ecrã leem o texto com contorno normalmente, porque continua a ser texto real. Mantém-no real: não transformes títulos com contorno em imagens num site. O contraste é o risco que resta, porque as ferramentas medem a cor do texto, que agora é transparente. Verifica o traço contra o fundo a olho e com um verificador de contraste na cor do traço. [Contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) trata das razões.

## Traço exterior e inline: dois estilos de letras relacionados

As letras com contorno têm parentes que guardam mais da forma sólida. Um **traço exterior** desenha uma linha à volta de uma letra sólida, separando-a do fundo como a margem de um autocolante. Um **inline** corta uma linha fina dentro de cada traço, o aspeto do tipo de exibição gravado e vitoriano, e de muitos letreiros de lojas. Ambos se leem com mais facilidade do que uma palavra totalmente vazada, por isso são boa escolha quando as palavras precisam de funcionar em tamanhos mais pequenos. Para a família mais ampla de tratamentos, vê [efeitos de texto](https://gradiently.design/pt-pt/guide/text-effects).

1. **Escolhe a palavra** Uma ou duas palavras que carreguem a mensagem, nunca uma frase.
2. **Compõe-na pesada e grande** Um peso black em tamanho de título. As letras com contorno não são para texto corrido.
3. **Escolhe vazado, traço exterior ou inline** Vazado para o drama, um traço exterior para levantar uma palavra de um fundo carregado, inline para um ar artesanal, de sinalética.
4. **Tira a cor do fundo** Usa o seu tom mais claro ou mais escuro para o traço pertencer ao design.
5. **Verifica no telemóvel** Vê a publicação em tamanho real. Se o contorno tremeluzir ou desaparecer, engrossa o traço ou preenche a palavra.

Os tratamentos de Lettering do Gradiently cobrem esta família sem construíres camadas à mão: o Interior corta uma linha dentro de cada letra, o Duplo desenha letras abertas duas vezes, o Rasto deixa contornos a arrastar atrás e o Contorno cerca as palavras com linhas de nível. Como o Mark por trás do design move a sua zona mais calma para trás das palavras, um título vazado ou com inline recebe o fundo estável de que precisa. O lettering em gradiente é uma técnica à parte, tratada em [texto com gradiente em CSS](https://gradiently.design/pt-pt/guide/css-gradient-text).

## FAQ

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

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

### Que tipo de letra é melhor para texto com contorno?

Um sem serifa ou slab pesado de formas abertas, como o Archivo Black ou o Anton. Os pesos finos e os manuscritos desfazem-se quando contornados.

### Que espessura deve ter o contorno do texto?

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

### O texto com contorno é acessível?

Os leitores de ecrã leem-no normalmente, mas pode falhar no contraste. Usa-o só para palavras grandes e verifica a cor do traço contra o fundo.