Kineettinen typografia: luettavaa liikkuvaa tekstiä

Kineettinen typografia on liikkuvaa tekstiä: sanat liukuvat, skaalautuvat, muuttavat vahvuutta tai ilmestyvät äänen rytmissä välittääkseen merkitystä. Luettavuus säilyy kolmella säännöllä. Sana pysyy paikallaan riittävän kauan luettavaksi, vain yksi asia liikkuu kerrallaan ja liike vastaa sanojen merkitystä. Ilman näitä saat kauniin sumean kuvan. Niiden avulla liikkuva teksti on vahva työkalu somevideoon, alkuteksteihin, mainoksiin ja käyttöliittymiin.

Mitä kineettinen typografia on ja mistä se tuli

Elokuvien alkutekstien suunnittelijat liikuttivat tekstiä kauan ennen näyttöjen yleistymistä. Saul Bassin alkutekstit Alfred Hitchcockin elokuvaan North by Northwest (1959) liu’uttivat nimiä rakennuksen julkisivun viivoja pitkin. Ajatus tekstistä osana näkymää kantaa yhä. Nykyään se näkyy sanoitusvideoissa, selitysvideoissa, tuotelanseerauksissa, sovellusten aloitusopastuksissa ja lähes kaikissa lyhyissä tekstillisissä somevideoissa.

Luettavan kineettisen typografian säännöt

Lukeminen ja liikkeen seuraaminen kilpailevat samasta huomiosta. Yhä liikkuvaa sanaa ei ole vielä luettu. Säännöt perustuvat tähän rajaan ja pätevät editorissa, CSS:ssä ja suunnittelusovelluksessa.

Paikallaan pysymisen vaihe unohtuu helposti. Käytännön nyrkkisääntö on noin kolmasosa sekuntia sanaa kohti ja lisäksi yksi sekunti. Mittaa aika rivin asettumisesta, ei liikkeen alusta. Testaa sitten ihmisellä, joka ei ole nähnyt käsikirjoitusta.

Tee sanoille kuvakäsikirjoitus ennen animointia

Useimmat kineettisen tekstin ongelmat syntyvät käsikirjoituksessa, eivät aikajanalla. Jaa viesti rytmikohtiin, anna jokaiselle yksi ajatus ja päätä, mikä yksi sana ansaitsee painotuksen.

1. 1

   Kirjoita rytmikohdat

   Yksi rivi rytmikohtaa kohti, mielellään alle kuusi sanaa. Lue ääneen löytääksesi luontevat tauot.

2. 2

   Merkitse painotus

   Valitse yksi sana suuremmaksi, vahvemmaksi tai hitaammaksi. Jos kaikkea korostetaan, mikään ei korostu.

3. 3

   Valitse yksi liikekieli

   Nousu, Ponnahdus, Pyyhkäisy tai Kirjoituskone johdonmukaisesti. Somen tekstianimaatiot vertailee niitä.

4. 4

   Aseta hidastus

   Sanojen pitäisi hidastua saapuessaan, jotta ne tuntuvat asetetuilta. Liikkeen pehmennys selittää käyrät.

5. 5

   Ajoita hitaimmalle lukijalle

   Katso täydellä nopeudella ilman ääntä. Jos et pysty lukemaan kaikkia rivejä vaivatta, lisää paikallaanoloaikaa.

Muuttuvan fontin animointi CSS:llä

Muuttuva fontti sisältää samassa tiedostossa kokonaisen vahvuuksien, leveyksien tai kaltevuuksien alueen. Selain voi liikkua akseleilla sulavasti. Muuntuva teksti on siksi verkossa kevyt toteuttaa: sana voi vahvistua osoitettaessa tai hengittää hitaasti aloitusosiossa. MDN:n muuttuvien fonttien opas luettelee vakioakselit.

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

Huomioi käyttäjät, jotka ovat pyytäneet laitteelta vähemmän liikettä. Käytä prefers-reduced-motion-mediakyselyä. Vähennetty liike kertoo, mitä säilyttää ja mitä poistaa.

Kineettinen typografia somevideoissa

Moni katsoo somea ilman ääntä, joten liikkuvat sanat kertovat tarinan. Pidä rivit kuvan keskellä erossa alustan käyttöliittymästä. Anna yhden vahvan taustan kantaa brändiä tekstin liikkuessa. Hitaasti liikkuva tausta paikallaan pysyvien tai varovasti saapuvien sanojen alla on usein luettavampi kuin lentävät sanat staattisella taustalla.

Gradiently on tehty tätä yhdistelmää varten. Mark voi liikkua hitaasti sanojen takana samalla, kun teksti käyttää yhtä neljästä animaatiosta: Nousu, Ponnahdus, Pyyhkäisy tai Kirjoituskone. Mark pitää rauhallisimman alueensa rivien takana, jotta ne pysyvät luettavina liikkeessä. Prolla viet tuloksen GIF:nä tai MP4- tai WebM-videona selaimen tukiessa tallennusta. Taustoja käsittelee animoidut somejulkaisut ja tekstityksiä videotekstitykset.