Kinetische Typografie: bewegte Schrift, die lesbar bleibt

Kinetische Typografie ist Schrift, die sich bewegt: Wörter, die gleiten, skalieren, das Gewicht wechseln oder im Rhythmus des Tons erscheinen, um Bedeutung zu tragen, nicht nur zu dekorieren. Sie bleibt lesbar, wenn drei Regeln gelten. Jedes Wort steht lange genug still, um gelesen zu werden, es bewegt sich immer nur eine Sache, und die Bewegung passt zur Bedeutung der Wörter. Verstößt du dagegen, entsteht ein hübscher Schleier. Hältst du dich daran, ist bewegte Schrift eines der stärksten Mittel für Social Video, Titelsequenzen, Werbung und Oberflächen.

Was kinetische Typografie ist und woher sie kommt

Titeldesigner im Film ließen Schrift sich bewegen, lange bevor es überall Bildschirme gab. Saul Bass ließ im Vorspann zu Alfred Hitchcocks Der unsichtbare Dritte (1959) Namen an den Linien einer Hausfassade entlanggleiten, und diese Idee, Schrift, die sich wie Teil der Szene verhält, prägt das Handwerk bis heute. Heute lebt sie in Lyric-Videos, Erklärvideos, Produkt-Launches, App-Onboarding und fast jedem kurzen Social Video mit Text.

Regeln für lesbare kinetische Typografie

Lesen und Bewegung verfolgen konkurrieren um dieselbe Aufmerksamkeit, ein Wort, das sich noch bewegt, hat also noch niemand gelesen. Diese Regeln folgen aus dieser einen Grenze, und sie gelten, ob du in einem Editor, in CSS oder in einer Design-App animierst.

Das Halten ist der Teil, den viele überspringen. Eine Faustregel: etwa eine Drittelsekunde pro Wort plus eine Sekunde, gemessen ab dem Moment, in dem die Zeile zur Ruhe gekommen ist, nicht ab Bewegungsbeginn. Teste dann mit jemandem, der das Skript nie gesehen hat.

Die Wörter vor dem Animieren als Storyboard planen

Die meiste kinetische Schrift scheitert im Skript, nicht auf der Timeline. Zerlege die Botschaft in Beats, gib jedem Beat einen Gedanken und entscheide, welches einzelne Wort in jedem Beat Betonung verdient.

1. 1

   Die Beats schreiben

   Eine Zeile pro Beat, idealerweise unter sechs Wörtern. Lies sie laut, um die natürlichen Pausen zu finden.

2. 2

   Die Betonung markieren

   Wähle pro Beat ein Wort, das größer, schwerer oder langsamer wird. Ist alles betont, ist nichts betont.

3. 3

   Eine Bewegungssprache wählen

   Aufsteigen, Aufploppen, Wischen oder Schreibmaschine, konsequent genutzt. Textanimationen für Social vergleicht sie.

4. 4

   Das Easing festlegen

   Wörter sollten beim Ankommen abbremsen, damit sie platziert statt fallen gelassen wirken. Easing erklärt die Kurven.

5. 5

   Auf den langsamsten Leser timen

   Sieh es in voller Geschwindigkeit ohne Ton an. Kannst du nicht jede Zeile bequem lesen, gib mehr Haltezeit.

Variable-Font-Animation in CSS

Ein Variable Font enthält einen ganzen Bereich von Gewichten, Breiten oder Neigungen in einer Datei, und der Browser kann sich weich entlang dieser Achsen bewegen. Das macht verwandelnde Schrift im Web günstig: Ein Wort kann beim Hover schwerer werden oder im Hero langsam atmen. MDNs Leitfaden zu Variable Fonts listet die Standardachsen auf.

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

Respektiere Menschen, die ihr Gerät um weniger Bewegung gebeten haben. Die Media Query prefers-reduced-motion ist der Weg; Reduzierte Bewegung behandelt, was du behältst und was du abschaltest.

Kinetische Typografie für Social Video

In Social Media schauen viele ohne Ton, deshalb tragen bewegte Wörter die Geschichte. Halte Zeilen in der Bildmitte, abseits der Oberfläche jeder Plattform, und lass einen starken Hintergrund die Markenarbeit leisten, während sich die Schrift bewegt. Ein treibender Hintergrund unter stillen oder sanft ankommenden Wörtern ist oft lesbarer als Wörter, die über einen statischen fliegen.

Genau für diese Kombination ist Gradiently gebaut. Ein Mark kann sich langsam hinter den Wörtern bewegen, während der Text eine von vier Animationen nutzt, Aufsteigen, Aufploppen, Wischen oder Schreibmaschine, und der Mark hält seine ruhigste Region hinter den Zeilen, sodass sie lesbar bleiben, während sich alles bewegt. Mit Pro exportierst du das Ergebnis als GIF oder, wo der Browser Aufnahme unterstützt, als MP4 oder WebM. Zur Hintergrundseite siehe animierte Social-Posts, für Untertitel Video-Untertitel.