Animation · Motion
Words that move.
Pulp studies how words move people. Sometimes that means making words move themselves. On screens, motion has become part of typography: how a word arrives changes how it reads, the same way its weight or its spacing does.
Motion lives on the web. The fonts you download stay still, as fonts should; the motion is something you add to your page.
- metal type
For centuries, type stood still.
Letters were cast in metal, one block per letter, and locked in place. A word looked the same every time anyone read it.
- the 1950s
Film taught words to perform.
Title designers like Saul Bass made letters arrive, slide and land, so the name of a film could set its mood before the first scene.
- screens
Screens made words respond.
On a screen, words answer you. They appear as you type, change when you tap, and tell you what's happening right now.
- 2016 onward
Fonts learned to change shape.
Variable fonts carry a whole range of weights in one file, so a word can grow bolder or thinner while you watch.
- now
Now motion is part of the type.
How a word moves is a design choice, like its weight or its spacing. A generation raised on interfaces reads motion as fluently as it reads letters.
Five hundred years, standing still. Then the letters learned to move.
Try it
Make your words move.
Pick a motion, tune the timing, and take it to the web. Write on replays the exact strokes each house font was drawn with, in the order they were drawn. Typo Nib and Typo Textura write with a broad nib. In the studio, the same tools move your own letters.
Four rules for words that move.
Motion is a typeface's tone of voice. It can make a word warm, urgent, playful or calm, so it deserves the same discipline as every other part of the craft.
Say the word, don't decorate it
Every motion should change how the word reads. If it only looks busy, it isn't helping.
End on a still that reads
Every motion here finishes on a perfect still frame, and anyone who turns motion off sees that frame and nothing else.
Time is spacing
The delay between letters works like the space between them. Too tight and they crowd, too loose and the word falls apart.
Practice it
Presets are the white belt. Timing, easing and per-letter delay are the black belt. Mastery takes time, even when the letters move fast.
Draw it once, and it can move wherever there is a screen. The font itself stays still, as a font should.
In the studio
Animate your own letters.
Everything you draw in typodojo can move. Open Make it move on the last step, choose a motion, and export an animated SVG, the HTML and CSS for live text, or one line for typodojo.js. Save the motions you like; they wait for you on Your fonts.