Kinetisk typografi: tekst i bevægelse, der forbliver læselig

Kinetisk typografi er tekst, der bevæger sig: ord, der glider, skalerer, skifter vægt eller dukker op i takt med lyd for at bære mening, ikke bare for at pynte. Den forbliver læselig, når tre regler holder. Hvert ord står stille længe nok til at blive læst, kun én ting bevæger sig ad gangen, og bevægelsen passer til det, ordene betyder. Bryd dem, og du får en smuk sløring. Hold dem, og tekst i bevægelse er et af de stærkeste værktøjer, du har til social video, titelsekvenser, annoncer og brugerflader.

Hvad kinetisk typografi er, og hvor den kommer fra

Filmens titeldesignere fik skrift til at bevæge sig længe før, der var skærme overalt. Saul Bass’ fortekster til Alfred Hitchcocks North by Northwest (1959) sendte navne glidende langs linjerne i en bygnings facade, og den idé, skrift der opfører sig som en del af scenen, driver stadig håndværket. I dag lever den i lyricvideoer, forklaringsvideoer, produktlanceringer, onboarding i apps og næsten hver kort social video med ord i.

Regler for læselig kinetisk typografi

At læse og at følge bevægelse konkurrerer om den samme opmærksomhed, så et ord, der stadig bevæger sig, er et ord, ingen har læst endnu. Disse regler kommer af den ene begrænsning, og de gælder, uanset om du animerer i et redigeringsprogram, i CSS eller i en designapp.

Holdet er den del, folk springer over. En brugbar tommelfingerregel er omkring en tredjedel sekund per ord plus et sekund, målt fra det øjeblik linjen er faldet til ro, ikke fra da den begyndte at bevæge sig. Test derefter med nogen, der aldrig har set manuskriptet.

Lav et storyboard af ordene, før du animerer

Det meste kinetiske typografi går galt i manuskriptet, ikke på tidslinjen. Del budskabet op i slag, giv hvert slag én idé, og beslut, hvilket enkelt ord i hvert slag der fortjener betoning.

1. 1

   Skriv slagene

   Én linje per slag, helst under seks ord. Læs dem højt for at finde de naturlige pauser.

2. 2

   Marker betoningen

   Vælg ét ord per slag, der skal være større, tungere eller langsommere. Er alt betonet, er intet.

3. 3

   Vælg ét bevægelsessprog

   Stig op, Pop, Fej eller Skrivemaskine, brugt konsekvent. Tekstanimationer til sociale medier sammenligner dem.

4. 4

   Sæt easing

   Ord skal sænke farten, når de ankommer, så de føles placeret frem for tabt. Easing forklarer kurverne.

5. 5

   Time efter den langsomste læser

   Se det i fuld fart uden lyd. Kan du ikke læse hver linje komfortabelt, så forlæng holdet.

Animation af variable fonte i CSS

En variabel font rummer et helt spektrum af vægte, bredder eller hældninger i én fil, og browseren kan bevæge sig glidende langs de akser. Det gør forvandlende skrift billig på nettet: et ord kan blive tungere ved hover eller ånde langsomt i et heroområde. MDN’s guide til variable fonte oplister standardakserne.

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

Respekter dem, der har bedt deres enhed om mindre bevægelse. Media query’en prefers-reduced-motion er måden at gøre det på; reduceret bevægelse dækker, hvad du skal beholde, og hvad du skal slå fra.

Kinetisk typografi til social video

På sociale medier ser mange uden lyd, så ord i bevægelse bærer historien. Hold linjerne i midten af billedet, fri af hver platforms brugerflade, og lad én stærk baggrund klare brandarbejdet, mens skriften bevæger sig. En drivende baggrund under stillestående eller blidt ankommende ord er ofte mere læselig end ord, der flyver hen over en statisk baggrund.

Det er netop den kombination, Gradiently er bygget til. En Mark kan bevæge sig langsomt bag ordene, mens teksten bruger en af fire animationer, Stig op, Pop, Fej eller Skrivemaskine, og Marken holder sit roligste område bag linjerne, så de forbliver læselige, mens alt bevæger sig. Med Pro eksporterer du resultatet som GIF eller som MP4 eller WebM, hvor browseren understøtter optagelse. Baggrundssiden finder du i animerede sociale opslag, og undertekster i undertekster til video.