Sombra de texto: quando ajuda e melhores alternativas

Uma sombra de texto ajuda em duas situações: como estilo deliberado, geralmente uma sombra dura deslocada alguns píxeis e sem desfocagem, e como fino contorno de segurança em legendas sobre vídeo em movimento. Como salvação para palavras que não se leem numa fotografia ou num gradiente, costuma prejudicar: sombras suaves e brilhos esborratam os contornos que o olho usa para reconhecer letras e datam um design de imediato. Para ganhar legibilidade, muda as palavras para uma zona mais calma, junta um véu em gradiente, dá um tom ao fundo ou escolhe um peso mais forte.

Tipos de efeito de sombra no texto

Quando uma sombra de texto ajuda

Como estilo duro e deslocado

Uma sombra sem desfocagem, deslocada uns poucos por cento da altura da letra e numa cor contrastante da paleta, é um estilo tipográfico com longa história em cartazes, embalagens e sinalética. Passa confiança e um toque de nostalgia. Trata-a como qualquer efeito: um por design, poucas palavras grandes, um tipo de letra pesado. Efeitos de texto compara-a com os outros tratamentos. Efeito de texto retro mostra os seus primos próximos, o duplo e o rasto.

Atrás de legendas em vídeo

Legendas e subtítulos ficam sobre imagens que mudam a cada fotograma, por isso não podes escolher uma zona calma. Uma sombra curta e escura ou um contorno fino mantém as legendas brancas legíveis quando uma janela brilhante passa por trás. Mantém-na junto às letras: desfocagem curta e pouco ou nenhum desvio. Design de legendas de vídeo trata do tamanho e da posição.

Quando uma sombra de texto prejudica

O problema de usar uma sombra para corrigir o contraste é que trata o sintoma. O fundo continua agitado; apenas juntaste uma mancha à volta das letras. Os brilhos suaves são o pior caso, porque espalham uma nuvem desfocada para lá de cada letra e amaciam o contorno que define a sua forma. Nas publicações sociais comprimem-se mal e transformam-se em faixas manchadas.

Melhores alternativas à sombra de texto

1. 1

   Muda as palavras

   Encontra a zona mais calma e uniforme do fundo e põe lá o texto. Isto resolve a maioria dos problemas antes de surgirem.

2. 2

   Junta um véu em gradiente

   Um desvanecer suave de escuro para transparente ao longo de um bordo dá contraste sem uma forma visível. Texto legível em fotografias tem códigos de véus.

3. 3

   Acalma o fundo

   Dá a uma fotografia um tom de uma ou duas cores, baixa-lhe os realces ou escolhe um gradiente com uma zona mais sossegada.

4. 4

   Reforça a letra

   Sobe um peso e um tamanho. Uma sem serifa forte em tamanho generoso não precisa de ajuda na maioria dos fundos.

5. 5

   Muda a tinta

   Por vezes, texto escuro numa zona clara vence texto branco com sombra. Escolhe a tinta por linha e não para o design inteiro.

Nos gradientes em particular, o fundo fica muitas vezes mais claro ou mais escuro ao longo do quadro, por isso uma só cor de tinta não serve todas as linhas. Texto sobre gradiente mostra como planear isso, e letra em fundos agitados trata de padrões e texturas.

Sombra de texto em CSS

A propriedade CSS text-shadow recebe um desvio horizontal, um desvio vertical, um raio de desfocagem opcional e uma cor. Separa várias sombras com vírgulas; a primeira da lista fica por cima. Usa unidades em para a sombra acompanhar o tamanho da letra. A referência completa está na MDN.

/* Hard offset style: no blur, colour from the palette */
.headline-offset {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #9a3412;
}

/* Tight caption edge for text over video */
.caption {
  color: #ffffff;
  text-shadow: 0 0 0.12em rgb(0 0 0 / 0.9), 0 0.04em 0.08em rgb(0 0 0 / 0.8);
}

/* Preferred fix for readability: a scrim, not a shadow */
.hero {
  background:
    linear-gradient(0deg, rgb(15 23 42 / 0.8) 0%, rgb(15 23 42 / 0) 55%),
    url("/images/hero.jpg") center / cover;
}

Os verificadores automáticos de contraste comparam a cor do texto com a cor do fundo e ignoram a sombra. Se uma ferramenta marcar o teu texto com contraste baixo, uma sombra pode melhorar o aspeto no teu ecrã, mas não altera a medição. Corrige antes o fundo ou a tinta. CSS de sombra de texto tem mais receitas para a web.

Como o Gradiently trata a legibilidade

O Gradiently nasceu da ideia de que as palavras não deviam precisar de ser salvas. Um Mark sabe onde estão as palavras: a sua zona mais calma e de melhor contraste desloca-se para trás do texto, as cores junto às letras escurecem ou clareiam e o detalhe agitado suaviza-se. A Tinta automática escolhe depois letra clara ou escura para cada linha, a partir da paleta do próprio Mark. Não há caixas, sombras nem desfocagem, e escolhes a intensidade da resposta do Mark. Se queres profundidade como estilo, o tratamento de lettering Extrusão dá letras profundas nas cores do Mark e o Duplo desenha letras abertas duas vezes, ambos nítidos e sem desfocagem.