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

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.

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.

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.

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.

1. 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. 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. 3

   Choisissez un langage de mouvement

   Rise, pop, wipe ou typewriter, employé de façon constante. Les animations de texte pour les réseaux les compare.

4. 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 explique les courbes.

5. 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 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 liste les axes 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; }
}

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 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 et, pour les sous-titres, les sous-titres vidéo.