Como tornar o texto legível em fotografias sem caixa

Para tornar o texto legível em fotografias sem o meter numa caixa, começa pela posição: encontra ou cria a zona mais calma da imagem e põe lá as palavras. Se não bastar, junta um degradé de apoio, um fade suave de transparente a escuro ao longo de uma margem, depois reduz o contraste da própria foto com uma cor e, por fim, torna a letra mais pesada e maior. Usadas por esta ordem, estas técnicas mantêm a foto intacta e as palavras claras. A caixa é um último recurso, não um ponto de partida.

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

Porque o texto se perde nas fotografias

O texto precisa de uma diferença de luminosidade entre as letras e o que está atrás. Uma fotografia muda de luminosidade a toda a hora: uma camisa branca ao lado de uma porta escura, folhas contra o céu. Sempre que uma letra passa de claro a escuro, parte dela desaparece. O detalhe fino agrava, porque o olho não separa a borda da letra da textura de fundo.

Seis formas de tornar o texto legível em fotografias

1. Escolhe e recorta para ganhar espaço vazio

A melhor solução acontece antes de escreveres uma palavra. Escolhe fotografias com uma zona vazia: céu, uma parede, um tampo de mesa, um fundo desfocado. Depois recorta para essa zona ficar onde vai o título. Uma publicação vertical de 1080×1350 dá-te espaço para empurrar o motivo para baixo e deixar o terço superior calmo. Se puderes, fotografa a pensar nisso: afasta-te e deixa espaço acima do motivo. Texto sobre fundos agitados trata de padrões e texturas que se comportam como fotografias agitadas.

2. Junta um degradé de apoio

Um degradé de apoio é um degradé posto sobre a foto, escuro na margem onde fica o texto e a esbater até ficar totalmente transparente. Como se esbate, o olho lê-o como luz que se desvanece e não como uma forma. Limita-o ao terço da imagem que contém as palavras e usa um tom escuro retirado da foto em vez de preto puro.

3. Aplica uma cor à foto

Aplicar uma ou duas cores a uma foto estreita a sua gama de claros e escuros, e o texto por cima lê-se melhor em todo o lado. Um duotone escuro, como do azul profundo ao lilás suave, funciona especialmente bem atrás de letra branca; o efeito duotone mostra como o construir. Aplicar uma cor também faz um conjunto de fotografias díspares parecer da mesma marca.

4. Escurece ou clareia localmente

A maioria dos editores de fotografia permite baixar a exposição ou as luzes numa zona. Baixar um céu brilhante em um ponto, mesmo atrás do título, muitas vezes basta por si só e é invisível para quem não viu o original.

5. Torna a letra mais robusta

A letra fina e pequena é a primeira a desaparecer. Usa um peso seminegrito ou negrito, sobe um tamanho e abre ligeiramente o espaçamento nas linhas pequenas. Uma sem serifa pesada a 110 px aguenta-se sobre uma foto onde uma serifada leve a 70 px nunca aguentaria. As fontes a negrito listam tipos de confiança.

6. Põe a foto ao lado das palavras

Por vezes a resposta honesta é não sobrepor de todo. Recorta a foto num círculo, arco ou metade do quadro e põe as palavras num fundo liso ou em degradé ao lado. A foto fica inteira e as palavras ganham contraste perfeito.

Que técnica serve que fotografia

Como juntar uma sobreposição em degradé a uma imagem em CSS

Num site, põe o degradé e a foto numa só declaração background. O degradé vai primeiro para ficar por cima. Isto mantém o efeito em CSS, por isso adapta-se a qualquer recorte que o layout faça.

.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 */
}

Verifica o resultado face às recomendações de contraste: cerca de 4,5 para 1 em texto normal e 3 para 1 em títulos grandes, como indica o guia de contraste da WebAIM. Testa o ponto mais claro atrás das palavras, não a média. Contraste de cor e acessibilidade explica os números.

Erros a evitar com texto sobre fotografias

Halos e brilhos à volta das letras são a tentativa de salvamento mais comum e a que parece mais barata. Desfocam as bordas das letras, o oposto do que a leitura precisa. Se tiveres a tentação, lê primeiro sombras de texto e melhores alternativas.

No Gradiently, as fotografias podem receber as cores do Mark em mono, duotone ou aguada, e ser recortadas em arcos, círculos e formas orgânicas para ficarem ao lado das palavras. Nos designs em que o Mark transparece, ele move a sua zona mais calma para trás do texto e a tinta automática escolhe letra clara ou escura para cada linha, sem caixas, sombras ou desfoque.