Tipografia cinetica: testo in movimento che resta leggibile

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.

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.

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.

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.

1. 1

   Scrivi le battute

   Una riga per battuta, meglio se sotto le sei parole. Leggile ad alta voce per trovare le pause naturali.

2. 2

   Segna l’enfasi

   Scegli una parola per battuta da rendere più grande, più pesante o più lenta. Se tutto è enfatizzato, niente lo è.

3. 3

   Scegli un solo linguaggio di movimento

   Salita, pop, wipe o macchina da scrivere, usati con coerenza. Animazioni di testo per i social le mette a confronto.

4. 4

   Imposta l’easing

   Le parole dovrebbero rallentare mentre arrivano, così sembrano posate e non lasciate cadere. Easing spiega le curve.

5. 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 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 elenca gli assi standard.

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

Rispetta chi ha chiesto al proprio dispositivo meno movimento. La media query prefers-reduced-motion serve a questo; 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 e per i sottotitoli, sottotitoli video.