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

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

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.

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.

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.

1. 1

   Skriv slagen

   En rad per slag, helst under sex ord. Läs dem högt för att hitta de naturliga pauserna.

2. 2

   Markera betoningen

   Välj ett ord per slag som ska vara större, tyngre eller långsammare. Om allt betonas betonas ingenting.

3. 3

   Välj ett rörelsespråk

   Höjning, puff, svep eller skrivmaskin, använt konsekvent. Textanimationer för sociala medier jämför dem.

4. 4

   Ställ in mjukstarten

   Ord ska bromsa in när de anländer, så att de känns placerade snarare än tappade. Easing förklarar kurvorna.

5. 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 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 listar standardaxlarna.

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

Respektera dem som har bett sin enhet om mindre rörelse. Mediefrågan prefers-reduced-motion är sättet; minskad rörelse 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 och för bildtexter, undertexter i video.