# Fundo que se adapta ao texto: como um Mark faz espaço

[Canonical HTML page](https://gradiently.design/pt-pt/guide/text-reacts-to-background)

A maioria dos fundos são imagens, e as imagens não sabem onde está o teu título. Um Mark sabe, por isso reorganiza-se para deixar as palavras passar, em vez de se esconder atrás de uma caixa.

## The short version

- Um Mark do Gradiently é um fundo que se adapta ao texto, porque é desenhado ao vivo e sabe onde estão as palavras do design.
- Atrás das tuas palavras, um Mark coloca a sua zona mais calma e de melhor contraste, escurece ou clareia as cores junto às letras e suaviza o detalhe agitado.
- A reação não usa caixas, sombras nem desfocagem, por isso o fundo mantém-se inteiro e as palavras continuam legíveis.
- Escolhes a intensidade da resposta de um Mark, de Desligado a Invisível, Subtil, Claro e Forte, e podes afinar com Tom, Calma, Curva e Alcance.
- Como o Mark é desenhado de novo para cada tamanho, volta a abrir espaço onde quer que as palavras fiquem em cada formato.

Um Mark do Gradiently é um **fundo que se adapta ao texto**. Como é desenhado ao vivo, e não guardado como imagem, sabe onde estão as tuas palavras e reorganiza-se à volta delas: a parte mais calma e de melhor contraste do material desloca-se para trás do texto, as cores junto às letras escurecem ou clareiam e o detalhe agitado suaviza-se. Nada é colocado por cima. Não há caixas, sombras nem desfocagem, por isso ficas com o fundo todo e as palavras continuam a ler-se.

## As formas habituais de tornar o texto legível e o que custam

Põe um título sobre um gradiente ou uma fotografia cheios de vida e parte dele desaparece. As soluções habituais funcionam todas ao tapar o fundo, o que é um resultado estranho quando o fundo foi a razão de escolheres o design.

### Tapar o fundo

- Uma caixa sólida ou fosca atrás das palavras
- Uma sombra projetada em cada letra
- Desfocar a zona atrás do texto
- Uma sobreposição escura sobre a imagem toda

### Um Mark a fazer espaço

- A sua zona calma desloca-se para onde estão as palavras
- As cores junto às letras escurecem ou clareiam
- Grão, cristas e clarões suavizam-se atrás do texto
- O resto do fundo continua tão vivo como antes

Cada solução tem o seu lugar numa imagem plana, e [texto sobre fundo com gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) trata delas com honestidade. A diferença num Mark é que o fundo participa, em vez de ser tapado.

## O que um Mark faz à volta das tuas palavras

1. **Assenta** O material desloca-se para que as tuas palavras caiam na sua parte mais calma. A luz que ficaria atrás do título escorre para o espaço livre à volta.
2. **Muda de tom** Junto às letras, a paleta desliza para uma cor que contrasta com o texto: mais escura atrás de tinta clara, mais clara atrás de tinta escura.
3. **Acalma** A distorção, a agitação e o detalhe fino suavizam-se atrás das palavras, para que uma textura forte nunca corte um traço fino.
4. **Curva-se à volta dos bordos** Os padrões curvam ligeiramente no bordo das palavras em vez de as atravessarem em linha reta.

Um cartaz de evento para uma noite de abertura de museu, com a zona mais brilhante do gradiente atrás do título

Reação desligada: o material atravessa as palavras, tal como numa imagem plana.

O mesmo cartaz do museu, em que o gradiente assentou num tom calmo e mais profundo atrás do título e dos detalhes

Reação ligada: o mesmo Mark assenta uma zona mais profunda e calma atrás do texto e mantém a cor no resto.

A reação trabalha de mãos dadas com a [Tinta automática](https://gradiently.design/pt-pt/guide/auto-ink-legibility), que escolhe a tinta clara ou escura do Mark para cada linha. O fundo faz o espaço; a Tinta automática escolhe a cor certa para o preencher.

## Escolher a intensidade da resposta do fundo

Decides quanto o Mark cede. O painel chama-se À volta das palavras e começa com cinco níveis.

| Nível | O que faz | Bom para |
| --- | --- | --- |
| Desligado | O material ignora as tuas palavras | Papéis de parede e impressões artísticas sem texto |
| Invisível | Só atua onde é preciso; ninguém repara | Títulos grandes e fortes sobre Marks calmos |
| Subtil | Equilibrado: o visual mantém-se e as palavras leem-se | A maioria das publicações e stories |
| Claro | As palavras ganham sempre | Ementas, listas de preços, detalhes de eventos |
| Forte | O máximo de contraste, com a calma um pouco mais larga | Texto pequeno, textos longos, sinais lidos do outro lado de uma sala |

Cinco pontos de partida. Subtil é uma predefinição sensata; sobe sempre que as palavras ficarem mais pequenas ou mais longas.

Debaixo dos níveis há quatro botões de afinação: o **Tom** define até onde o material assenta atrás das palavras para dar contraste, a **Calma** quanto a distorção e a agitação suavizam, a **Curva** quanto o padrão se curva no bordo das palavras, e o **Alcance** se abraça cada letra ou responde à volta de todo o bloco de texto.

> **O Alcance é o botão de que a maioria precisa** Para um título curto, um alcance apertado mantém o fundo vivo até às letras. Para um parágrafo ou uma lista, um alcance maior acalma uma única zona clara para todo o bloco, o que é mais fácil de ler.

## Porque importa em todos os tamanhos

Uma imagem de fundo plana é composta uma só vez. Corta-a para um story e o ponto brilhante pode cair mesmo atrás do título. Um Mark é desenhado de novo para cada formato, por isso, quando um design passa de uma publicação para um story e para um banner, as palavras mudam e o Mark volta a fazer espaço onde quer que fiquem. É isso que permite que [um só visual funcione em todos os tamanhos](https://gradiently.design/pt-pt/guide/one-look-every-size).

- Publicação 1080×1350: 1080 × 1350
- Story 1080×1920: 1080 × 1920
- Cabeçalho do X 1500×500: 1500 × 500
- Miniatura do YouTube 1280×720: 1280 × 720

Quatro formas, quatro lugares diferentes para o título. A zona calma segue as palavras em cada uma.

## Uma versão simples da ideia em CSS

Na web podes aproveitar o princípio com um gradiente simples: põe a parte mais profunda e calma do fundo onde está o texto e deixa a cor nos bordos. Não segue as palavras quando o layout muda, mas é melhor do que uma caixa.

Zona calma e profunda atrás do texto: `radial-gradient(ellipse 70% 45% at 35% 62%, #1b1030 0%, #2e1745 40%, #8a3f6e 75%, #f0a46f 100%)`

O bloco de texto fica na elipse ameixa escura em baixo à esquerda; o pêssego e o rosa mantêm-se vivos junto aos bordos.

```css
.hero {
  min-height: 70vh;
  display: grid;
  align-content: end;
  padding: 8vh 6vw;
  color: #fbf3ea;
  background: radial-gradient(
    ellipse 70% 45% at 35% 62%,
    #1b1030 0%,
    #2e1745 40%,
    #8a3f6e 75%,
    #f0a46f 100%
  );
}
```

Muda a posição da elipse para onde está o teu título. [CSS de sobreposição de gradiente](https://gradiently.design/pt-pt/guide/css-gradient-overlay) mostra o mesmo truque por cima de uma fotografia.

## Quando baixar a reação

Nem todos os designs pedem a máxima legibilidade. Um papel de parede de telemóvel não tem palavras, por isso Desligado é o certo. Letras grandes de destaque, uma só palavra num cartaz, aguentam-se sozinhas e muitas vezes ficam melhor com Invisível. Tratamentos de lettering como Contorno ou Extrusão, tratados em [efeitos de lettering](https://gradiently.design/pt-pt/guide/lettering-treatments), já trazem o seu próprio contraste. Guarda os níveis fortes para os trabalhos que os pedem: letra miúda, detalhes longos e tudo o que se lê à pressa.

## FAQ

### Como se adapta um Mark do Gradiently ao texto?

Desloca a sua zona mais calma e de melhor contraste para trás das tuas palavras, escurece ou clareia as cores junto às letras e suaviza o detalhe agitado, tudo sem caixas, sombras nem desfocagem.

### Posso impedir que o fundo reaja ao meu texto?

Sim. Põe a reação em Desligado e o material ignora as tuas palavras, o que serve para papéis de parede e designs sem texto.

### Que nível de reação devo usar?

Subtil serve para a maioria das publicações e stories. Usa Claro ou Forte para texto pequeno, textos longos, ementas e tudo o que se lê à distância.

### A reação funciona quando redimensiono um design?

Sim. Um Mark é desenhado de novo para cada tamanho, por isso volta a abrir espaço onde quer que as palavras fiquem no novo formato.