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

Um Mark do Gradiently é um fundo que se adapta ao texto. Como é desenhado ao vivo, e não guardado como imagem, ele sabe onde estão as suas palavras e se reorganiza ao redor delas: a parte mais calma e de melhor contraste do material vai para trás do texto, as cores perto das letras escurecem ou clareiam e o detalhe agitado relaxa. Nada é colocado por cima. Não há caixas, sombras nem desfoque, então você mantém o fundo inteiro e as palavras continuam legíveis.

As formas habituais de deixar o texto legível e o que elas custam

Ponha um título sobre um gradiente ou uma foto cheios de vida e parte dele desaparece. As soluções-padrão funcionam todas cobrindo o fundo, o que é um resultado estranho quando o fundo era o motivo de você ter escolhido o design.

Cada solução tem seu lugar numa imagem chapada, e texto sobre fundo em gradiente trata delas com honestidade. A diferença com um Mark é que o fundo participa, em vez de ser mascarado.

O que um Mark faz ao redor das suas palavras

1. 1

   Ele se acomoda

   O material se desloca para que suas palavras caiam na parte mais calma. A luz que ficaria atrás do título flutua para o espaço livre ao redor.

2. 2

   Ele muda de tom

   Perto das 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

   Ele acalma

   Distorção, agitação e detalhe fino relaxam atrás das palavras, então uma textura forte nunca corta um traço fino.

4. 4

   Ele se curva nas bordas

   Os padrões se curvam levemente na borda das palavras em vez de passar reto por elas.

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 abre o espaço; a Tinta automática escolhe a cor certa para preenchê-lo.

Escolhendo a intensidade da resposta do fundo

Você decide o quanto o Mark cede. O painel para isso se chama Ao redor das suas palavras e começa com cinco níveis.

Sob os níveis há quatro botões de ajuste fino: Tom define o quanto o material se acomoda atrás das palavras para dar contraste, Calma o quanto a distorção e a agitação relaxam, Curvatura o quanto o padrão se curva na borda das palavras e Alcance se ele acompanha cada letra ou responde em torno de todo o bloco de texto.

Por que importa em todos os tamanhos

Uma imagem de fundo chapada é diagramada uma única vez. Corte-a para um story e o ponto brilhante pode cair bem atrás do título. Um Mark é desenhado de novo para cada formato, então, quando um design passa de post para story e para banner, as palavras se movem e o Mark abre espaço outra vez onde elas caírem. É isso que deixa um visual funcionar em todos os tamanhos.

Uma versão simples da ideia em CSS

Na web você pode emprestar o princípio com um gradiente comum: ponha a parte mais profunda e calma do fundo onde fica o texto e deixe a cor nas bordas. Ele não vai acompanhar as palavras quando o layout mudar, mas é melhor 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 diminuir a reação

Nem todo design quer legibilidade máxima. Um papel de parede de celular não tem palavra nenhuma, então Desativado é o certo. Letras de exibição enormes, uma única palavra num pôster, podem se sustentar sozinhas e muitas vezes ficam melhores com Invisível. Tratamentos de letra como Contorno ou Extrusão, vistos em efeitos de lettering, já trazem o próprio contraste. Guarde os níveis fortes para os trabalhos que precisam deles: letras miúdas, detalhes longos e tudo que é lido com pressa.