typography
Kinetic typography
also called motion typography, animated type, text in motion, type animation
Type animated over time, where letters and words move, scale, stagger, or morph so the setting carries tone and emphasis a static line cannot.
Kinetic typography is type that performs. Words drop, swell, drift apart, stutter, or turn a corner, and the movement is doing the work a typographer would otherwise ask of size, weight, or space. The test that separates it from animation that merely involves text is whether the motion is part of the reading: if the same sentence set still, at the same size, would say exactly the same thing, the movement was an entrance and not kinetic typography. A word that falls because the sentence is about falling has been typeset in time.
On the web it is built from a small kit. Letters or words are split into their own boxes and given a transform each, offset by a stagger so the line arrives in reading order rather than all at once. A variable font turns weight, width, or optical size into something continuous, so a word can genuinely grow heavier along a variation axis instead of cutting between two static files. And the easing carries most of the tone: the same drop reads as gentle, as mechanical, or as a collapse depending only on the curve it lands on.
The discipline is knowing where it belongs. Motion in type costs the reader their place, so it lives in titles, transitions, callouts, hero lines, and lyric videos, and it stays out of body copy and out of anything a person has to re-read. A performed word also has to end somewhere legible: the resting frame is the one most readers will actually see, and a treatment that only makes sense while it is moving has left them a broken sentence. Split letters need their word kept whole for assistive technology, so the text is one accessible string with the animation applied to spans inside it, not a stack of separate letters.
Because the motion is the message here rather than a flourish, it also has to answer a reader who has asked for less of it. Under prefers-reduced-motion the honest answer is the end pose, held still, which is why a kinetic setting is worth designing backwards from its final frame. The craft is old and pre-digital: Saul Bass moved letterforms across film titles in the 1950s, Kyle Cooper’s later title sequences made the treatment of the letters carry the mood of the film, and both were solving the same problem, which is how a line of type behaves once it is allowed to take time.
Which word?
| If you want | say |
|---|---|
| the type itself performs rather than sits still | kinetic typography |
| text should arrive as if being written right now | typewriter effect |
Related
See also: Variable font