# Kinetische typografie: bewegende tekst die leesbaar blijft

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

Bewegende tekst trekt sneller aandacht dan bijna alles op een scherm, en verliest de lezer even snel als hij te veel beweegt. Zo houd je de beweging én de betekenis.

## The short version

- Kinetische typografie is tekst die in de loop van de tijd beweegt, verandert of transformeert om betekenis, ritme of nadruk over te brengen.
- Leesbare kinetische tekst houdt elk woord lang genoeg stil om het te lezen en beweegt maar één ding tegelijk.
- Met variabele lettertypen animeer je gewicht, breedte of schuinte soepel op het web, omdat de assen vloeiend interpoleren in plaats van tussen bestanden te wisselen.
- Het gewicht animeren verandert de breedte van een woord, dus zet een vast vak of kies een lettertype waarvan de breedtes over gewichten gelijk blijven.
- Websites horen de instelling prefers-reduced-motion te respecteren door tekstanimatie te stoppen of te vereenvoudigen voor mensen die om minder beweging vragen.

**Kinetische typografie** is tekst die beweegt: woorden die glijden, schalen, van gewicht veranderen of in ritme met geluid verschijnen om betekenis over te brengen, niet alleen om te versieren. Ze blijft leesbaar als drie regels gelden. Elk woord blijft lang genoeg stil om gelezen te worden, er beweegt maar één ding tegelijk en de beweging past bij wat de woorden betekenen. Breek je die regels, dan krijg je een mooie vlek. Houd je ze aan, dan is bewegende tekst een van de sterkste middelen voor socialmediavideo, titelsequenties, advertenties en interfaces.

## Wat kinetische typografie is en waar ze vandaan komt

Filmtitelontwerpers lieten tekst bewegen lang voordat schermen overal waren. De openingstitels van Saul Bass voor *North by Northwest* (1959) van Alfred Hitchcock lieten namen langs de lijnen van een gevel glijden, en dat idee, tekst die zich gedraagt als onderdeel van de scène, drijft het vak nog steeds. Vandaag leeft het in lyric-video’s, uitlegvideo’s, productlanceringen, onboarding van apps en bijna elke korte socialmediavideo met woorden erin.

| Soort | Wat beweegt | Het best voor |
| --- | --- | --- |
| Opkomst | Woorden verschijnen door te rijzen, te poppen, te vegen of te typen | Koppen, ondertitels, storyframes |
| Ritmisch | Woorden verschijnen op de maat van spraak of muziek | Lyric-video’s, citaten, voice-overs |
| Transformerend | Een woord verandert van gewicht, breedte, grootte of schuinte | Nadruk, logo’s, interfaces |
| Ruimtelijk | Woorden reizen door of rond een scène | Titelsequenties, merkfilms |
| Sfeervol | De tekst staat stil terwijl de achtergrond beweegt | Posters, loops, rustige socialmediaposts |

Vijf families van kinetische tekst. De meeste echte stukken gebruiken er een of twee; alle vijf in één video proberen is waar leesbaarheid sterft.

## Regels voor leesbare kinetische typografie

Lezen en beweging volgen strijden om dezelfde aandacht, dus een woord dat nog beweegt is een woord dat niemand al heeft gelezen. Deze regels komen uit die ene grens, en ze gelden of je nu animeert in een editor, in CSS of in een ontwerpapp.

### Vermijd

- Woorden die bewegen terwijl je ze moet lezen
- Elk woord op een andere manier animeren
- Letters die draaien, omslaan of vervagen bij aankomst
- Sneden sneller dan de woorden te lezen zijn
- Beweging die niets met de betekenis te maken heeft

### Doe

- Binnenkomen, tot rust komen, vasthouden, vertrekken
- Eén opkomststijl voor het hele stuk
- Korte, eenvoudige paden: omhoog, naar binnen, opzij
- Houd elke regel lang genoeg vast om hem twee keer te lezen
- Laat de beweging het woord weerspiegelen: “langzaam” komt langzaam binnen

Het vasthouden slaan mensen over. Een werkbare vuistregel is ongeveer een derde seconde per woord, plus een seconde, gemeten vanaf het moment dat de regel tot rust is gekomen, niet vanaf het moment dat hij begon te bewegen. Test het daarna met iemand die het script nooit heeft gezien.

| Woorden in beeld | Vasthouden na rust | Typisch gebruik |
| --- | --- | --- |
| 1 tot 2 | Ongeveer 1,5 seconde | Een krachtwoord, een getal |
| 3 tot 5 | Ongeveer 2 tot 2,5 seconden | Een kop |
| 6 tot 10 | Ongeveer 3 tot 4 seconden | Een ondertitel of citaatregel |
| Meer dan 10 | Splits het | Twee regels, twee slagen |

Startpunten, geen wetten. Kijkers die in een tweede taal lezen, of op een klein scherm, hebben langer nodig.

## Schets de woorden voor je animeert

De meeste kinetische tekst gaat mis in het script, niet op de tijdlijn. Breek de boodschap op in slagen, geef elke slag één idee en bepaal welk enkel woord in elke slag nadruk verdient.

Een verticaal storyframe met het enkele woord Langzaam in grote letters

Slag een: één woord landt en blijft staan. De kijker leest het meteen.

Het volgende verticale frame met de volledige regel Trage zondagen beginnen om negen en een kleine eyebrow erboven

Slag twee: de rest van de regel voegt zich erbij. Het eerste woord was de haak; dit frame is de boodschap.

1. **Schrijf de slagen** Eén regel per slag, bij voorkeur onder zes woorden. Lees ze hardop om de natuurlijke pauzes te vinden.
2. **Markeer de nadruk** Kies per slag één woord dat groter, zwaarder of langzamer wordt. Als alles nadruk krijgt, heeft niets nadruk.
3. **Kies één bewegingstaal** Rijzen, poppen, vegen of typemachine, consequent gebruikt. [Tekstanimaties voor social](https://gradiently.design/nl/guide/text-animation-ideas) vergelijkt ze.
4. **Stel de easing in** Woorden moeten afremmen als ze aankomen, zodat ze geplaatst lijken in plaats van gevallen. [Easing](https://gradiently.design/nl/guide/easing) legt de curves uit.
5. **Time op de langzaamste lezer** Bekijk het op volle snelheid zonder geluid. Als je niet elke regel comfortabel kunt lezen, voeg dan vasthoudtijd toe.

## Variabele-fontanimatie in CSS

Een [variabel lettertype](https://gradiently.design/nl/guide/variable-fonts) bevat een heel bereik aan gewichten, breedtes of schuintes in één bestand, en de browser kan soepel langs die assen bewegen. Dat maakt transformerende tekst goedkoop op het web: een woord kan zwaarder worden bij hover, of langzaam ademen in een hero. [De gids van MDN over variabele lettertypen](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) somt de standaardassen op.

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

Font-weight animeren op een variabel lettertype interpoleert soepel. De min-width voorkomt dat de regel herschikt als het woord breder wordt.

> **Gewicht verandert de breedte** In de meeste lettertypen zijn zwaardere letters breder, dus een geanimeerd woord duwt zijn buren weg. Geef het een vast vak, animeer één woord op een eigen regel, of kies een lettertype dat is ontworpen met dezelfde breedtes over alle gewichten.

Respecteer mensen die hun apparaat om minder beweging hebben gevraagd. De mediaquery `prefers-reduced-motion` is daarvoor de manier; [verminderde beweging](https://gradiently.design/nl/guide/reduced-motion) behandelt wat je houdt en wat je uitzet.

## Kinetische typografie voor socialmediavideo

Op social kijken veel mensen zonder geluid, dus bewegende woorden dragen het verhaal. Houd regels in het midden van het beeld, weg van de interface van elk platform, en laat één sterke achtergrond het merkwerk doen terwijl de tekst beweegt. Een wegdrijvende achtergrond onder stilstaande of zacht binnenkomende woorden is vaak leesbaarder dan woorden die over een statische achtergrond vliegen.

Dat is de combinatie waarvoor Gradiently is gebouwd. Een Mark kan langzaam achter de woorden bewegen terwijl de tekst een van vier animaties gebruikt, rijzen, poppen, vegen of typemachine, en de Mark houdt zijn rustigste gebied achter de regels, zodat ze leesbaar blijven terwijl alles beweegt. Met Pro exporteer je het resultaat als GIF, of als MP4 of WebM waar de browser opnemen ondersteunt. Voor de achtergrondkant, zie [geanimeerde socialmediaposts](https://gradiently.design/nl/guide/animated-social-posts) en voor ondertitels [video-ondertitels](https://gradiently.design/nl/guide/video-captions-design).

## FAQ

### Wat is kinetische typografie?

Tekst die in de loop van de tijd beweegt of transformeert, zoals glijden, schalen of van gewicht veranderen, om betekenis, ritme of nadruk over te brengen in video, film of interfaces.

### Hoe houd je kinetische typografie leesbaar?

Laat elke regel tot rust komen en lang genoeg vasthouden om twee keer te lezen, beweeg maar één ding tegelijk en gebruik overal één consistente bewegingsstijl.

### Kun je variabele lettertypen animeren in CSS?

Ja. Animeer font-weight, font-stretch of font-variation-settings op een variabel lettertype en de browser interpoleert soepel tussen waarden.

### Wat is een beroemd voorbeeld van kinetische typografie?

De openingstitels van Saul Bass voor North by Northwest (1959), waarin namen langs het raster van een gevel glijden, zijn een vaak genoemd vroeg voorbeeld.

### Moeten tekstanimaties verminderde-bewegingsinstellingen respecteren?

Ja. Gebruik op het web de mediaquery prefers-reduced-motion om tekstanimatie te stoppen of te vereenvoudigen voor mensen die om minder beweging hebben gevraagd.