# Kineettinen typografia: luettavaa liikkuvaa tekstiä

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

Liikkuva teksti nappaa huomion lähes kaikkea muuta nopeammin ja menettää lukijan yhtä nopeasti, jos se liikkuu liikaa. Näin säilytät liikkeen ja merkityksen.

## The short version

- Kineettinen typografia on tekstiä, joka liikkuu tai muuttuu ajan myötä välittääkseen merkitystä, rytmiä tai painotusta.
- Luettava kineettinen teksti pitää jokaisen sanan paikallaan riittävän kauan lukemista varten ja liikuttaa vain yhtä asiaa kerrallaan.
- Muuttuvat fontit mahdollistavat vahvuuden, leveyden ja kaltevuuden sulavan animoinnin verkossa, sillä akselien arvot interpoloidaan tiedostojen vaihtamisen sijaan.
- Vahvuuden animointi muuttaa sanan leveyttä. Käytä kiinteää laatikkoa tai fonttia, jonka leveys säilyy samana eri vahvuuksissa.
- Verkkosivun pitäisi noudattaa prefers-reduced-motion-asetusta ja pysäyttää tai yksinkertaistaa tekstiä vähemmän liikettä pyytäville.

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

| Tyyppi | Mikä liikkuu | Sopii |
| --- | --- | --- |
| Saapuminen | Sanat nousevat, ponnahtavat, pyyhkäisevät tai kirjoittuvat näkyviin | Otsakkeet, tekstitykset ja tarinakehykset |
| Rytminen | Sanat ilmestyvät puheen tai musiikin tahtiin | Sanoitusvideot, sitaatit ja selostukset |
| Muuntuva | Sanan vahvuus, leveys, koko tai kaltevuus muuttuu | Painotus, logot ja käyttöliittymät |
| Tilallinen | Sanat kulkevat näkymän läpi tai ympäri | Alkutekstit ja brändifilmit |
| Tunnelmallinen | Teksti pysyy paikallaan taustan liikkuessa | Julisteet, silmukat ja rauhalliset somejulkaisut |

Viisi kineettisen tekstin ryhmää. Useimmat toteutukset käyttävät yhtä tai kahta. Kaikkien viiden kokeileminen samassa videossa vie luettavuuden.

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

### Vältä

- Sanat liikkuvat, kun niitä pitäisi lukea
- Jokainen sana animoitu eri tavalla
- Kirjaimet pyörivät, kääntyvät tai sumentuvat saapuessaan
- Leikkaukset nopeampia kuin lukeminen
- Liike ilman yhteyttä merkitykseen

### Tee näin

- Saavu, asetu, pysy ja poistu
- Yksi saapumistyyli koko toteutukseen
- Lyhyet yksinkertaiset liikeradat: ylös, sisään, poikki
- Pidä rivi näkyvissä niin kauan, että sen voi lukea kahdesti
- Liike vastaa sanaa: ”hidas” saapuu hitaasti

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.

| Sanoja näytöllä | Paikallaanoloaika | Tavallinen käyttö |
| --- | --- | --- |
| 1 tai 2 | Noin 1,5 sekuntia | Tehostesana tai luku |
| 3:sta 5:een | Noin 2:sta 2,5 sekuntiin | Otsake |
| 6:sta 10:een | Noin 3:sta 4 sekuntiin | Tekstitys tai sitaattirivi |
| Yli 10 | Jaa osiin | Kaksi riviä, kaksi rytmikohtaa |

Lähtökohtia, eivät lakeja. Toisella kielellä tai pieneltä näytöltä lukevat tarvitsevat enemmän aikaa.

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

Pystysuuntainen tarinakehys, jossa on suuri yksittäinen sana Hitaasti

Ensimmäinen rytmikohta: yksi sana saapuu ja pysyy. Katsoja lukee sen heti.

Seuraava pystykuva tekstillä Hitaat sunnuntait alkavat yhdeksältä ja pienellä yläotsakkeella

Toinen rytmikohta: loput rivistä liittyy mukaan. Ensimmäinen sana oli koukku, tämä kuva on viesti.

1. **Kirjoita rytmikohdat** Yksi rivi rytmikohtaa kohti, mielellään alle kuusi sanaa. Lue ääneen löytääksesi luontevat tauot.
2. **Merkitse painotus** Valitse yksi sana suuremmaksi, vahvemmaksi tai hitaammaksi. Jos kaikkea korostetaan, mikään ei korostu.
3. **Valitse yksi liikekieli** Nousu, Ponnahdus, Pyyhkäisy tai Kirjoituskone johdonmukaisesti. [Somen tekstianimaatiot](https://gradiently.design/fi/guide/text-animation-ideas) vertailee niitä.
4. **Aseta hidastus** Sanojen pitäisi hidastua saapuessaan, jotta ne tuntuvat asetetuilta. [Liikkeen pehmennys](https://gradiently.design/fi/guide/easing) selittää käyrät.
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](https://gradiently.design/fi/guide/variable-fonts) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) luettelee vakioakselit.

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

Muuttuvan fontin font-weight-animaatio interpoloi sulavasti. min-width estää rivin uudelleen asettumisen sanan leventyessä.

> **Vahvuus muuttaa leveyttä** Useimmissa fonteissa lihavammat kirjaimet ovat leveämpiä, joten animoitu sana työntää naapureitaan. Anna sille kiinteä laatikko, animoi yksittäinen sana omalla rivillään tai valitse fontti, jossa leveydet säilyvät samoina eri vahvuuksissa.

Huomioi käyttäjät, jotka ovat pyytäneet laitteelta vähemmän liikettä. Käytä `prefers-reduced-motion`-mediakyselyä. [Vähennetty liike](https://gradiently.design/fi/guide/reduced-motion) 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](https://gradiently.design/fi/guide/animated-social-posts) ja tekstityksiä [videotekstitykset](https://gradiently.design/fi/guide/video-captions-design).

## FAQ

### Mitä kineettinen typografia on?

Ajan myötä liikkuvaa tai muuntuvaa tekstiä, joka esimerkiksi liukuu, skaalautuu tai vaihtaa vahvuutta. Se välittää merkitystä, rytmiä tai painotusta videoissa, elokuvissa ja käyttöliittymissä.

### Miten kineettinen typografia pysyy luettavana?

Anna jokaisen rivin asettua ja pysyä niin kauan, että sen voi lukea kahdesti. Liikuta vain yhtä asiaa kerrallaan ja käytä samaa liiketyyliä koko toteutuksessa.

### Voiko muuttuvia fontteja animoida CSS:llä?

Kyllä. Animoi muuttuvan fontin font-weight-, font-stretch- tai font-variation-settings-ominaisuutta. Selain interpoloi arvot sulavasti.

### Mikä on tunnettu kineettisen typografian esimerkki?

Saul Bassin alkutekstit elokuvaan North by Northwest (1959) ovat usein mainittu varhainen esimerkki. Nimet liukuvat rakennuksen julkisivun ruudukkoa pitkin.

### Pitäisikö tekstianimaation huomioida vähennetyn liikkeen asetus?

Kyllä. Käytä verkossa prefers-reduced-motion-mediakyselyä pysäyttääksesi tai yksinkertaistaaksesi animaation vähemmän liikettä pyytäville.