Kinetische typografie: bewegende tekst die leesbaar blijft

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.

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.

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.

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.

1. 1

   Schrijf de slagen

   Eén regel per slag, bij voorkeur onder zes woorden. Lees ze hardop om de natuurlijke pauzes te vinden.

2. 2

   Markeer de nadruk

   Kies per slag één woord dat groter, zwaarder of langzamer wordt. Als alles nadruk krijgt, heeft niets nadruk.

3. 3

   Kies één bewegingstaal

   Rijzen, poppen, vegen of typemachine, consequent gebruikt. Tekstanimaties voor social vergelijkt ze.

4. 4

   Stel de easing in

   Woorden moeten afremmen als ze aankomen, zodat ze geplaatst lijken in plaats van gevallen. Easing legt de curves uit.

5. 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 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 somt de standaardassen op.

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

Respecteer mensen die hun apparaat om minder beweging hebben gevraagd. De mediaquery prefers-reduced-motion is daarvoor de manier; verminderde beweging 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 en voor ondertitels video-ondertitels.