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

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.

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

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 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.
• Contorno ao passar o rato ou noutro estado: na web, um botão ou ligação vazados que se preenchem quando selecionados.

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

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

1. 1

   Escolhe a palavra

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

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

   Tira a cor do fundo

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

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