Gerador de traços de texto CSS

De onde veio o contorno de texto CSS

A ideia de contornar um glifo precede o CSS por décadas; é nativa do PostScript (Adobe, 1984) e foi transportada para SVG 1.1 (Recomendação W3C, 2ª edição, 16 de agosto de 2011), que define os atributos de pintura stroke, stroke-width, stroke-linecap e stroke-linejoin para qualquer forma incluindo <text>. O CSS ganhou sua própria versão quando a Apple lançou -webkit-text-stroke no Safari 3 em junho de 2007, juntamente com -webkit-text-fill-color. A propriedade nunca foi padronizada em nenhuma spec W3C publicada; vive no Editor's Draft do Módulo CSS Text Decoration Nível 4 como text-stroke sem prefixo, mas em 2026 o nome sem prefixo ainda não está habilitado em nenhum navegador. Firefox 49 (20 de setembro de 2016) e Edge 15 (5 de abril de 2017) ambos adicionaram -webkit-text-stroke como alias explícito de compatibilidade web para lidar com páginas que usam apenas o nome com prefixo WebKit. Em produção, escreva o prefixo.

Três maneiras de contornar texto na web

Há mais de uma maneira de desenhar um contorno ao redor do texto. A ferramenta certa depende da largura, do orçamento de legibilidade e de se os glifos subjacentes precisam permanecer nítidos:

• -webkit-text-stroke, a propriedade que este gerador emite. Uma linha de CSS, composta por GPU, gratuita em qualquer framerate. O contorno é desenhado centralizado no contorno do glifo, metade dentro e metade fora, o que significa que contornos grossos começam a comer as formas das letras.
• text-shadow em quatro direções, o recurso universal que funciona em todos os navegadores até IE 10. text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; empilha quatro sombras de 1 pixel em cada canto para falsificar um contorno de 1 px. Definido no Módulo CSS Text Decoration Nível 3 (Candidate Recommendation W3C agosto de 2019). Em contornos mais largos, os artefatos em escada tornam-se visíveis; oito ou dezesseis direções podem suavizá-los ao custo de mais sombras.
• SVG <text> com paint-order: stroke fill;, a resposta certa quando você precisa de um contorno grosso sem que a tinta sangre dentro da letra. A propriedade paint-order desenha o contorno primeiro, depois o preenchimento por cima, então o preenchimento permanece em sua largura completa anunciada.

Acessibilidade: lógica de contraste, não ao texto de corpo, sim ao decorativo

O Critério de Sucesso WCAG 2.1 1.4.3 «Contraste (Mínimo)» (Recomendação W3C 5 de junho de 2018) exige contraste 4,5:1 para texto normal e 3:1 para texto grande (18 pt / 14 pt negrito). Com um contorno aplicado, a borda visualmente dominante do glifo é a cor do contorno, então a verificação de contraste tem que comparar essa cor com o fundo, não o preenchimento. Uma falha comum: um logotipo amarelo em branco com um contorno preto fino passa se você verificar preto vs. branco, mas o corpo da letra é amarelo em branco e se lê mal em tamanhos pequenos. Contornos destroem a legibilidade no texto de corpo. Abaixo de 16 px de tamanho de fonte, um contorno de 1 px preenche de 10 a 15 por cento do interior do glifo e um contorno de 2 px pode fechar as contraformas (os buracos em «a», «e», «o»). Reserve o contorno de texto para títulos, tipografia de display e uso decorativo; nunca o aplique ao texto de parágrafo sem testes explícitos em cada ponto de quebra.

Quando um contorno de texto é a ferramenta certa

• Títulos de quadrinhos e UI de jogos: o look clássico Marvel / Nintendo de contorno preto grosso sobre preenchimento brilhante.
• Marcas d'água e sobreposições decorativas: apenas contorno semi-transparente, sem preenchimento, sentado sobre imagens.
• Gráficos de tutorial, capturas de tela, chamadas onde o texto deve se destacar contra um fundo desconhecido.
• Botões «fantasma» onde o texto do botão usa um contorno e preenchimento transparente para sentir-se igualado em peso com o próprio botão com borda.
• Títulos apenas com contorno no design editorial, o look «letra oca» que foi grande no final da década de 2010.

Erros comuns

• Esquecer o prefixo -webkit-. O text-stroke sem prefixo está apenas em status de Editor's Draft e não foi enviado. Sempre escreva a forma com prefixo em produção.
• Tentar animar -webkit-text-stroke-width. Não está na lista de propriedades CSS animáveis. As transições vão «pular» em vez de interpolar. Anime text-shadow ou use SVG quando o movimento é necessário.
• Aplicar um contorno a texto pequeno. Abaixo de 16 px o contorno preenche o interior do glifo e fecha as contraformas. Defina uma guarda de tamanho de fonte mínimo com uma media query.
• Combinar contornos largos com letter-spacing apertado. O contorno cruza entre glifos adjacentes e produz manchas cinzas onde as formas se tocam.
• Contar a cor do contorno como a «cor do texto» em verificações de contraste. Tanto o preenchimento quanto o contorno devem passar WCAG 1.4.3 contra o fundo.
• Não testar folhas de estilo de impressão. Contornos podem renderizar dramaticamente mais grossos ou mais finos quando impressos, especialmente em navegadores que reduzem a escala da gama de cor para saída PDF.

Mais perguntas frequentes

Por que meu contorno parece mais grosso em uma tela Retina do que em um monitor 1080p?

Não é, em pixels CSS. Um contorno de 2px é exatamente 2 pixels CSS em ambos. O que muda é a nitidez percebida: em uma tela Retina (DPR 2×), um contorno de 2 pixels CSS é 4 pixels de dispositivo e anti-aliasing limpo. Em uma tela 1×, 2 pixels de dispositivo dão uma borda perceptivelmente mais embaçada. Se você precisa de uma linha fina que se ajuste a um pixel de dispositivo no Retina, escreva 0.5px; navegadores arredondam para um pixel de dispositivo em telas de alto DPR.

Posso ter uma cor de contorno diferente para cada letra?

Não com uma única declaração -webkit-text-stroke. Ou envolva cada letra em um <span> e estilize individualmente, ou use elementos SVG <tspan> com seu próprio atributo stroke. O pseudo-elemento ::first-letter aceita text-stroke se você só precisar que a primeira letra seja diferente.

Quão grosso é grosso demais para um contorno?

Um teto prático é cerca de 8 por cento do tamanho da fonte. A 100 px de fonte, isso é 8 px de contorno; além disso as letras começam a se sobrepor. Se você quer um visual de contorno mais grosso, use SVG <text> com paint-order: stroke fill; para que o preenchimento permaneça na largura original e o contorno se estenda apenas para fora.

-webkit-text-stroke funciona em emojis?

Em emojis coloridos (o padrão em navegadores modernos), o contorno aplica-se à silhueta exterior do glifo emoji. O resultado é geralmente sutil porque o emoji já tem seu próprio contorno e sombreamento. Para emojis em preto e branco (a variação de fonte text), o contorno aplica-se limpamente como qualquer outro glifo.

Algo é enviado a um servidor?

Não. O texto que você digita na pré-visualização, as cores que você escolhe e o CSS gerado são todos processados no JavaScript do seu navegador. Nenhuma chamada de rede é feita. Abra a aba Rede no DevTools para verificar.