Kinetisk typografi: bevegelig tekst som er leselig

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.

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.

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.

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.

1. 1

   Skriv sekvensene

   Én linje per sekvens, helst under seks ord. Les høyt for å finne naturlige pauser.

2. 2

   Marker vektleggingen

   Velg ett ord per sekvens som skal være større, tyngre eller langsommere. Fremheves alt, fremheves ingenting.

3. 3

   Velg ett bevegelsesspråk

   Stig opp, Sprett, Sveip eller Skrivemaskin, brukt konsekvent. Tekstanimasjoner til sosiale medier sammenligner dem.

4. 4

   Sett bevegelseskurven

   Ordene bør bremse på vei inn, så de føles plassert fremfor sluppet. Bevegelseskurver forklarer kurvene.

5. 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 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 lister standardaksene.

/* 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 som har bedt enheten om mindre bevegelse. Mediespørringen prefers-reduced-motion gjør det mulig; redusert bevegelse 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, og for undertekster, videoundertekster.