# Kinetische Typografie: bewegte Schrift, die lesbar bleibt

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

Bewegte Schrift zieht Aufmerksamkeit schneller an als fast alles auf einem Bildschirm und verliert den Leser ebenso schnell, wenn sie sich zu stark bewegt. So behältst du Bewegung und Bedeutung.

## The short version

- Kinetische Typografie ist Text, der sich bewegt, verändert oder verwandelt, um Bedeutung, Rhythmus oder Betonung zu tragen.
- Lesbare kinetische Schrift hält jedes Wort lange genug still, um es zu lesen, und bewegt immer nur eine Sache auf einmal.
- Mit Variable Fonts kannst du Gewicht, Breite oder Neigung im Web weich animieren, weil die Achsen interpoliert werden, statt zwischen Dateien zu wechseln.
- Das Animieren des Gewichts verändert die Breite eines Wortes, nutze also eine feste Box oder eine Schrift, deren Breiten über alle Schnitte konstant bleiben.
- Websites sollten die Einstellung prefers-reduced-motion respektieren und Textanimationen für Menschen, die weniger Bewegung wünschen, stoppen oder vereinfachen.

**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.

| Art | Was sich bewegt | Am besten für |
| --- | --- | --- |
| Auftritt | Wörter kommen durch Aufsteigen, Aufploppen, Wischen oder Tippen | Schlagzeilen, Untertitel, Story-Frames |
| Rhythmisch | Wörter erscheinen im Takt von Sprache oder Musik | Lyric-Videos, Zitate, Voiceovers |
| Verwandelnd | Ein Wort ändert Gewicht, Breite, Größe oder Neigung | Betonung, Logos, Oberflächen |
| Räumlich | Wörter wandern durch oder um eine Szene | Titelsequenzen, Markenfilme |
| Ambient | Die Schrift steht still, während sich der Hintergrund bewegt | Poster, Loops, ruhige Social-Posts |

Fünf Familien kinetischer Schrift. Die meisten echten Arbeiten nutzen eine oder zwei; alle fünf in einem Video auszuprobieren, ist der Punkt, an dem die Lesbarkeit stirbt.

## 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.

### Vermeiden

- Wörter, die sich bewegen, während man sie lesen soll
- Jedes Wort auf andere Weise animiert
- Buchstaben, die sich beim Erscheinen drehen, kippen oder verwischen
- Schnitte, schneller als die Wörter lesbar sind
- Bewegung, die nichts mit der Bedeutung zu tun hat

### Besser so

- Einfahren, zur Ruhe kommen, halten, dann abgehen
- Ein Auftrittsstil für das ganze Stück
- Kurze, einfache Wege: hoch, hinein, quer
- Jede Zeile lange genug halten, um sie zweimal zu lesen
- Die Bewegung dem Wort nachempfinden: „langsam“ kommt langsam

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.

| Wörter im Bild | Halten nach dem Stillstand | Typischer Einsatz |
| --- | --- | --- |
| 1 bis 2 | Etwa 1,5 Sekunden | Ein Pointenwort, eine Zahl |
| 3 bis 5 | Etwa 2 bis 2,5 Sekunden | Eine Schlagzeile |
| 6 bis 10 | Etwa 3 bis 4 Sekunden | Eine Untertitel- oder Zitatzeile |
| Mehr als 10 | Teilen | Zwei Zeilen, zwei Beats |

Startpunkte, keine Gesetze. Wer in einer Zweitsprache oder auf einem kleinen Bildschirm liest, braucht länger.

## 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.

Ein vertikaler Story-Frame mit dem einzelnen Wort Langsam in großer Schrift

Beat eins: Ein einzelnes Wort landet und bleibt. Der Betrachter liest es sofort.

Der nächste vertikale Frame mit der ganzen Zeile Langsame Sonntage beginnen um neun und einer kleinen Eyebrow darüber

Beat zwei: Der Rest der Zeile kommt dazu. Das erste Wort war der Haken, dieser Frame ist die Botschaft.

1. **Die Beats schreiben** Eine Zeile pro Beat, idealerweise unter sechs Wörtern. Lies sie laut, um die natürlichen Pausen zu finden.
2. **Die Betonung markieren** Wähle pro Beat ein Wort, das größer, schwerer oder langsamer wird. Ist alles betont, ist nichts betont.
3. **Eine Bewegungssprache wählen** Aufsteigen, Aufploppen, Wischen oder Schreibmaschine, konsequent genutzt. [Textanimationen für Social](https://gradiently.design/de/guide/text-animation-ideas) vergleicht sie.
4. **Das Easing festlegen** Wörter sollten beim Ankommen abbremsen, damit sie platziert statt fallen gelassen wirken. [Easing](https://gradiently.design/de/guide/easing) erklärt die Kurven.
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](https://gradiently.design/de/guide/variable-fonts) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) listet die Standardachsen auf.

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

Das Animieren von font-weight bei einem Variable Font interpoliert weich. Die min-width verhindert, dass die Zeile umbricht, wenn das Wort breiter wird.

> **Das Gewicht verändert die Breite** In den meisten Schriften sind fettere Buchstaben breiter, sodass ein animiertes Wort seine Nachbarn verschiebt. Gib ihm eine feste Box, animiere ein einzelnes Wort in einer eigenen Zeile oder wähle eine Schrift, die über alle Schnitte dieselben Breiten hat.

Respektiere Menschen, die ihr Gerät um weniger Bewegung gebeten haben. Die Media Query `prefers-reduced-motion` ist der Weg; [Reduzierte Bewegung](https://gradiently.design/de/guide/reduced-motion) 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](https://gradiently.design/de/guide/animated-social-posts), für Untertitel [Video-Untertitel](https://gradiently.design/de/guide/video-captions-design).

## FAQ

### Was ist kinetische Typografie?

Text, der sich im Lauf der Zeit bewegt oder verwandelt, etwa durch Gleiten, Skalieren oder Gewichtswechsel, um in Video, Film oder Oberflächen Bedeutung, Rhythmus oder Betonung zu tragen.

### Wie bleibt kinetische Typografie lesbar?

Lass jede Zeile zur Ruhe kommen und lange genug halten, um sie zweimal zu lesen, bewege nur eine Sache auf einmal und nutze durchgehend einen einheitlichen Bewegungsstil.

### Kann man Variable Fonts in CSS animieren?

Ja. Animiere font-weight, font-stretch oder font-variation-settings bei einem Variable Font, und der Browser interpoliert weich zwischen den Werten.

### Was ist ein berühmtes Beispiel für kinetische Typografie?

Saul Bass' Vorspann zu Der unsichtbare Dritte (1959), in dem Namen am Raster einer Hausfassade entlanggleiten, ist ein häufig genanntes frühes Beispiel.

### Sollten Textanimationen reduzierte Bewegung respektieren?

Ja. Nutze im Web die Media Query prefers-reduced-motion, um Textanimationen für Menschen, die weniger Bewegung wünschen, zu stoppen oder zu vereinfachen.