Efeitos de texto que não parecem datados: contorno, 3D e eco

Efeitos de texto são tratamentos aplicados às letras, como um contorno, uma linha interna, uma extrusão 3D, um eco deslocado, um desalinhamento de impressão ou um brilho suave. Eles não parecem datados quando três regras valem: use um efeito por design, aplique em poucas palavras grandes com peso forte e tire as cores do fundo, não de uma predefinição. Os efeitos falham quando são empilhados, espalhados por todas as linhas ou usados para salvar uma tipografia que não estava funcionando.

Este guia mostra as principais famílias de efeito, quando cada uma combina com a mensagem, como mantê-las legíveis e como criar algumas em CSS. Se você ainda não escolheu a fonte, comece pelas fontes display, já que a maioria dos efeitos precisa de letras grandes e robustas para funcionar.

Os principais tipos de efeito de texto

A maioria dos tratamentos de lettering pertence a algumas poucas famílias. Cada uma carrega suas próprias associações, e é por isso que escolher uma é, na verdade, escolher um tom de voz.

Quando um efeito de texto ajuda e quando atrapalha

Um efeito ajuda quando carrega um sentido que as palavras sozinhas não carregam. Um eco atrás de Alto faz a palavra vibrar. Uma extrusão em um cardápio retrô situa o cardápio no tempo. Um brilho no pôster de um evento noturno sugere o ambiente. Quando o efeito não diz nada, vira enfeite, e enfeite envelhece rápido.

Como deixar o texto com contorno legível

O texto com contorno é o efeito com mais chance de falhar, porque tira a forma sólida que torna as letras fáceis de reconhecer. Use em uma sem serifa ou slab pesada, com formas abertas, em tamanhos grandes, sobre um fundo calmo. Deixe o traço grosso o bastante para ser lido como linha, não como fio de cabelo: algo entre 2 e 4 por cento do tamanho da fonte é um bom começo.

Um padrão confiável combina uma palavra sólida com uma palavra em contorno, como Sessões sólida e de verão em contorno. A palavra sólida ancora a leitura; o contorno acrescenta ritmo. Nunca use contorno em texto pequeno e confira no celular, onde os traços finos somem primeiro.

/* Outline: a stroke, no fill. */
.outline {
  color: transparent;
  -webkit-text-stroke: 0.03em #f5f0ff;
}

/* Extrude: stacked shadows, each 1px further. */
.extrude {
  color: #fde8d0;
  text-shadow:
    1px 1px 0 #d9485f,
    2px 2px 0 #d9485f,
    3px 3px 0 #b83250,
    4px 4px 0 #b83250,
    5px 5px 0 #8f2442,
    6px 6px 0 #8f2442;
}

/* Echo: one offset copy in a palette colour. */
.echo {
  color: #ffffff;
  text-shadow: 0.06em 0.06em 0 #7c3aed;
}

/* Halo: a soft glow for dark grounds. */
.halo {
  color: #fff7ed;
  text-shadow: 0 0 0.25em rgb(251 146 60 / 0.55),
               0 0 0.8em rgb(244 114 182 / 0.35);
}

Como escolher as cores dos efeitos de texto

Os efeitos parecem acrescentados quando as cores vêm do nada. Parecem pensados quando vêm do fundo. Tire a cor da lateral da extrusão da parte mais escura do gradiente, a do eco da cor mais saturada e a do brilho da mais clara. Assim o efeito parece luz e matéria da mesma cena.

Mantenha a face da letra com alto contraste em relação ao fundo e deixe o efeito entre os dois em luminosidade. Assim o efeito acrescenta profundidade sem tirar contraste das letras. Para as regras de contraste por trás disso, veja contraste de cores.

Efeitos de texto no Gradiently

O Studio do Gradiently traz oito tratamentos de Lettering: Contorno, Interno, Recorte, Extrusão, Duplo, Rastro, Riso e Halo. Um Mark também sabe onde estão as palavras: a região mais calma dele vai para trás delas, e a Tinta automática escolhe texto claro ou escuro para cada linha a partir da paleta do próprio Mark, o que dá a uma palavra tratada um fundo estável. As mesmas regras continuam valendo: um tratamento, poucas palavras, uma fonte pesada.

Para saber mais sobre como fazer o texto ser lido em fundos coloridos, leia texto sobre gradiente; para efeitos feitos com o próprio gradiente, veja texto com gradiente em CSS.