# Typographie cinétique : du texte animé qui reste lisible

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

Un texte en mouvement capte l’attention plus vite que presque tout à l’écran, et perd le lecteur aussi vite s’il bouge trop. Voici comment garder le mouvement et le sens.

## The short version

- La typographie cinétique est un texte qui bouge, change ou se transforme dans le temps pour porter un sens, un rythme ou une emphase.
- Une typographie cinétique lisible garde chaque mot immobile assez longtemps pour être lu et ne bouge qu’une chose à la fois.
- Les polices variables permettent d’animer en douceur graisse, largeur ou inclinaison sur le web, car les axes s’interpolent au lieu de basculer entre des fichiers.
- Animer la graisse change la largeur d’un mot : fixez une boîte ou choisissez une police dont les largeurs restent constantes d’une graisse à l’autre.
- Les sites web doivent respecter le réglage prefers-reduced-motion en arrêtant ou en simplifiant l’animation de texte pour les personnes qui demandent moins de mouvement.

La **typographie cinétique** est un texte qui bouge : des mots qui glissent, grossissent, changent de graisse ou apparaissent en rythme avec le son pour porter un sens, pas seulement pour décorer. Elle reste lisible quand trois règles tiennent. Chaque mot reste immobile assez longtemps pour être lu, une seule chose bouge à la fois et le mouvement épouse le sens des mots. Enfreignez-les et vous obtenez un joli flou. Respectez-les et le texte en mouvement devient l’un des outils les plus puissants pour la vidéo sociale, les génériques, les publicités et les interfaces.

## Ce qu’est la typographie cinétique, et d’où elle vient

Les créateurs de génériques de films faisaient bouger le texte bien avant que les écrans soient partout. Les génériques de Saul Bass pour *La Mort aux trousses* (*North by Northwest*, 1959) d’Alfred Hitchcock faisaient glisser les noms le long des lignes d’une façade d’immeuble, et cette idée, un texte qui se comporte comme un élément de la scène, guide encore le métier. Aujourd’hui, elle vit dans les vidéos de paroles, les vidéos explicatives, les lancements de produits, l’onboarding d’applications et presque toutes les courtes vidéos sociales avec du texte.

| Type | Ce qui bouge | Idéal pour |
| --- | --- | --- |
| Entrée | Les mots arrivent en montant, en surgissant, en se dévoilant ou en s’écrivant | Titres, sous-titres, cadres de stories |
| Rythmé | Les mots apparaissent en rythme avec la parole ou la musique | Vidéos de paroles, citations, voix off |
| Transformation | Un mot change de graisse, de largeur, de taille ou d’inclinaison | Emphase, logos, interfaces |
| Spatial | Les mots traversent ou contournent une scène | Génériques, films de marque |
| Ambiant | Le texte reste immobile pendant que le fond bouge | Affiches, boucles, posts sociaux calmes |

Cinq familles de typographie cinétique. La plupart des vraies créations en utilisent une ou deux ; essayer les cinq dans une même vidéo, c’est là que meurt la lisibilité.

## Règles pour une typographie cinétique lisible

Lire et suivre un mouvement se disputent la même attention : un mot encore en mouvement est un mot que personne n’a encore lu. Ces règles découlent de cette seule limite et valent que vous animiez dans un éditeur, en CSS ou dans une application de design.

### À éviter

- Des mots qui bougent pendant qu’on doit les lire
- Chaque mot animé d’une manière différente
- Des lettres qui tournent, se retournent ou se floutent en arrivant
- Des coupes plus rapides que la lecture des mots
- Un mouvement sans rapport avec le sens

### À faire

- Entrer, se poser, tenir, puis partir
- Un seul style d’entrée pour toute la création
- Des trajets courts et simples : vers le haut, vers l’intérieur, en travers
- Tenir chaque ligne assez longtemps pour la lire deux fois
- Laisser le mouvement faire écho au mot : « lent » arrive lentement

La tenue est la partie que les gens sautent. Règle pratique : environ un tiers de seconde par mot, plus une seconde, mesuré à partir du moment où la ligne est posée, pas de celui où elle a commencé à bouger. Puis testez avec quelqu’un qui n’a jamais vu le script.

| Mots à l’écran | Tenue après la pose | Usage typique |
| --- | --- | --- |
| 1 à 2 | Environ 1,5 seconde | Un mot choc, un chiffre |
| 3 à 5 | Environ 2 à 2,5 secondes | Un titre |
| 6 à 10 | Environ 3 à 4 secondes | Une légende ou une citation |
| Plus de 10 | Scindez | Deux lignes, deux temps |

Des points de départ, pas des lois. Les spectateurs qui lisent dans une langue seconde, ou sur un petit écran, ont besoin de plus de temps.

## Faites le storyboard des mots avant d’animer

La plupart des typographies cinétiques ratent dans le script, pas dans la timeline. Découpez le message en temps, donnez une idée à chaque temps et décidez quel mot unique de chaque temps mérite l’emphase.

Un cadre de story vertical montrant le seul mot Lent en grand

Temps un : un seul mot atterrit et tient. Le spectateur le lit aussitôt.

Le cadre vertical suivant avec la ligne complète Les dimanches lents commencent à neuf heures et un petit surtitre au-dessus

Temps deux : le reste de la ligne le rejoint. Le premier mot était l’accroche ; ce cadre est le message.

1. **Écrivez les temps** Une ligne par temps, idéalement de moins de six mots. Lisez-les à voix haute pour trouver les pauses naturelles.
2. **Marquez l’emphase** Choisissez un mot par temps à rendre plus grand, plus gras ou plus lent. Si tout est mis en avant, rien ne l’est.
3. **Choisissez un langage de mouvement** Rise, pop, wipe ou typewriter, employé de façon constante. [Les animations de texte pour les réseaux](https://gradiently.design/fr/guide/text-animation-ideas) les compare.
4. **Réglez l’accélération** Les mots doivent ralentir en arrivant, pour paraître posés plutôt que lâchés. [L’easing](https://gradiently.design/fr/guide/easing) explique les courbes.
5. **Minutez pour le lecteur le plus lent** Regardez à vitesse réelle, son coupé. Si vous ne lisez pas chaque ligne à l’aise, allongez la tenue.

## Animation de police variable en CSS

Une [police variable](https://gradiently.design/fr/guide/variable-fonts) contient toute une plage de graisses, de largeurs ou d’inclinaisons dans un seul fichier, et le navigateur peut se déplacer en douceur le long de ces axes. Le texte qui se transforme devient peu coûteux sur le web : un mot peut grossir au survol ou respirer lentement dans une bannière. Le [guide MDN des polices variables](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) liste les axes 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; }
}
```

Animer font-weight sur une police variable s’interpole en douceur. La min-width empêche la ligne de se réagencer quand le mot s’élargit.

> **La graisse change la largeur** Dans la plupart des polices, des lettres plus grasses sont plus larges : un mot animé repousse donc ses voisins. Donnez-lui une boîte fixe, animez un seul mot sur sa propre ligne ou choisissez une police dessinée avec les mêmes largeurs d’une graisse à l’autre.

Respectez les personnes qui ont demandé moins de mouvement à leur appareil. La media query `prefers-reduced-motion` en est le moyen ; [le mouvement réduit](https://gradiently.design/fr/guide/reduced-motion) précise ce qu’il faut garder et ce qu’il faut couper.

## Typographie cinétique pour la vidéo sociale

Sur les réseaux, beaucoup regardent sans le son : les mots en mouvement portent donc l’histoire. Gardez les lignes au milieu du cadre, hors de l’interface de chaque plateforme, et laissez un seul fond fort faire le travail de marque pendant que le texte bouge. Un fond en dérive sous des mots immobiles ou arrivant doucement est souvent plus lisible que des mots qui traversent un fond fixe.

C’est l’association pour laquelle Gradiently est conçu. Un Mark peut bouger lentement derrière les mots pendant que le texte emploie l’une de quatre animations, rise, pop, wipe ou typewriter, et le Mark garde sa zone la plus calme derrière les lignes pour qu’elles restent lisibles pendant que tout bouge. Avec Pro, vous exportez le résultat en GIF, ou en MP4 ou WebM là où le navigateur prend en charge l’enregistrement. Pour le fond, voyez les [posts sociaux animés](https://gradiently.design/fr/guide/animated-social-posts) et, pour les sous-titres, les [sous-titres vidéo](https://gradiently.design/fr/guide/video-captions-design).

## FAQ

### Qu’est-ce que la typographie cinétique ?

Un texte qui bouge ou se transforme dans le temps, en glissant, en changeant d’échelle ou de graisse, pour porter un sens, un rythme ou une emphase en vidéo, au cinéma ou dans des interfaces.

### Comment garder une typographie cinétique lisible ?

Laissez chaque ligne se poser et tenir assez longtemps pour être lue deux fois, ne bougez qu’une chose à la fois et gardez un seul style de mouvement du début à la fin.

### Peut-on animer des polices variables en CSS ?

Oui. Animez font-weight, font-stretch ou font-variation-settings sur une police variable et le navigateur interpole en douceur entre les valeurs.

### Quel est un exemple célèbre de typographie cinétique ?

Les génériques de Saul Bass pour La Mort aux trousses (1959), où les noms glissent le long de la grille d’une façade d’immeuble, sont un exemple ancien souvent cité.

### Les animations de texte doivent-elles respecter les réglages de mouvement réduit ?

Oui. Sur le web, utilisez la media query prefers-reduced-motion pour arrêter ou simplifier l’animation de texte pour les personnes qui ont demandé moins de mouvement.