Efeito de texto vazado: letras ocas que ainda se leem

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.

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 traz mais.

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ô 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.
• Contorno ao passar o mouse ou em um segundo estado: na web, um botão ou link vazado que se preenche quando selecionado.

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 traz os detalhes.

.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;
}

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

1. 1

   Escolha a palavra

   Uma ou duas palavras que carreguem a mensagem, nunca uma frase.

2. 2

   Componha pesada e grande

   Um peso black em tamanho de título. O letreiro contornado não é para texto corrido.

3. 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. 4

   Tire a cor do fundo

   Use seu tom mais claro ou mais escuro para o traço pertencer ao design.

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