Tipografia cinética: texto em movimento que continua legível

Tipografia cinética é texto que se move: palavras que deslizam, mudam de escala ou de peso ou aparecem no ritmo do som para carregar sentido, não só para enfeitar. Ela continua legível quando três regras valem. Cada palavra fica parada tempo suficiente para ser lida, só uma coisa se move por vez e o movimento combina com o que as palavras significam. Quebre essas regras e você terá um borrão bonito. Mantenha-as e o texto em movimento é uma das ferramentas mais fortes que você tem para vídeo social, vinhetas de abertura, anúncios e interfaces.

O que é tipografia cinética e de onde ela veio

Os designers de créditos de cinema faziam o texto se mover muito antes de as telas estarem em todo lugar. Os créditos de abertura de Saul Bass para Intriga Internacional (1959), de Alfred Hitchcock, faziam os nomes deslizarem pelas linhas da fachada de um prédio, e essa ideia, um texto que se comporta como parte da cena, ainda move o ofício. Hoje ela vive em videoclipes de letra, vídeos explicativos, lançamentos de produto, onboarding de apps e em quase todo vídeo curto de rede social com palavras.

Regras para uma tipografia cinética legível

Ler e acompanhar movimento competem pela mesma atenção, então uma palavra que ainda está se movendo é uma palavra que ninguém leu ainda. Estas regras vêm desse único limite e valem se você anima em um editor, em CSS ou em um app de design.

O tempo parado é a parte que as pessoas pulam. 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 se mover. Depois teste com alguém que nunca viu o roteiro.

Faça o storyboard das palavras antes de animar

A maior parte do texto cinético dá errado no roteiro, não na linha do tempo. Divida a mensagem em tempos, dê a cada um uma ideia e decida qual única palavra de cada tempo merece ênfase.

1. 1

   Escreva os tempos

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

2. 2

   Marque a ênfase

   Escolha uma palavra por tempo para ser maior, mais pesada ou mais lenta. Se tudo é enfatizado, nada é.

3. 3

   Escolha uma linguagem de movimento

   Subir, pular, revelar ou máquina de escrever, usada com consistência. Animações de texto para redes sociais as compara.

4. 4

   Defina a suavização

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

5. 5

   Marque o tempo pelo leitor mais lento

   Assista na velocidade real com o som desligado. Se você não consegue ler cada linha com conforto, aumente o tempo parado.

Animação de fonte variável em CSS

Uma fonte variável guarda toda uma faixa de pesos, larguras ou inclinações em um único arquivo, e o navegador pode se mover suavemente por esses eixos. Isso torna barato transformar o texto na web: uma palavra pode ficar mais pesada ao passar o mouse, ou respirar devagar em um destaque. 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; }
}

Respeite quem pediu ao dispositivo menos movimento. A media query prefers-reduced-motion é o jeito; movimento reduzido trata do que manter e do que desligar.

Tipografia cinética para vídeo social

Nas redes sociais, muita gente assiste sem som, então as palavras em movimento carregam a história. Mantenha as linhas no meio do quadro, longe da interface de cada plataforma, e deixe um fundo forte fazer o trabalho da marca enquanto o texto se move. Um fundo à deriva sob palavras paradas ou que chegam com suavidade costuma ser mais legível do que palavras voando sobre um fundo estático.

É a combinação para a qual o Gradiently foi feito. Um Mark pode se mover devagar atrás das palavras enquanto o texto usa uma de quatro animações, subir, pular, revelar ou máquina de escrever, e o Mark mantém sua região mais calma atrás das linhas para que continuem legíveis enquanto tudo se move. Com o Pro, você exporta o resultado como GIF, ou como MP4 ou WebM onde o navegador oferece suporte à gravação. Para o lado do fundo, veja posts animados para redes sociais e, para legendas, legendas de vídeo.