Kinetic Typography: Examples and How to Make It
Kinetic typography is text that moves. Instead of sitting still on screen, words slide, scale, rotate, fade, bounce, or change shape, usually in time with a voice or music. The motion is part of the message: a word that slams onto the screen says something different from a word that drifts in slowly.
You have seen it in film title sequences, lyric videos, product launches, and almost every short video with word-by-word captions. This guide looks at well-known examples first, then breaks down the styles and techniques behind them, and finishes with a practical way to make your own.
Key takeaways
-
Kinetic typography is animated text that uses motion, timing, and scale to add emotion and emphasis to words.
-
It grew out of film title design, with designers such as Saul Bass turning credits into part of the story.
-
Common styles include word-by-word captions, lyric videos, title sequences, logo reveals, and animated stats.
-
The core techniques are simple: position, scale, rotation, and opacity, shaped by easing and timed to audio.
-
Readability comes first. Give every line enough time on screen, limit fonts, and keep strong contrast.
-
You do not need After Effects to start. Templates and AI motion graphics tools can produce kinetic type from a script.
Kinetic typography examples worth studying
North by Northwest title sequence (Saul Bass)
The opening of Alfred Hitchcock’s North by Northwest is often cited as one of the first major uses of kinetic type in film. Credits glide along diagonal lines that turn out to be the grid of a glass office building. What to learn: text can follow the structure of the scene around it.
Psycho title sequence (Saul Bass)
For Psycho, Bass split the credits with sharp horizontal and vertical bars that slice the names apart and pull them back together. What to learn: the way text breaks and moves can carry the mood of the whole piece, before a single image appears.
Se7en title sequence (Kyle Cooper)
The Se7en opening uses scratched, jittery, hand-made type that flickers across close-ups of notebooks. It changed how many designers thought about credits. What to learn: imperfect, textured type can feel more personal and unsettling than clean motion.
Catch Me If You Can title sequence (Kuntzel + Deygas)
The opening of Catch Me If You Can mixes flat, retro shapes with type that slides and reveals in a playful chase. What to learn: matching the type style to an era or theme makes the motion feel intentional.
Stranger Things opening titles (Imaginary Forces)
Red, glowing letters drift slowly toward each other and lock into the show’s logo. There is almost no other image. What to learn: slow, minimal motion can be as memorable as fast cuts, especially for a logo reveal.
Prince, “Sign o’ the Times”
This music video is built almost entirely from animated lyrics, and it is often described as an early forerunner of the modern lyric video. What to learn: when the words are the message, the words can be the whole video.
Year-in-review recaps from apps
Recap stories from streaming and fitness apps lean on big animated numbers and short phrases (“You listened for…”), timed to music. What to learn: kinetic type makes data personal and easy to share.
Word-by-word captions on short videos
On TikTok and Reels, many creators use captions that pop in one word at a time, with key words enlarged or colored. What to learn: kinetic typography is not only for designers. It is one of the most common ways people keep viewers watching with the sound off.
What are the main styles of kinetic typography?
| Style | What it looks like | Best for |
|---|---|---|
| Word-by-word captions | Each word appears as it is spoken, key words highlighted | Talking videos, tips, social clips |
| Lyric video | Lyrics animated in time with the music | Songs, audio teasers, podcasts |
| Title sequence | Names or titles moving with the scene | Intros, trailers, series openers |
| Logo reveal | Letters assemble into a brand name or logo | Brand intros and outros |
| Animated stats | Numbers count up or scale in with short labels | Reports, recaps, product claims |
| Full typographic explainer | Whole story told mainly in moving text and shapes | Explainers, announcements, manifestos |
| Scene-interactive type | Text placed into footage, following objects or surfaces | Ads, travel and product videos |
A simple caption on a talking head video and a two-minute typographic explainer use the same building blocks. The difference is how many of them you use and how tightly they are timed.
Kinetic typography techniques
Most kinetic type comes down to four properties, animated over time:
| Property | What it does | Example use |
|---|---|---|
| Position | Moves text into, across, or out of the frame | Slide in from the left on each new idea |
| Scale | Grows or shrinks text | Punch in on the key word |
| Rotation | Turns text around a point | Flip a word to show a change of meaning |
| Opacity | Fades text in or out | Soft transitions between lines |
Designers then add a few extra tools on top:
-
Easing. Movement that speeds up or slows down feels natural; constant speed feels mechanical. Ease out when text arrives and ease in when it leaves.
-
Masks and reveals. Text appears from behind a shape or line, which looks cleaner than a plain fade.
-
Letter spacing (tracking). Spreading or tightening letters over time adds tension or calm.
-
Typewriter and stagger effects. Letters or words appear one after another.
-
Color and weight changes. A word switches to bold or a brand color to show emphasis.
-
Sync to audio. Motion lands on the beat of the music or the stress of the voice.
How to make kinetic typography step by step
-
Write a short script. Kinetic type works best with short lines. Cut every sentence to its essential words, and mark the words you want to emphasize.
-
Record or choose the audio. A voiceover or music track sets the rhythm. Animate to the audio, not the other way around.
-
Pick your fonts. One or two typefaces are enough. A bold display font for emphasis and a clean sans serif for supporting lines is a reliable pair.
-
Design the key frames first. Lay out how each line should look when it is fully on screen. This is your end state.
-
Animate entrances and exits. Use position, scale, rotation, and opacity, and add easing so the motion feels smooth.
-
Time each line to the audio. Land key words on beats or stressed syllables. Leave enough time to read every line comfortably.
-
Add supporting elements. Simple shapes, lines, icons, or background color changes can guide the eye without competing with the text.
-
Review with fresh eyes. Watch with and without sound, on a phone, at full speed. If you have to pause to read, slow it down.
-
Export in the right sizes. Vertical 9:16 for TikTok and Reels, square or 4:5 for feeds, and 16:9 for websites. Keep text out of the edges covered by app buttons; our tiktok video size guide shows the safe zones.
Which tool should you use to make kinetic typography?
| Approach | How it works | Good for | Trade-off |
|---|---|---|---|
| Professional motion software (for example, Adobe After Effects) | Animate every layer with keyframes and effects | Full creative control, film-quality titles | Steep learning curve, slow to produce |
| Video editors with text presets | Pick an animated text style and drop in your words | Captions and quick social clips | Limited control, looks similar to other videos |
| Templates | Replace the words and colors in a pre-built animation | Fast, polished one-off pieces | Hard to adapt to longer scripts |
| AI motion graphics tools | Generate scenes and animated text from a script or link, then edit | Explainers, announcements, regular social content | Review needed for timing and wording |
Tips for readable kinetic typography
-
Give each line time. As a rough guide, viewers need about a second for every three or four words, plus a moment to absorb it.
-
Use motion for meaning. Animate the important word, not every word.
-
Keep contrast high. Light text on dark or dark text on light, with no busy background behind small type.
-
Limit simultaneous motion. One main movement at a time is easier to follow.
-
Stay consistent. Reuse the same entrance and exit styles so the video feels designed, not random.
-
Avoid rapid flashing. W3C accessibility guidance warns against content that flashes more than three times in one second, since it can trigger seizures.
Kinetic typography mistakes to avoid
| Mistake | Fix |
|---|---|
| Too much text per screen | Split it into shorter lines and more scenes |
| Every word animated differently | Pick two or three motion styles and repeat them |
| Text moving off-beat | Line up key words with the audio waveform |
| Decorative fonts for long lines | Save display fonts for short emphasis words |
| Captions hidden behind app buttons | Keep text inside the platform’s safe zone |
| No brand consistency | Use your brand fonts and colors across every video |
Make kinetic typography videos with LayerProof
You do not have to build every keyframe by hand. With Mylar, LayerProof’s motion graphics video ai, you paste a script, a document, an image, or a link, and it builds scenes with animated text, visuals, and synchronized AI narration. Import your brand kit so fonts and colors stay consistent, then refine any scene by asking the AI agent or by adjusting keyframes for position, scale, rotation, and opacity yourself. Layers and audio tracks let you fine-tune timing, and you can export in multiple dimensions for each platform.
When the videos are ready, LayerProof schedules and publishes them to TikTok, Instagram, and Facebook from one Calendar. Plans start at $5 a month. Paste your next script, and get started today.
Kinetic typography FAQ
What is kinetic typography?
Kinetic typography is animated text. Words move, scale, rotate, fade, or change shape over time, often in sync with voice or music, to add emphasis and emotion.
What is the difference between kinetic typography and motion graphics?
Motion graphics is the broader category of animated graphic design, including shapes, icons, charts, and illustrations. Kinetic typography is the part of motion graphics that focuses on moving text.
What software is used for kinetic typography?
Professional designers often use Adobe After Effects. Many video editors offer animated text presets, and AI motion graphics tools can generate kinetic type from a script.
Can I make kinetic typography without After Effects?
Yes. Templates, video editors with text presets, and AI motion graphics tools let you create kinetic type without manual keyframing, though professional software offers the most control.
Where is kinetic typography used?
Film and TV title sequences, lyric videos, ads, product launches, explainer videos, social media captions, presentations, and brand intros.
How do I keep kinetic typography readable?
Use short lines, one or two fonts, strong contrast, and enough time on screen for each line. Animate only the words that need emphasis.
References
-
The best kinetic typography: must-see examples, Creative Bloq
-
Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold, W3C
-
Saul Bass, Art of the Title