The short version
- Kinetic typography is text that moves, changes or transforms over time to carry meaning, rhythm or emphasis.
- Readable kinetic type keeps each word still long enough to be read, and moves only one thing at a time.
- Variable fonts let you animate weight, width or slant smoothly on the web, because the axes interpolate rather than swap between files.
- Animating weight changes a word's width, so set a fixed box or choose a font whose widths stay constant across weights.
- Websites should respect the prefers-reduced-motion setting by stopping or simplifying text animation for people who ask for less movement.
On this page
Kinetic typography is type that moves: words that slide, scale, change weight or appear in rhythm with sound to carry meaning, not just to decorate. It stays readable when three rules hold. Each word sits still long enough to be read, only one thing moves at a time, and the motion matches what the words mean. Break those and you get a pretty blur. Keep them and moving type is one of the strongest tools you have for social video, title sequences, ads and interfaces.
What kinetic typography is, and where it came from
Film title designers made type move long before screens were everywhere. Saul Bass's opening titles for Alfred Hitchcock's North by Northwest (1959) sent names sliding along the lines of a building's facade, and that idea, type that behaves like part of the scene, still drives the craft. Today it lives in lyric videos, explainers, product launches, app onboarding and almost every short social video with words on it.
Best for
Best for
What moves
Best for
Best for
Best for
Rules for readable kinetic typography
Reading and tracking motion compete for the same attention, so a word that is still moving is a word nobody has read yet. These rules come from that one limit, and they apply whether you animate in an editor, in CSS or in a design app.
Avoid
- Words that move while you are meant to read them
- Every word animating in a different way
- Letters spinning, flipping or blurring as they arrive
- Cuts faster than the words can be read
- Motion that has nothing to do with the meaning
Do
- Move in, settle, hold, then leave
- One entrance style for the whole piece
- Short, simple paths: up, in, across
- Hold each line long enough to read it twice
- Let the motion echo the word: "slow" arrives slowly
The hold is the part people skip. A working rule of thumb is about a third of a second per word, plus a second, measured from the moment the line has settled, not from when it started moving. Then test with someone who has never seen the script.
Typical use
Typical use
Typical use
Hold after settling
Typical use
Storyboard the words before you animate
Most kinetic type goes wrong in the script, not the timeline. Break the message into beats, give each beat one idea, and decide which single word in each beat deserves emphasis.
Beat one: a single word lands and holds. The viewer reads it instantly.
Beat two: the rest of the line joins it. The first word was the hook; this frame is the message.
- 1
Write the beats
One line per beat, ideally under six words. Read them aloud to find the natural pauses.
- 2
Mark the emphasis
Pick one word per beat to be bigger, heavier or slower. If everything is emphasised, nothing is.
- 3
Choose one motion language
Rise, pop, wipe or typewriter, used consistently. Text animations for social compares them.
- 4
Set the easing
Words should decelerate as they arrive, so they feel placed rather than dropped. Easing explains the curves.
- 5
Time to the slowest reader
Watch it at full speed with the sound off. If you can't read every line comfortably, add hold time.
Variable font animation in CSS
A variable font holds a whole range of weights, widths or slants in one file, and the browser can move smoothly along those axes. That makes transforming type cheap on the web: a word can grow heavier on hover, or breathe slowly in a hero. MDN's guide to variable fonts lists the standard axes.
/* 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; }
}Respect people who have asked their device for less motion. The prefers-reduced-motion media query is how; reduced motion covers what to keep and what to switch off.
Kinetic typography for social video
On social, many people watch with the sound off, so moving words carry the story. Keep lines in the middle of the frame, clear of each platform's interface, and let one strong background do the brand work while the type moves. A drifting background under still or gently arriving words is often more readable than words flying across a static one.
That is the pairing Gradiently is built for. A Mark can move slowly behind the words while the text uses one of four animations, rise, pop, wipe or typewriter, and the Mark keeps its calmest region behind the lines so they stay readable as everything moves. With Pro, you export the result as a GIF, or as MP4 or WebM where the browser supports recording. For the background side, see animated social posts and for captions, video captions.
Questions people ask
What is kinetic typography?
Text that moves or transforms over time, such as sliding, scaling or changing weight, to carry meaning, rhythm or emphasis in video, film or interfaces.
How do you keep kinetic typography readable?
Let each line settle and hold long enough to read twice, move only one thing at a time, and use one consistent motion style throughout.
Can you animate variable fonts in CSS?
Yes. Animate font-weight, font-stretch or font-variation-settings on a variable font and the browser interpolates smoothly between values.
What is a famous example of kinetic typography?
Saul Bass's opening titles for North by Northwest (1959), where names slide along the grid of a building's facade, are a frequently cited early example.
Should text animations respect reduced motion settings?
Yes. On the web, use the prefers-reduced-motion media query to stop or simplify text animation for people who have asked for less movement.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile