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

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

O texto em movimento prende a atenção mais depressa do que quase tudo num ecrã, e perde o leitor com a mesma rapidez se se mexer demasiado. Eis 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 transmitir sentido, ritmo ou ênfase.
- A tipografia cinética legível mantém cada palavra parada o tempo suficiente para ser lida e move apenas uma coisa de cada vez.
- As fontes variáveis permitem animar peso, largura ou inclinação de forma suave na web, porque os eixos interpolam em vez de trocar entre ficheiros.
- Animar o peso muda a largura da palavra, por isso define uma caixa fixa ou escolhe uma fonte cujas larguras se mantenham constantes em todos os pesos.
- Os sites devem respeitar a definição prefers-reduced-motion, parando ou simplificando a animação do texto para quem pede menos movimento.

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

| Tipo | O que se move | Ideal para |
| --- | --- | --- |
| Entrada | As palavras chegam a subir, a saltar, a revelar-se ou a ser escritas | Títulos, legendas, frames de stories |
| Rítmica | As palavras surgem a par da fala ou da música | Vídeos de letras, citações, locuções |
| Transformação | Uma palavra muda de peso, largura, tamanho ou inclinação | Ênfase, logótipos, interfaces |
| Espacial | As palavras atravessam ou rodeiam uma cena | Genéricos, filmes de marca |
| Ambiente | O texto fica parado enquanto o fundo se move | Cartazes, loops, publicações calmas |

Cinco famílias de texto cinético. A maioria das peças reais usa uma ou duas; experimentar as cinco no mesmo vídeo é onde a legibilidade morre.

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

### Evita

- Palavras que se movem enquanto se supõe que as leias
- Cada palavra animada de maneira diferente
- Letras a rodar, a virar ou a desfocar ao chegar
- Cortes mais rápidos do que a leitura permite
- Movimento sem qualquer relação com o sentido

### Faz

- Entrar, assentar, manter e sair
- Um único estilo de entrada em toda a peça
- Trajetos curtos e simples: para cima, para dentro, ao lado
- Manter cada linha o tempo de a ler duas vezes
- Deixar o movimento ecoar a palavra: “devagar” chega devagar

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.

| Palavras no ecrã | Pausa depois de assentar | Uso típico |
| --- | --- | --- |
| 1 a 2 | Cerca de 1,5 segundos | 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 uma linha de citação |
| Mais de 10 | Divide | Duas linhas, dois tempos |

Pontos de partida, não leis. Quem lê numa segunda língua, ou num ecrã pequeno, precisa de mais tempo.

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

Um frame vertical de story com a palavra Devagar em letras grandes

Primeiro tempo: uma só palavra aterra e fica. Quem vê lê-a de imediato.

O frame vertical seguinte com a linha completa Os domingos devagar começam às nove e um pequeno título por cima

Segundo tempo: o resto da linha junta-se-lhe. A primeira palavra era o gancho; este frame é a mensagem.

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. **Marca a ênfase** Escolhe uma palavra por tempo para ser maior, mais pesada ou mais lenta. Se tudo tem ênfase, nada tem.
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](https://gradiently.design/pt-pt/guide/text-animation-ideas) compara-as.
4. **Define a suavização** As palavras devem desacelerar ao chegar, para parecerem colocadas e não largadas. [Suavização](https://gradiently.design/pt-pt/guide/easing) explica as curvas.
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](https://gradiently.design/pt-pt/guide/variable-fonts) 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](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 numa fonte variável interpola de forma suave. O min-width impede que a linha se reorganize quando a palavra alarga.

> **O peso muda a largura** Na maioria das fontes, as letras mais pesadas são mais largas, por isso uma palavra animada empurra as vizinhas. Dá-lhe uma caixa fixa, anima uma única palavra na sua própria linha ou escolhe uma fonte desenhada com as mesmas larguras em todos os pesos.

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

## FAQ

### O que é a tipografia cinética?

Texto que se move ou se transforma ao longo do tempo, a deslizar, a mudar de escala ou de peso, para transmitir sentido, ritmo ou ênfase em vídeo, cinema ou interfaces.

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

Deixa cada linha assentar e manter-se o tempo de ser lida duas vezes, move só uma coisa de cada vez e usa um estilo de movimento consistente do princípio ao fim.

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

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

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

Os títulos de abertura de Saul Bass para North by Northwest (1959), em que os nomes deslizam pela grelha da fachada de um edifício, são um dos primeiros exemplos mais citados.

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

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