# Tipografia cinetica: testo in movimento che resta leggibile

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

Il testo in movimento cattura l’attenzione più in fretta di quasi tutto il resto su uno schermo, e perde il lettore altrettanto in fretta se si muove troppo. Ecco come tenere insieme movimento e significato.

## The short version

- La tipografia cinetica è testo che si muove, cambia o si trasforma nel tempo per dare significato, ritmo o enfasi.
- Un testo cinetico leggibile tiene ferma ogni parola abbastanza a lungo da poterla leggere e muove una sola cosa alla volta.
- I variable font permettono di animare peso, larghezza o inclinazione sul web in modo fluido, perché gli assi si interpolano invece di passare da un file all’altro.
- Animare il peso cambia la larghezza di una parola: imposta un riquadro fisso o scegli un font le cui larghezze restino costanti tra un peso e l’altro.
- I siti dovrebbero rispettare l’impostazione prefers-reduced-motion, fermando o semplificando l’animazione del testo per chi chiede meno movimento.

La **tipografia cinetica** è testo che si muove: parole che scorrono, cambiano scala o peso, o compaiono a tempo con il suono per portare significato, non solo per decorare. Resta leggibile quando valgono tre regole. Ogni parola sta ferma abbastanza a lungo da essere letta, si muove una sola cosa alla volta e il movimento corrisponde a ciò che le parole dicono. Se le rompi, ottieni una bella sfocatura. Se le rispetti, il testo in movimento è uno degli strumenti più forti che hai per video social, sigle, annunci e interfacce.

## Cos’è la tipografia cinetica e da dove viene

I designer dei titoli di testa facevano muovere il testo molto prima che gli schermi fossero ovunque. I titoli di apertura di Saul Bass per *Intrigo internazionale* (North by Northwest, 1959) di Alfred Hitchcock facevano scivolare i nomi lungo le linee della facciata di un palazzo, e quell’idea, un testo che si comporta come parte della scena, guida ancora oggi il mestiere. Oggi vive nei lyric video, nei video esplicativi, nei lanci di prodotto, nell’onboarding delle app e in quasi ogni breve video social con delle parole.

| Tipo | Cosa si muove | Ideale per |
| --- | --- | --- |
| Ingresso | Le parole arrivano salendo, comparendo di scatto, con un wipe o battute a macchina | Titoli, sottotitoli, frame per le storie |
| Ritmico | Le parole compaiono a tempo con il parlato o la musica | Lyric video, citazioni, voci fuori campo |
| Trasformativo | Una parola cambia peso, larghezza, dimensione o inclinazione | Enfasi, loghi, interfacce |
| Spaziale | Le parole attraversano o circondano una scena | Sigle, film di brand |
| Ambientale | Il testo resta fermo mentre lo sfondo si muove | Poster, loop, post social calmi |

Cinque famiglie di testo cinetico. La maggior parte dei lavori ne usa una o due; provarle tutte e cinque in un solo video è il punto in cui la leggibilità muore.

## Regole per una tipografia cinetica leggibile

Leggere e seguire il movimento si contendono la stessa attenzione, quindi una parola ancora in movimento è una parola che nessuno ha ancora letto. Queste regole nascono da quell’unico limite e valgono sia che tu animi in un editor, in CSS o in un’app di design.

### Da evitare

- Parole che si muovono mentre dovresti leggerle
- Ogni parola animata in modo diverso
- Lettere che ruotano, si ribaltano o si sfocano mentre arrivano
- Stacchi più veloci della lettura delle parole
- Movimento che non c’entra nulla con il significato

### Da fare

- Entrare, assestarsi, restare, poi uscire
- Un solo stile di ingresso per tutto il pezzo
- Percorsi brevi e semplici: su, dentro, di lato
- Tenere ogni riga abbastanza a lungo da leggerla due volte
- Far eco alla parola con il movimento: «lento» arriva lentamente

La pausa è la parte che tutti saltano. Una regola pratica è circa un terzo di secondo a parola, più un secondo, contato da quando la riga si è assestata, non da quando ha iniziato a muoversi. Poi prova con qualcuno che non ha mai visto il copione.

| Parole sullo schermo | Pausa dopo l’assestamento | Uso tipico |
| --- | --- | --- |
| Da 1 a 2 | Circa 1,5 secondi | Una parola d’impatto, un numero |
| Da 3 a 5 | Circa 2 o 2,5 secondi | Un titolo |
| Da 6 a 10 | Circa 3 o 4 secondi | Un sottotitolo o una citazione |
| Più di 10 | Dividila | Due righe, due battute |

Punti di partenza, non leggi. Chi legge in una seconda lingua, o su uno schermo piccolo, ha bisogno di più tempo.

## Fai lo storyboard delle parole prima di animare

Quasi tutto il testo cinetico va storto nel copione, non nella timeline. Spezza il messaggio in battute, dai a ogni battuta una sola idea e decidi quale parola, in ciascuna, merita l’enfasi.

Un frame verticale per le storie con la sola parola Piano in caratteri grandi

Prima battuta: una sola parola arriva e resta. Chi guarda la legge subito.

Il frame verticale successivo con la frase completa Le domeniche piano iniziano alle nove e una piccola riga sopra

Seconda battuta: il resto della frase si unisce. La prima parola era l’aggancio; questo frame è il messaggio.

1. **Scrivi le battute** Una riga per battuta, meglio se sotto le sei parole. Leggile ad alta voce per trovare le pause naturali.
2. **Segna l’enfasi** Scegli una parola per battuta da rendere più grande, più pesante o più lenta. Se tutto è enfatizzato, niente lo è.
3. **Scegli un solo linguaggio di movimento** Salita, pop, wipe o macchina da scrivere, usati con coerenza. [Animazioni di testo per i social](https://gradiently.design/it/guide/text-animation-ideas) le mette a confronto.
4. **Imposta l’easing** Le parole dovrebbero rallentare mentre arrivano, così sembrano posate e non lasciate cadere. [Easing](https://gradiently.design/it/guide/easing) spiega le curve.
5. **Regola i tempi sul lettore più lento** Guardalo a velocità piena senza audio. Se non riesci a leggere ogni riga con comodità, aggiungi tempo di pausa.

## Animazione dei variable font in CSS

Un [variable font](https://gradiently.design/it/guide/variable-fonts) contiene un’intera gamma di pesi, larghezze o inclinazioni in un solo file, e il browser può muoversi con fluidità lungo quegli assi. Questo rende economico trasformare il testo sul web: una parola può diventare più pesante al passaggio del mouse, o respirare lentamente in un hero. La [guida MDN ai variable font](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) elenca gli assi standard.

```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; }
}
```

Animare font-weight su un variable font si interpola in modo fluido. Il min-width evita che la riga si riadatti mentre la parola si allarga.

> **Il peso cambia la larghezza** Nella maggior parte dei font, le lettere più grassetto sono più larghe, quindi una parola animata sposta quelle vicine. Dalle un riquadro fisso, anima una sola parola su una riga a parte, oppure scegli un font progettato con le stesse larghezze a ogni peso.

Rispetta chi ha chiesto al proprio dispositivo meno movimento. La media query `prefers-reduced-motion` serve a questo; [reduced motion](https://gradiently.design/it/guide/reduced-motion) spiega cosa tenere e cosa spegnere.

## Tipografia cinetica per i video social

Sui social molte persone guardano senza audio, quindi le parole in movimento portano la storia. Tieni le righe al centro del frame, lontane dall’interfaccia di ogni piattaforma, e lascia che uno sfondo forte faccia il lavoro del brand mentre il testo si muove. Uno sfondo che scorre sotto parole ferme o in arrivo morbido è spesso più leggibile di parole che volano su uno sfondo statico.

È l’abbinamento per cui è pensato Gradiently. Un Mark può muoversi lentamente dietro le parole mentre il testo usa una delle quattro animazioni, salita, pop, wipe o macchina da scrivere, e il Mark tiene la sua zona più calma dietro le righe, così restano leggibili mentre tutto si muove. Con Pro esporti il risultato come GIF, oppure come MP4 o WebM dove il browser supporta la registrazione. Per lo sfondo vedi [post social animati](https://gradiently.design/it/guide/animated-social-posts) e per i sottotitoli, [sottotitoli video](https://gradiently.design/it/guide/video-captions-design).

## FAQ

### Cos’è la tipografia cinetica?

Testo che si muove o si trasforma nel tempo, per esempio scorrendo, cambiando scala o peso, per dare significato, ritmo o enfasi in video, film o interfacce.

### Come si mantiene leggibile la tipografia cinetica?

Lascia che ogni riga si assesti e resti abbastanza a lungo da essere letta due volte, muovi una sola cosa alla volta e usa uno stile di movimento coerente dall’inizio alla fine.

### Si possono animare i variable font in CSS?

Sì. Anima font-weight, font-stretch o font-variation-settings su un variable font e il browser interpola in modo fluido tra i valori.

### Qual è un esempio famoso di tipografia cinetica?

I titoli di apertura di Saul Bass per Intrigo internazionale (1959), in cui i nomi scivolano lungo la griglia della facciata di un palazzo, sono un primo esempio spesso citato.

### Le animazioni di testo devono rispettare le impostazioni di reduced motion?

Sì. Sul web usa la media query prefers-reduced-motion per fermare o semplificare l’animazione del testo per chi ha chiesto meno movimento.