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

[Canonical HTML page](https://gradiently.design/pt-br/guide/variable-font-animation)

Texto em movimento chama a atenção mais rápido que quase tudo em uma tela, e perde o leitor igualmente rápido se mexer demais. Veja como manter o movimento e o sentido.

## The short version

- Tipografia cinética é texto que se move, muda ou se transforma ao longo do tempo para carregar sentido, ritmo ou ênfase.
- Texto cinético legível mantém cada palavra parada por tempo suficiente para ser lida e move apenas uma coisa por vez.
- Fontes variáveis permitem animar peso, largura ou inclinação de forma suave na web, porque os eixos são interpolados em vez de trocar entre arquivos.
- Animar o peso muda a largura de uma palavra, então defina uma caixa fixa ou escolha uma fonte cujas larguras permaneçam constantes entre os pesos.
- Sites devem respeitar a configuração prefers-reduced-motion, parando ou simplificando a animação de texto para quem pede menos movimento.

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

| Tipo | O que se move | Melhor para |
| --- | --- | --- |
| Entrada | As palavras chegam subindo, pulando, revelando-se ou sendo digitadas | Títulos, legendas, quadros de story |
| Rítmica | As palavras aparecem no tempo da fala ou da música | Vídeos de letra, citações, narrações |
| Transformadora | Uma palavra muda de peso, largura, tamanho ou inclinação | Ênfase, logos, interfaces |
| Espacial | As palavras percorrem uma cena ou a contornam | Vinhetas de abertura, filmes de marca |
| Ambiente | O texto fica parado enquanto o fundo se move | Pôsteres, loops, posts sociais calmos |

Cinco famílias de texto cinético. A maioria das peças reais usa uma ou duas; tentar as cinco em um só vídeo é onde a legibilidade morre.

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

### Evite

- Palavras que se movem enquanto você deveria lê-las
- Cada palavra animada de um jeito diferente
- Letras girando, virando ou desfocando ao chegar
- Cortes mais rápidos do que as palavras podem ser lidas
- Movimento que não tem nada a ver com o sentido

### Faça

- Entrar, assentar, segurar e sair
- Um estilo de entrada para a peça toda
- Trajetos curtos e simples: para cima, para dentro, atravessando
- Segurar cada linha o bastante para lê-la duas vezes
- Deixar o movimento ecoar a palavra: “devagar” chega devagar

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.

| Palavras na tela | Tempo parado após assentar | Uso típico |
| --- | --- | --- |
| 1 a 2 | Cerca de 1,5 segundo | Uma palavra de impacto, um número |
| 3 a 5 | Cerca de 2 a 2,5 segundos | Um título |
| 6 a 10 | Cerca de 3 a 4 segundos | Uma legenda ou linha de citação |
| Mais de 10 | Divida | Duas linhas, dois tempos |

Pontos de partida, não leis. Quem lê em uma segunda língua, ou em uma tela pequena, precisa de mais tempo.

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

Um quadro vertical de story com a única palavra Devagar em letras grandes

Tempo um: uma única palavra pousa e fica. O espectador lê na hora.

O quadro vertical seguinte com a frase completa Domingos lentos começam às nove e uma pequena linha acima

Tempo dois: o resto da frase se junta a ela. A primeira palavra foi o gancho; este quadro é a mensagem.

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. **Marque a ênfase** Escolha uma palavra por tempo para ser maior, mais pesada ou mais lenta. Se tudo é enfatizado, nada é.
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](https://gradiently.design/pt-br/guide/text-animation-ideas) as compara.
4. **Defina a suavização** As palavras devem desacelerar ao chegar, para parecerem colocadas e não largadas. [Suavização](https://gradiently.design/pt-br/guide/easing) explica as curvas.
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](https://gradiently.design/pt-br/guide/variable-fonts) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) lista os eixos padrão.

```css
/* 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; }
}
```

Animar o font-weight de uma fonte variável interpola de forma suave. O min-width impede que a linha se reorganize quando a palavra fica mais larga.

> **O peso muda a largura** Na maioria das fontes, letras mais pesadas são mais largas, então uma palavra animada empurra as vizinhas. Dê a ela uma caixa fixa, anime uma única palavra em uma linha própria ou escolha uma fonte desenhada com as mesmas larguras em todos os pesos.

Respeite quem pediu ao dispositivo menos movimento. A media query `prefers-reduced-motion` é o jeito; [movimento reduzido](https://gradiently.design/pt-br/guide/reduced-motion) 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](https://gradiently.design/pt-br/guide/animated-social-posts) e, para legendas, [legendas de vídeo](https://gradiently.design/pt-br/guide/video-captions-design).

## FAQ

### O que é tipografia cinética?

Texto que se move ou se transforma ao longo do tempo, deslizando, mudando de escala ou de peso, para carregar sentido, ritmo ou ênfase em vídeo, cinema ou interfaces.

### Como manter a tipografia cinética legível?

Deixe cada linha assentar e ficar parada o bastante para ser lida duas vezes, mova só uma coisa por vez e use um único estilo de movimento do começo ao fim.

### É possível animar fontes variáveis em CSS?

Sim. Anime font-weight, font-stretch ou font-variation-settings em uma fonte variável e o navegador interpola suavemente entre os valores.

### Qual é um exemplo famoso de tipografia cinética?

Os créditos de abertura de Saul Bass para Intriga Internacional (1959), em que os nomes deslizam pela grade da fachada de um prédio, são um exemplo antigo muito citado.

### As animações de texto devem respeitar as configurações de movimento reduzido?

Sim. Na web, use a media query prefers-reduced-motion para parar ou simplificar a animação de texto para quem pediu menos movimento.