Sombra no texto: quando ajuda e alternativas melhores

A sombra no texto ajuda em duas situações: como estilo deliberado, em geral uma sombra dura deslocada alguns pixels e sem desfoque, e como borda de segurança fina em legendas sobre vídeo em movimento. Como resgate para palavras que não se leem sobre uma foto ou gradiente, costuma prejudicar: sombras suaves e brilhos borram justamente as bordas que o olho usa para reconhecer as letras e datam o design na hora. Para legibilidade, leve as palavras para uma área mais calma, acrescente um degradê de proteção, tinja o fundo ou escolha um peso maior.

Tipos de efeito de sombra no texto

Quando a sombra no texto ajuda

Como estilo duro e deslocado

Uma sombra sem desfoque, deslocada alguns por cento da altura da letra e numa cor de contraste da paleta, é um estilo tipográfico com longa história em pôsteres, embalagens e placas. Transmite confiança e um toque de nostalgia. Trate como qualquer efeito: um por design, poucas palavras grandes, uma fonte pesada. Efeitos de texto compara com os outros tratamentos. Efeitos de texto retrô mostra seus primos próximos, o duplo e o rastro.

Atrás de legendas em vídeo

Legendas ficam sobre imagens que mudam a cada quadro, então você não pode escolher uma área calma. Uma sombra escura e justa ou um contorno fino mantém legíveis as legendas brancas quando uma janela clara passa atrás delas. Mantenha-a rente às letras: desfoque curto e pouco ou nenhum deslocamento. Design de legendas em vídeo trata de tamanho e posição.

Quando a sombra no texto atrapalha

O problema de usar uma sombra para consertar o contraste é que ela trata o sintoma. O fundo continua agitado; você só acrescentou uma mancha em volta das letras. Brilhos suaves são os piores, porque espalham uma nuvem borrada além de cada letra e amolecem a borda que define sua forma. Em posts sociais também comprimem mal e viram faixas manchadas.

Alternativas melhores à sombra no texto

1. 1

   Mude as palavras de lugar

   Ache a área mais calma e uniforme do fundo e ponha o texto lá. Isso resolve a maioria dos problemas antes de começarem.

2. 2

   Acrescente um degradê de proteção

   Um fade suave do escuro para o transparente ao longo de uma borda dá contraste sem uma forma visível. Texto legível sobre fotos traz códigos de degradê.

3. 3

   Acalme o fundo

   Tinja uma foto em uma ou duas cores, reduza as altas luzes ou escolha um gradiente com uma região mais quieta.

4. 4

   Reforce o tipo

   Suba um peso e um tamanho. Uma sem serifa em negrito num tamanho generoso dispensa ajuda na maioria dos fundos.

5. 5

   Mude a tinta

   Às vezes texto escuro sobre uma área clara vence texto branco com sombra. Escolha a tinta por linha, não para o design inteiro.

Em gradientes especificamente, o fundo costuma ficar mais claro ou mais escuro ao longo do quadro, então uma única cor de tinta não serve para todas as linhas. Texto sobre gradiente mostra como planejar isso, e tipo sobre fundos agitados trata de padrões e texturas.

Sombra no texto em CSS

A propriedade CSS text-shadow aceita um deslocamento horizontal, um vertical, um raio de desfoque opcional e uma cor. Separe várias sombras com vírgulas; a primeira listada fica por cima. Use unidades em para a sombra acompanhar o tamanho da fonte. 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;
}

Verificadores automáticos de contraste comparam a cor do texto com a cor do fundo e ignoram a sombra. Se uma ferramenta apontar contraste baixo no seu texto, a sombra pode melhorar a aparência na sua tela, mas não muda a medição. Corrija o fundo ou a tinta. Sombra de texto em CSS tem mais receitas para a web.

Como o Gradiently trata a legibilidade

O Gradiently nasceu da ideia de que as palavras não deveriam precisar de resgate. Um Mark sabe onde estão as palavras: sua região mais calma e de melhor contraste vai para trás do texto, as cores perto das letras escurecem ou clareiam e o detalhe agitado relaxa. A Tinta automática então escolhe tipo claro ou escuro para cada linha, a partir da paleta do próprio Mark. Não há caixas, sombras nem desfoque envolvidos, e você escolhe a intensidade da resposta do Mark. Se quiser 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 desfoque.