# Como deixar o texto legível sobre fotos sem usar caixa [Canonical HTML page](https://gradiently.design/pt-br/guide/readable-text-on-photos) Uma caixa sólida atrás do título funciona, mas faz todo post parecer um meme. Estas técnicas mantêm a foto inteira e as palavras nítidas, com código para a web e ajustes para posts de redes sociais. ## The short version - O jeito mais confiável de deixar o texto legível sobre fotos é colocar as palavras na área mais calma e uniforme da imagem. - Um degradê de proteção, uma transição suave de transparente para escuro em uma das bordas da foto, dá contraste ao texto sem criar uma caixa visível. - Aplicar um filtro de uma ou duas cores reduz o contraste e o detalhe da foto, e isso facilita a leitura de qualquer texto por cima. - Fontes mais grossas e maiores resistem muito melhor a uma foto cheia de elementos do que fontes finas ou pequenas. - Texto sobre fotos também deve seguir as diretrizes de contraste: cerca de 4,5 para 1 em texto pequeno e 3 para 1 em títulos grandes. 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](https://gradiently.design/pt-br/guide/text-over-image). ## 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. Um post vertical em que o título passa sobre um fundo irregular e cheio de elementos, e partes das letras ficam difíceis de ler O problema em um fundo de Mark: palavras postas direto sobre uma área movimentada perdem letras onde o fundo clareia. O mesmo post vertical com uma área mais calma e uniforme atrás do título, para que todas as palavras fiquem legíveis As mesmas palavras com uma área calma e uniforme atrás, o efeito de um bom enquadramento. Sem caixa, e todas as letras se leem. ## 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](https://gradiently.design/pt-br/guide/type-on-busy-backgrounds) 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. - Proteção embaixo, preto quente: `linear-gradient(0deg, #0c0a09d9 0%, #0c0a0973 30%, #0c0a0900 60%)` - Proteção no topo, azul-marinho: `linear-gradient(180deg, #0f172acc 0%, #0f172a00 45%)` - Proteção lateral, para texto à esquerda: `linear-gradient(90deg, #1c1917d9 0%, #1c19174d 40%, #1c191700 65%)` Três degradês de proteção mostrados sozinhos. Sobre uma foto, cada um escurece só a área das palavras e some antes do assunto. ### 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](https://gradiently.design/pt-br/guide/duotone-effect) 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](https://gradiently.design/pt-br/guide/bold-fonts) 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 | Foto | Comece por | Depois | | --- | --- | --- | | Céu limpo ou parede lisa | Posição | Mais nada é necessário | | Assunto no meio, bordas cheias | Cortar para liberar uma borda | Degradê de proteção nessa borda | | Cheia por toda parte (multidão, feira, folhagem) | Filtro de cor ou duotone | Fonte mais grossa | | Foto de produto clara, em tom alto | Texto escuro na área mais clara | Reduzir as altas luzes naquele ponto | | Noite ou ambiente interno escuro | Texto branco na área mais escura | Um leve degradê se luzes cruzarem as palavras | | Foto detalhada que você não pode alterar | Foto ao lado das palavras | Uma cor em comum para unir os dois | Comece pela técnica menos visível e pare assim que a menor linha estiver legível. ## 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. ```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 proteção embaixo de uma foto de capa, com uma cor escura de reserva para o texto se ler antes de a imagem chegar. 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](https://webaim.org/articles/contrast/). Teste o ponto mais claro atrás das palavras, não a média. [Contraste de cores e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility) explica os números. ## Erros a evitar com texto sobre fotos ### Evite - Brilhos ou halos borrados em volta de cada letra - Uma camada preta pesada sobre a foto inteira - Fonte script fina sobre uma cena detalhada - Texto atravessando um rosto - Consertar um mau corte com efeitos cada vez mais fortes ### Prefira - Um degradê suave em uma borda só - Um filtro que preserva o clima da foto - Um peso robusto em tamanho generoso - Palavras no espaço ao lado do assunto - Cortar de novo ou escolher outra foto 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](https://gradiently.design/pt-br/guide/text-shadow-alternatives). 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. ## FAQ ### Como fazer o texto se destacar em uma foto cheia de elementos? Coloque-o sobre a área mais calma, adicione um degradê suave de proteção nessa borda, aplique um filtro de cor para reduzir o contraste da foto e use um peso mais grosso e maior. ### O que é um degradê de proteção (scrim) em design? É uma camada de gradiente que escurece ou clareia uma parte da imagem e se dissolve até ficar transparente, para que o texto ali tenha contraste suficiente. ### Devo usar sombra no texto para deixá-lo legível em uma foto? Um brilho ou halo suave costuma parecer barato e borra as letras. Posição, um degradê de proteção ou um filtro de cor dão resultados mais limpos. ### Qual taxa de contraste o texto sobre foto precisa ter? Mire em cerca de 4,5 para 1 para texto normal e 3 para 1 para títulos grandes, medidos no ponto mais claro atrás das palavras.