Como deixar o texto legível sobre fotos sem usar caixa

Para deixar o texto legível sobre fotos sem colocá-lo em uma caixa, comece pela posição: encontre ou crie a área mais calma da imagem e coloque as palavras ali. Se isso não bastar, adicione um degradê de proteção, uma transição suave de transparente para escuro ao longo de uma borda, depois reduza o contraste da própria foto com um filtro de cor e, por fim, use uma fonte mais grossa e maior. Nessa ordem, a foto fica intacta e as palavras ficam nítidas. A caixa é o último recurso, não o ponto de partida.

Esta página trata só da abordagem sem caixa. Para todas as técnicas, incluindo caixas, faixas e recortes, veja texto sobre imagem.

Por que o texto se perde nas fotos

O texto precisa de diferença de luminosidade entre as letras e o que está atrás delas. Uma foto muda de luminosidade o tempo todo: uma camisa branca ao lado de uma porta escura, folhas contra o céu. Sempre que uma letra passa do claro para o escuro, uma parte dela desaparece. Detalhes finos pioram tudo, porque o olho não consegue separar a borda da letra da textura ao fundo.

Seis jeitos de deixar o texto legível sobre fotos

1. Escolha e corte pensando no espaço vazio

A melhor solução vem antes de você digitar qualquer palavra. Escolha fotos com uma área vazia: céu, uma parede, uma mesa, um fundo desfocado. Depois corte a imagem para que essa área fique onde vai o título. Um post vertical de 1080×1350 dá espaço para empurrar o assunto para baixo e deixar o terço de cima calmo. Se puder, fotografe já pensando nisso: afaste-se e deixe espaço acima do assunto. Texto em fundos poluídos cobre padrões e texturas que se comportam como fotos cheias de elementos.

2. Adicione um degradê de proteção

O degradê de proteção é um gradiente aplicado sobre a foto, escuro na borda onde fica o texto e desaparecendo até ficar totalmente transparente. Como ele se dissolve, o olho o lê como queda de luz, não como uma forma. Limite-o ao terço da imagem que contém as palavras e use um tom escuro tirado da própria foto em vez de preto puro.

3. Aplique um filtro de cor na foto

Dar à foto um filtro de uma ou duas cores estreita a faixa entre claro e escuro, e assim o texto por cima se lê melhor em qualquer ponto. Um duotone escuro, como azul profundo para lilás suave, funciona especialmente bem atrás de texto branco; efeito duotone mostra como montar um. O filtro também faz um conjunto de fotos desencontradas parecer da mesma marca.

4. Escureça ou clareie só uma parte

A maioria dos editores de foto permite reduzir a exposição ou as altas luzes em uma área. Baixar um céu muito claro em um ponto de exposição, bem atrás do título, muitas vezes resolve sozinho e passa despercebido para quem não viu a original.

5. Deixe a fonte mais robusta

Fontes finas e pequenas são as primeiras a sumir. Use um peso semibold ou bold, aumente o tamanho e abra um pouco o espaçamento entre letras nas linhas pequenas. Uma sem serifa pesada em 110 px se sustenta sobre uma foto, o que uma serifada leve em 70 px nunca consegue. Fontes em negrito lista boas opções.

6. Coloque a foto ao lado das palavras

Às vezes a resposta honesta é não sobrepor nada. Corte a foto em círculo, arco ou metade do quadro e ponha as palavras em um fundo liso ou em degradê ao lado. A foto fica inteira e as palavras ganham contraste perfeito.

Qual técnica combina com cada foto

Como adicionar um degradê sobre uma imagem em CSS

Em um site, sobreponha o degradê e a foto em uma única declaração background. O degradê vem primeiro para ficar por cima. Assim o efeito fica no CSS e se adapta a qualquer corte que o layout fizer.

.hero {
  min-height: 70vh;
  display: grid;
  align-items: end;
  padding: 4rem;
  color: #fafaf9;
  background:
    linear-gradient(0deg, rgb(12 10 9 / 0.85) 0%, rgb(12 10 9 / 0.4) 35%, rgb(12 10 9 / 0) 65%),
    url("/images/terrace.jpg") center / cover no-repeat;
  background-color: #1c1917; /* fallback while the image loads */
}

Confira o resultado com as diretrizes de contraste: cerca de 4,5 para 1 para texto normal e 3 para 1 para títulos grandes, como descrito no guia de contraste da WebAIM. Teste o ponto mais claro atrás das palavras, não a média. Contraste de cores e acessibilidade explica os números.

Erros a evitar com texto sobre fotos

Halos e brilhos em volta das letras são a tentativa de resgate mais comum e a que parece mais barata. Eles borram as bordas das letras, o oposto do que a leitura precisa. Se bater a tentação, leia antes sombras de texto e alternativas melhores.

No Gradiently, as fotos podem receber as cores do Mark como mono, duotone ou lavagem, e ser cortadas em arcos, círculos e formas orgânicas para ficar ao lado das palavras. Nos designs em que o Mark aparece por baixo, ele leva sua área mais calma para trás do texto e a Tinta automática escolhe texto claro ou escuro para cada linha, sem caixas, sombras nem desfoque.