# Kinetisk typografi: bevegelig tekst som er leselig

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

Tekst i bevegelse fanger oppmerksomheten raskere enn nesten alt på skjermen, og mister leseren like fort hvis den beveger seg for mye. Her beholder du både bevegelsen og meningen.

## The short version

- Kinetisk typografi er tekst som beveger seg, endres eller forvandles over tid for å formidle mening, rytme eller vektlegging.
- Leselig kinetisk tekst lar hvert ord stå stille lenge nok til å leses og beveger bare én ting om gangen.
- Variable skrifter lar deg animere vekt, bredde eller helning jevnt på nettet, fordi aksene interpoleres fremfor å bytte mellom filer.
- Animasjon av vekt endrer ordets bredde, så bruk en fast boks eller velg en skrift med konstant bredde på tvers av vekter.
- Nettsider bør respektere prefers-reduced-motion ved å stoppe eller forenkle tekstanimasjon for dem som ber om mindre bevegelse.

**Kinetisk typografi** er tekst som beveger seg: ord som glir, skaleres, endrer vekt eller vises i takt med lyd for å formidle mening, ikke bare dekorere. Den er leselig når tre regler følges. Hvert ord står stille lenge nok til å leses, bare én ting beveger seg om gangen, og bevegelsen passer det ordene betyr. Bryter du reglene, får du pen uskarphet. Følger du dem, er bevegelig tekst et av de sterkeste verktøyene for sosiale videoer, tittelsekvenser, annonser og grensesnitt.

## Hva kinetisk typografi er, og hvor den kommer fra

Filmtitteldesignere satte tekst i bevegelse lenge før skjermer var overalt. Åpningstitlene Saul Bass laget til Alfred Hitchcocks *North by Northwest* (1959), lot navn gli langs linjene i en bygningsfasade. Den ideen, tekst som oppfører seg som en del av scenen, driver fortsatt faget. I dag finnes den i sangtekstvideoer, forklaringsvideoer, produktlanseringer, appintroduksjoner og nesten alle korte sosiale videoer med tekst.

| Type | Hva som beveger seg | Passer best til |
| --- | --- | --- |
| Inngang | Ord kommer inn ved å stige, sprette, sveipe eller skrives | Overskrifter, undertekster og story-rammer |
| Rytmisk | Ord vises i takt med tale eller musikk | Sangtekstvideoer, sitater og fortellerstemme |
| Forvandling | Et ord endrer vekt, bredde, størrelse eller helning | Vektlegging, logoer og grensesnitt |
| Romlig | Ord beveger seg gjennom eller rundt en scene | Tittelsekvenser og merkevarefilmer |
| Atmosfærisk | Teksten står stille mens bakgrunnen beveger seg | Plakater, sløyfer og rolige sosiale innlegg |

Fem familier av kinetisk tekst. De fleste arbeider bruker én eller to; å prøve alle fem i én video ødelegger leseligheten.

## Regler for leselig kinetisk typografi

Lesing og det å følge bevegelse konkurrerer om samme oppmerksomhet, så et ord som fortsatt beveger seg, er et ord ingen har lest ennå. Disse reglene følger av den ene begrensningen og gjelder enten du animerer i et redigeringsprogram, i CSS eller i en designapp.

### Unngå

- Ord som beveger seg mens du skal lese dem
- Hvert ord animert på ulik måte
- Bokstaver som snurrer, vendes eller blir uskarpe på vei inn
- Klipp raskere enn ordene kan leses
- Bevegelse uten sammenheng med meningen

### Gjør dette

- Beveg inn, land, hold og gå ut
- Én inngangsstil i hele arbeidet
- Korte, enkle baner: opp, inn og bortover
- Hold hver linje lenge nok til å leses to ganger
- La bevegelsen speile ordet: «sakte» kommer sakte inn

Holdetiden er delen folk hopper over. En nyttig tommelfingerregel er omtrent en tredel sekund per ord pluss ett sekund, målt fra linjen har landet, ikke fra den begynte å bevege seg. Test deretter med noen som aldri har sett manuset.

| Ord på skjermen | Holdetid etter landing | Vanlig bruk |
| --- | --- | --- |
| 1 til 2 | Omtrent 1,5 sekunder | Et kraftord eller et tall |
| 3 til 5 | Omtrent 2 til 2,5 sekunder | En overskrift |
| 6 til 10 | Omtrent 3 til 4 sekunder | En undertekst eller sitatlinje |
| Mer enn 10 | Del opp | To linjer, to sekvenser |

Utgangspunkter, ikke lover. Seere som leser på et andrespråk eller en liten skjerm, trenger lenger tid.

## Lag storyboard for ordene før du animerer

Det meste av kinetisk tekst går galt i manuset, ikke på tidslinjen. Del budskapet i sekvenser, gi hver én idé og bestem hvilket enkeltord som fortjener vektlegging.

En stående story-ramme med ordet Sakte i stor skrift

Første sekvens: ett ord lander og holdes. Seeren leser det straks.

Neste stående ramme med hele linjen Rolige søndager starter klokken ni og en liten tekstlinje over

Andre sekvens: resten av linjen kommer til. Det første ordet fanget oppmerksomheten; denne rammen er budskapet.

1. **Skriv sekvensene** Én linje per sekvens, helst under seks ord. Les høyt for å finne naturlige pauser.
2. **Marker vektleggingen** Velg ett ord per sekvens som skal være større, tyngre eller langsommere. Fremheves alt, fremheves ingenting.
3. **Velg ett bevegelsesspråk** Stig opp, Sprett, Sveip eller Skrivemaskin, brukt konsekvent. [Tekstanimasjoner til sosiale medier](https://gradiently.design/nb/guide/text-animation-ideas) sammenligner dem.
4. **Sett bevegelseskurven** Ordene bør bremse på vei inn, så de føles plassert fremfor sluppet. [Bevegelseskurver](https://gradiently.design/nb/guide/easing) forklarer kurvene.
5. **Tilpass til den langsomste leseren** Se i full hastighet uten lyd. Hvis du ikke kan lese hver linje komfortabelt, øk holdetiden.

## Animasjon av variable skrifter i CSS

En [variabel skrift](https://gradiently.design/nb/guide/variable-fonts) har et helt spenn av vekter, bredder eller helninger i én fil, og nettleseren kan bevege seg jevnt langs aksene. Det gjør tekstforvandling rimelig på nettet: et ord kan bli tyngre når pekeren er over, eller puste langsomt i et toppfelt. [MDNs guide til variable skrifter](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) lister standardaksene.

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

Animasjon av font-weight på en variabel skrift interpoleres jevnt. min-width hindrer linjen i å brytes om når ordet blir bredere.

> **Vekt endrer bredde** I de fleste skrifter er fetere bokstaver bredere, så et animert ord skyver naboene rundt. Gi det en fast boks, animer ett ord på egen linje eller velg en skrift laget med samme bredder på tvers av vekter.

Respekter dem som har bedt enheten om mindre bevegelse. Mediespørringen `prefers-reduced-motion` gjør det mulig; [redusert bevegelse](https://gradiently.design/nb/guide/reduced-motion) dekker hva du bør beholde og slå av.

## Kinetisk typografi til sosiale videoer

I sosiale medier ser mange uten lyd, så bevegelige ord bærer fortellingen. Hold linjene midt i rammen, unna plattformenes grensesnitt, og la én tydelig bakgrunn gjøre merkevarejobben mens teksten beveger seg. En bakgrunn som glir under stillestående ord eller ord som kommer rolig inn, er ofte mer leselig enn ord som flyr over en statisk bakgrunn.

Det er samspillet Gradiently er bygd for. En Mark kan bevege seg langsomt bak ordene mens teksten bruker én av fire animasjoner: Stig opp, Sprett, Sveip eller Skrivemaskin. Marken holder det roligste området bak linjene, så de er leselige mens alt beveger seg. Med Pro eksporterer du resultatet som GIF, eller MP4 eller WebM der nettleseren støtter opptak. For bakgrunnsdelen, se [animerte sosiale innlegg](https://gradiently.design/nb/guide/animated-social-posts), og for undertekster, [videoundertekster](https://gradiently.design/nb/guide/video-captions-design).

## FAQ

### Hva er kinetisk typografi?

Tekst som beveger seg eller forvandles over tid, som glidning, skalering eller vektendring, for å formidle mening, rytme eller vektlegging i video, film eller grensesnitt.

### Hvordan holder du kinetisk typografi leselig?

La hver linje lande og stå lenge nok til å leses to ganger, beveg bare én ting om gangen og bruk én konsekvent bevegelsesstil gjennom hele arbeidet.

### Kan du animere variable skrifter i CSS?

Ja. Animer font-weight, font-stretch eller font-variation-settings på en variabel skrift, så interpolerer nettleseren jevnt mellom verdiene.

### Hva er et kjent eksempel på kinetisk typografi?

Åpningstitlene Saul Bass laget til North by Northwest (1959), der navn glir langs rutenettet i en bygningsfasade, er et ofte nevnt tidlig eksempel.

### Bør tekstanimasjoner respektere innstillinger for redusert bevegelse?

Ja. På nettet bruker du mediespørringen prefers-reduced-motion til å stoppe eller forenkle tekstanimasjon for dem som har bedt om mindre bevegelse.