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

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.

Cada solução tem o seu lugar numa imagem plana, e texto sobre fundo com gradiente 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. 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. 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. 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. 4

   Curva-se à volta dos bordos

   Os padrões curvam ligeiramente no bordo das palavras em vez de as atravessarem em linha reta.

A reação trabalha de mãos dadas com a Tinta automática, 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.

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.

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.

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.

.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%
  );
}

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