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

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

Tekst i bevægelse fanger opmærksomheden hurtigere end næsten alt andet på en skærm og mister læseren lige så hurtigt, hvis den bevæger sig for meget. Her er, hvordan du beholder både bevægelsen og meningen.

## The short version

- Kinetisk typografi er tekst, der bevæger sig, skifter eller forvandler sig over tid for at bære mening, rytme eller betoning.
- Læselig kinetisk typografi holder hvert ord stille længe nok til at blive læst og bevæger kun én ting ad gangen.
- Variable fonte gør det muligt at animere vægt, bredde eller hældning glidende på nettet, fordi akserne interpolerer i stedet for at skifte mellem filer.
- Når du animerer vægten, ændrer ordets bredde sig, så sæt en fast boks, eller vælg en skrifttype, hvis bredder er de samme på tværs af vægte.
- Websites bør respektere indstillingen prefers-reduced-motion ved at stoppe eller forenkle tekstanimation for dem, der beder om mindre bevægelse.

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

| Type | Hvad der bevæger sig | Bedst til |
| --- | --- | --- |
| Indgang | Ord ankommer ved at stige op, poppe, feje ind eller blive skrevet | Overskrifter, undertekster, story-billeder |
| Rytmisk | Ord dukker op i takt med tale eller musik | Lyricvideoer, citater, speak |
| Forvandlende | Et ord skifter vægt, bredde, størrelse eller hældning | Betoning, logoer, brugerflader |
| Rumlig | Ord bevæger sig gennem eller rundt i en scene | Titelsekvenser, brandfilm |
| Ambient | Skriften står stille, mens baggrunden bevæger sig | Plakater, loops, rolige sociale opslag |

Fem familier af kinetisk typografi. De fleste rigtige værker bruger en eller to; at prøve alle fem i én video er der, hvor læseligheden dør.

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

### Undgå

- Ord, der bevæger sig, mens man skal læse dem
- Hvert ord animeret på sin egen måde
- Bogstaver, der snurrer, vender eller slører, når de ankommer
- Klip, der er hurtigere, end ordene kan læses
- Bevægelse, der intet har med meningen at gøre

### Gør

- Bevæg ind, fald til ro, hold, og forsvind så
- Én indgangsstil til hele værket
- Korte, enkle baner: op, ind, på tværs
- Hold hver linje længe nok til at læse den to gange
- Lad bevægelsen gentage ordet: »langsomt« ankommer langsomt

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.

| Ord på skærmen | Hold efter ro | Typisk brug |
| --- | --- | --- |
| 1 til 2 | Omkring 1,5 sekund | Et slagord, et tal |
| 3 til 5 | Omkring 2 til 2,5 sekunder | En overskrift |
| 6 til 10 | Omkring 3 til 4 sekunder | En undertekst eller citatlinje |
| Mere end 10 | Del den op | To linjer, to slag |

Udgangspunkter, ikke love. Seere, der læser på et andet sprog eller på en lille skærm, har brug for længere tid.

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

Et lodret story-billede med det ene ord Langsomt i stor skrift

Slag et: et enkelt ord lander og holder. Seeren læser det med det samme.

Det næste lodrette billede med hele linjen Langsomme søndage starter kl. ni og en lille overlinje ovenover

Slag to: resten af linjen slutter sig til. Det første ord var krogen; dette billede er budskabet.

1. **Skriv slagene** Én linje per slag, helst under seks ord. Læs dem højt for at finde de naturlige pauser.
2. **Marker betoningen** Vælg ét ord per slag, der skal være større, tungere eller langsommere. Er alt betonet, er intet.
3. **Vælg ét bevægelsessprog** Stig op, Pop, Fej eller Skrivemaskine, brugt konsekvent. [Tekstanimationer til sociale medier](https://gradiently.design/da/guide/text-animation-ideas) sammenligner dem.
4. **Sæt easing** Ord skal sænke farten, når de ankommer, så de føles placeret frem for tabt. [Easing](https://gradiently.design/da/guide/easing) forklarer kurverne.
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](https://gradiently.design/da/guide/variable-fonts) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) oplister standardakserne.

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

Når du animerer font-weight på en variabel font, interpolerer den glidende. Min-width forhindrer linjen i at ombrydes, når ordet bliver bredere.

> **Vægt ændrer bredde** I de fleste skrifttyper er federe bogstaver bredere, så et animeret ord skubber til naboerne. Giv det en fast boks, animer et enkelt ord på sin egen linje, eller vælg en skrifttype, der er designet med samme bredder på tværs af vægte.

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](https://gradiently.design/da/guide/reduced-motion) 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](https://gradiently.design/da/guide/animated-social-posts), og undertekster i [undertekster til video](https://gradiently.design/da/guide/video-captions-design).

## FAQ

### Hvad er kinetisk typografi?

Tekst, der bevæger sig eller forvandler sig over tid, fx ved at glide, skalere eller skifte vægt, for at bære mening, rytme eller betoning i video, film eller brugerflader.

### Hvordan holder man kinetisk typografi læselig?

Lad hver linje falde til ro og holde længe nok til at blive læst to gange, bevæg kun én ting ad gangen, og brug én ensartet bevægelsesstil hele vejen igennem.

### Kan man animere variable fonte i CSS?

Ja. Animer font-weight, font-stretch eller font-variation-settings på en variabel font, så interpolerer browseren glidende mellem værdierne.

### Hvad er et berømt eksempel på kinetisk typografi?

Saul Bass’ fortekster til North by Northwest (1959), hvor navne glider langs gitteret i en bygnings facade, er et ofte nævnt tidligt eksempel.

### Skal tekstanimationer respektere indstillinger for reduceret bevægelse?

Ja. På nettet bruger du media query’en prefers-reduced-motion til at stoppe eller forenkle tekstanimation for dem, der har bedt om mindre bevægelse.