# Kinetisk typografi: text i rörelse som förblir läsbar

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

Text i rörelse fångar uppmärksamhet snabbare än nästan något annat på en skärm, och tappar läsaren lika fort om den rör sig för mycket. Så behåller du både rörelsen och meningen.

## The short version

- Kinetisk typografi är text som rör sig, förändras eller förvandlas över tid för att bära mening, rytm eller betoning.
- Läsbar kinetisk text håller varje ord stilla tillräckligt länge för att läsas, och rör bara en sak i taget.
- Variabla typsnitt låter dig animera vikt, bredd eller lutning mjukt på webben, eftersom axlarna interpoleras i stället för att växla mellan filer.
- Att animera vikten ändrar ordets bredd, så sätt en fast ruta eller välj ett typsnitt vars bredder är konstanta över vikterna.
- Webbplatser bör respektera inställningen prefers-reduced-motion genom att stoppa eller förenkla textanimation för dem som ber om mindre rörelse.

**Kinetisk typografi** är text som rör sig: ord som glider, skalas, byter vikt eller dyker upp i takt med ljud för att bära mening, inte bara för att pryda. Den förblir läsbar när tre regler håller. Varje ord står stilla tillräckligt länge för att läsas, bara en sak rör sig åt gången och rörelsen matchar vad orden betyder. Bryt mot dem och du får en vacker suddighet. Håll dem och text i rörelse är ett av de starkaste verktyg du har för video i sociala medier, titelsekvenser, annonser och gränssnitt.

## Vad kinetisk typografi är, och var den kommer ifrån

Formgivare av filmtitlar fick text att röra sig långt innan skärmar fanns överallt. Saul Bass inledande titlar till Alfred Hitchcocks *Äventyr på hög nivå* (1959) lät namn glida längs linjerna i en byggnads fasad, och den idén, text som beter sig som en del av scenen, driver fortfarande hantverket. Idag finns den i lyrikvideor, förklarande filmer, produktlanseringar, introduktioner i appar och nästan varje kort video i sociala medier med ord på.

| Sort | Vad som rör sig | Bäst för |
| --- | --- | --- |
| Intåg | Ord anländer genom att stiga, poppa upp, svepas fram eller skrivas | Rubriker, bildtexter, storybilder |
| Rytmisk | Ord dyker upp i takt med tal eller musik | Lyrikvideor, citat, berättarröst |
| Förvandlande | Ett ord ändrar vikt, bredd, storlek eller lutning | Betoning, logotyper, gränssnitt |
| Rumslig | Ord färdas genom eller runt en scen | Titelsekvenser, varumärkesfilmer |
| Atmosfärisk | Texten står stilla medan bakgrunden rör sig | Affischer, loopar, lugna inlägg i sociala medier |

Fem familjer av kinetisk text. De flesta verkliga verk använder en eller två; att pröva alla fem i en video är där läsbarheten dör.

## Regler för läsbar kinetisk typografi

Att läsa och att följa rörelse konkurrerar om samma uppmärksamhet, så ett ord som fortfarande rör sig är ett ord som ingen har läst än. Reglerna kommer av den enda gränsen, och de gäller oavsett om du animerar i ett redigeringsprogram, i CSS eller i en designapp.

### Undvik

- Ord som rör sig medan du ska läsa dem
- Varje ord som animeras på ett annat sätt
- Bokstäver som snurrar, vänds eller suddas när de anländer
- Klipp som går fortare än orden hinner läsas
- Rörelse som inte har med betydelsen att göra

### Gör

- Rör in, lägg dig, håll, lämna
- En ingångsstil för hela verket
- Korta, enkla banor: upp, in, tvärs
- Håll varje rad tillräckligt länge för att läsa den två gånger
- Låt rörelsen ekot ordet: ”långsamt” anländer långsamt

Hållet är den del folk hoppar över. En fungerande tumregel är ungefär en tredjedels sekund per ord, plus en sekund, mätt från det ögonblick raden har lagt sig, inte från när den började röra sig. Testa sedan med någon som aldrig sett manuset.

| Ord på skärmen | Håll efter att ha lagt sig | Typisk användning |
| --- | --- | --- |
| 1 till 2 | Ungefär 1,5 sekunder | Ett slagord, ett tal |
| 3 till 5 | Ungefär 2 till 2,5 sekunder | En rubrik |
| 6 till 10 | Ungefär 3 till 4 sekunder | En bildtext eller citatrad |
| Fler än 10 | Dela upp den | Två rader, två slag |

Utgångspunkter, inte lagar. Tittare som läser på ett andraspråk, eller på en liten skärm, behöver längre tid.

## Gör en storyboard för orden innan du animerar

Det mesta av kinetisk text går fel i manuset, inte på tidslinjen. Dela upp budskapet i slag, ge varje slag en idé och bestäm vilket enskilt ord i varje slag som förtjänar betoning.

En stående storybild som visar det enda ordet Långsamt i stor text

Slag ett: ett enda ord landar och hålls. Tittaren läser det direkt.

Nästa stående bild med hela raden Långsamma söndagar börjar klockan nio och en liten överrad ovanför

Slag två: resten av raden ansluter. Det första ordet var kroken; den här bilden är budskapet.

1. **Skriv slagen** En rad per slag, helst under sex ord. Läs dem högt för att hitta de naturliga pauserna.
2. **Markera betoningen** Välj ett ord per slag som ska vara större, tyngre eller långsammare. Om allt betonas betonas ingenting.
3. **Välj ett rörelsespråk** Höjning, puff, svep eller skrivmaskin, använt konsekvent. [Textanimationer för sociala medier](https://gradiently.design/sv/guide/text-animation-ideas) jämför dem.
4. **Ställ in mjukstarten** Ord ska bromsa in när de anländer, så att de känns placerade snarare än tappade. [Easing](https://gradiently.design/sv/guide/easing) förklarar kurvorna.
5. **Tajma för den långsammaste läsaren** Titta på den i full fart utan ljud. Om du inte kan läsa varje rad bekvämt, lägg till hålltid.

## Animering av variabla typsnitt i CSS

Ett [variabelt typsnitt](https://gradiently.design/sv/guide/variable-fonts) rymmer ett helt omfång av vikter, bredder eller lutningar i en fil, och webbläsaren kan röra sig mjukt längs de axlarna. Det gör förvandlande text billig på webben: ett ord kan bli tyngre när man håller muspekaren över det, eller andas långsamt i en hero. [MDN:s guide till variabla typsnitt](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) listar standardaxlarna.

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

Att animera font-weight på ett variabelt typsnitt interpoleras mjukt. Min-width hindrar raden från att flöda om när ordet blir bredare.

> **Vikten ändrar bredden** I de flesta typsnitt är fetare bokstäver bredare, så ett animerat ord knuffar runt sina grannar. Ge det en fast ruta, animera ett enskilt ord på en egen rad, eller välj ett typsnitt som är ritat med samma bredder över vikterna.

Respektera dem som har bett sin enhet om mindre rörelse. Mediefrågan `prefers-reduced-motion` är sättet; [minskad rörelse](https://gradiently.design/sv/guide/reduced-motion) tar upp vad du ska behålla och vad du ska stänga av.

## Kinetisk typografi för video i sociala medier

I sociala medier tittar många utan ljud, så ord i rörelse bär berättelsen. Håll raderna mitt i bilden, fria från varje plattforms gränssnitt, och låt en stark bakgrund göra varumärkesjobbet medan texten rör sig. En bakgrund som driver under stillastående eller sakta anlände ord är ofta mer läsbar än ord som flyger över en statisk.

Det är det paret Gradiently är byggt för. En Mark kan röra sig sakta bakom orden medan texten använder en av fyra animationer, höjning, puff, svep eller skrivmaskin, och Marken håller sin lugnaste del bakom raderna så att de förblir läsbara medan allt rör sig. Med Pro exporterar du resultatet som en GIF, eller som MP4 eller WebM där webbläsaren stöder inspelning. För bakgrundssidan, se [animerade inlägg](https://gradiently.design/sv/guide/animated-social-posts) och för bildtexter, [undertexter i video](https://gradiently.design/sv/guide/video-captions-design).

## FAQ

### Vad är kinetisk typografi?

Text som rör sig eller förvandlas över tid, som att glida, skalas eller byta vikt, för att bära mening, rytm eller betoning i video, film eller gränssnitt.

### Hur håller man kinetisk typografi läsbar?

Låt varje rad lägga sig och hållas tillräckligt länge för att läsas två gånger, rör bara en sak i taget och använd en enhetlig rörelsestil hela vägen.

### Kan man animera variabla typsnitt i CSS?

Ja. Animera font-weight, font-stretch eller font-variation-settings på ett variabelt typsnitt så interpolerar webbläsaren mjukt mellan värdena.

### Vad är ett känt exempel på kinetisk typografi?

Saul Bass inledande titlar till Äventyr på hög nivå (1959), där namn glider längs rutnätet i en byggnads fasad, är ett ofta citerat tidigt exempel.

### Ska textanimationer respektera inställningar för minskad rörelse?

Ja. På webben, använd mediefrågan prefers-reduced-motion för att stoppa eller förenkla textanimation för dem som bett om mindre rörelse.