Tipografia cinética: texto em movimento que se lê bem

Tipografia cinética é texto que se move: palavras que deslizam, mudam de escala ou de peso, ou surgem ao ritmo do som para transmitir sentido, não só para enfeitar. Mantém-se legível quando se cumprem três regras. Cada palavra fica parada o tempo suficiente para ser lida, só uma coisa se move de cada vez e o movimento corresponde ao que as palavras significam. Quebra-as e obténs um borrão bonito. Cumpre-as e o texto em movimento é uma das ferramentas mais fortes que tens para vídeo social, genéricos, anúncios e interfaces.

O que é a tipografia cinética e de onde vem

Os designers de genéricos de cinema punham o texto em movimento muito antes de os ecrãs estarem por todo o lado. Os títulos de abertura de Saul Bass para North by Northwest (1959), de Alfred Hitchcock, faziam os nomes deslizar pelas linhas da fachada de um edifício, e essa ideia, o texto a comportar-se como parte da cena, continua a guiar o ofício. Hoje vive em vídeos de letras, explicativos, lançamentos de produtos, onboarding de aplicações e em quase todos os vídeos curtos com palavras nas redes sociais.

Regras para uma tipografia cinética legível

Ler e seguir o movimento disputam a mesma atenção, por isso uma palavra que ainda se move é uma palavra que ninguém leu. Estas regras nascem desse único limite e aplicam-se quer animes num editor, em CSS ou numa aplicação de design.

A pausa é a parte que as pessoas saltam. Uma regra prática é cerca de um terço de segundo por palavra, mais um segundo, contado a partir do momento em que a linha assentou, não de quando começou a mover-se. Depois testa com alguém que nunca viu o guião.

Faz o storyboard das palavras antes de animar

A maior parte da tipografia cinética falha no guião, não na linha temporal. Divide a mensagem em tempos, dá a cada tempo uma só ideia e decide qual a única palavra de cada tempo que merece ênfase.

1. 1

   Escreve os tempos

   Uma linha por tempo, de preferência com menos de seis palavras. Lê-as em voz alta para encontrar as pausas naturais.

2. 2

   Marca a ênfase

   Escolhe uma palavra por tempo para ser maior, mais pesada ou mais lenta. Se tudo tem ênfase, nada tem.

3. 3

   Escolhe uma só linguagem de movimento

   Subir, saltar, revelar ou máquina de escrever, usada sempre da mesma forma. Animações de texto para redes sociais compara-as.

4. 4

   Define a suavização

   As palavras devem desacelerar ao chegar, para parecerem colocadas e não largadas. Suavização explica as curvas.

5. 5

   Marca o tempo pelo leitor mais lento

   Vê à velocidade real, sem som. Se não consegues ler cada linha com conforto, aumenta a pausa.

Animação de fontes variáveis em CSS

Uma fonte variável reúne num só ficheiro toda uma gama de pesos, larguras ou inclinações, e o navegador consegue percorrer esses eixos de forma suave. Isso torna barato transformar texto na web: uma palavra pode ficar mais pesada ao passar o rato, ou respirar devagar num cabeçalho. O guia da MDN sobre fontes variáveis lista os eixos padrão.

/* Load a variable font with a weight range, for example Inter 100 to 900 */
.breathe {
  display: inline-block;
  min-width: 7ch; /* weight changes width: reserve the room */
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 300;
  animation: breathe 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes breathe {
  to { font-weight: 800; }
}

@media (prefers-reduced-motion: reduce) {
  .breathe { animation: none; font-weight: 600; }
}

Respeita quem pediu ao dispositivo menos movimento. A media query prefers-reduced-motion é a forma de o fazer; movimento reduzido explica o que manter e o que desligar.

Tipografia cinética para vídeo social

Nas redes sociais, muita gente vê sem som, por isso as palavras em movimento levam a história. Mantém as linhas no centro do frame, longe da interface de cada plataforma, e deixa um fundo forte fazer o trabalho da marca enquanto o texto se move. Um fundo a deslizar sob palavras paradas ou de chegada suave costuma ler-se melhor do que palavras a voar sobre um fundo estático.

É o par para o qual o Gradiently foi feito. Um Mark pode mover-se devagar atrás das palavras, enquanto o texto usa uma de quatro animações, subir, saltar, revelar ou máquina de escrever, e o Mark mantém a sua zona mais calma atrás das linhas para que continuem legíveis com tudo em movimento. Com o Pro, exportas o resultado em GIF, ou em MP4 ou WebM quando o navegador suporta gravação. Para o lado do fundo, vê publicações animadas para redes sociais e, para legendas, legendas de vídeo.