# Como tornar o texto legível em fotografias sem caixa

[Canonical HTML page](https://gradiently.design/pt-pt/guide/readable-text-on-photos)

Uma caixa sólida atrás do título funciona, mas faz todas as publicações parecerem um meme. Estas técnicas mantêm a fotografia inteira e as palavras claras, com código para a web e definições para publicações sociais.

## The short version

- A forma mais fiável de tornar o texto legível em fotografias é pôr as palavras sobre a zona mais calma e uniforme da imagem.
- Um degradé de apoio, um fade suave de transparente a escuro numa margem da foto, dá contraste ao texto sem uma caixa visível.
- Aplicar uma ou duas cores à foto reduz o seu contraste e detalhe, o que facilita a leitura de qualquer texto por cima.
- Letra mais pesada e maior resiste muito melhor a uma foto complexa do que letra fina ou pequena.
- O texto sobre fotografias deve cumprir as recomendações de contraste, cerca de 4,5 para 1 em texto pequeno e 3 para 1 em títulos grandes.

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](https://gradiently.design/pt-pt/guide/text-over-image).

## 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.

Publicação vertical em que o título corre sobre um fundo agitado e irregular, com partes das letras difíceis de ler

O problema num fundo de Mark: palavras postas diretamente sobre uma zona agitada perdem letras onde o fundo clareia.

A mesma publicação vertical com uma zona mais calma e uniforme atrás do título, para todas as palavras serem legíveis

As mesmas palavras com uma zona calma e uniforme atrás, o efeito que queres de um bom recorte. Sem caixa, e todas as letras se leem.

## 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](https://gradiently.design/pt-pt/guide/type-on-busy-backgrounds) 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.

- Apoio em baixo, preto quente: `linear-gradient(0deg, #0c0a09d9 0%, #0c0a0973 30%, #0c0a0900 60%)`
- Apoio em cima, azul-marinho: `linear-gradient(180deg, #0f172acc 0%, #0f172a00 45%)`
- Apoio lateral, para texto à esquerda: `linear-gradient(90deg, #1c1917d9 0%, #1c19174d 40%, #1c191700 65%)`

Três degradés de apoio mostrados sozinhos. Postos sobre uma foto, cada um escurece só a zona que contém as palavras e desvanece antes do motivo.

### 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](https://gradiently.design/pt-pt/guide/duotone-effect) 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](https://gradiently.design/pt-pt/guide/bold-fonts) 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

| Fotografia | Começa por | Depois |
| --- | --- | --- |
| Céu limpo ou parede lisa | Posição | Não é preciso mais nada |
| Motivo ao centro, margens agitadas | Recortar para libertar uma margem | Degradé de apoio nessa margem |
| Agitada por todo o lado (multidão, mercado, folhagem) | Cor ou duotone | Letra mais pesada |
| Produto claro, em tons altos | Letra escura na zona mais clara | Baixar as luzes localmente |
| Noite ou interior escuro | Letra branca sobre a zona mais escura | Ligeiro degradé se houver luzes sobre as palavras |
| Fotografia detalhada que não podes alterar | Foto ao lado das palavras | Uma cor partilhada que as una |

Começa pela técnica menos visível e pára assim que a linha mais pequena se ler.

## 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.

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

Um degradé de apoio em baixo sobre uma foto de capa, com uma cor de reserva escura para o texto se ler antes de a imagem chegar.

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](https://webaim.org/articles/contrast/). Testa o ponto mais claro atrás das palavras, não a média. [Contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) explica os números.

## Erros a evitar com texto sobre fotografias

### Evita

- Brilhos ou halos desfocados à volta de cada letra
- Uma sobreposição preta pesada sobre toda a foto
- Letra manuscrita fina sobre uma cena detalhada
- Pôr texto por cima de um rosto
- Corrigir um mau recorte com efeitos cada vez mais fortes

### Prefere

- Um degradé suave só numa margem
- Uma cor que preserve o ambiente da foto
- Um peso robusto num tamanho generoso
- Palavras no espaço ao lado do motivo
- Recortar de novo ou escolher outra foto

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](https://gradiently.design/pt-pt/guide/text-shadow-alternatives).

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.

## FAQ

### Como faço o texto destacar-se numa fotografia agitada?

Põe-no sobre a zona mais calma, junta um degradé suave nessa margem, aplica uma cor à foto para baixar o contraste e usa um peso mais pesado e maior.

### O que é um degradé de apoio em design?

Uma sobreposição em degradé que escurece ou clareia uma parte da imagem, esbatendo até ficar transparente, para o texto aí posto ter contraste suficiente.

### Devo usar uma sombra de texto para tornar o texto legível numa fotografia?

Um brilho ou halo suave costuma parecer barato e desfoca as letras. A posição, um degradé de apoio ou uma cor dão resultados mais limpos.

### Que razão de contraste precisa o texto numa fotografia?

Aponta a cerca de 4,5 para 1 em texto normal e 3 para 1 em títulos grandes, medido no ponto mais claro atrás das palavras.