# Kinetic typography: moving type that stays readable

[Canonical HTML page](https://gradiently.design/guide/variable-font-animation)

Moving type grabs attention faster than almost anything on a screen, and loses the reader just as fast if it moves too much. Here is how to keep the motion and the meaning.

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

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

| Kind | What moves | Best for |
| --- | --- | --- |
| Entrance | Words arrive by rising, popping, wiping or typing | Headlines, captions, story frames |
| Rhythmic | Words appear in time with speech or music | Lyric videos, quotes, voiceovers |
| Transforming | A word changes weight, width, size or slant | Emphasis, logos, interfaces |
| Spatial | Words travel through or around a scene | Title sequences, brand films |
| Ambient | Type stays still while the background moves | Posters, loops, calm social posts |

Five families of kinetic type. Most real pieces use one or two; trying all five in one video is where readability dies.

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

| Words on screen | Hold after settling | Typical use |
| --- | --- | --- |
| 1 to 2 | About 1.5 seconds | A punch word, a number |
| 3 to 5 | About 2 to 2.5 seconds | A headline |
| 6 to 10 | About 3 to 4 seconds | A caption or quote line |
| More than 10 | Split it | Two lines, two beats |

Starting points, not laws. Viewers reading in a second language, or on a small screen, need longer.

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

A vertical story frame showing the single word Slow in large type

Beat one: a single word lands and holds. The viewer reads it instantly.

The next vertical frame with the full line Slow Sundays start at nine and a small eyebrow above

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](https://gradiently.design/guide/text-animation-ideas) compares them.
4. **Set the easing** Words should decelerate as they arrive, so they feel placed rather than dropped. [Easing](https://gradiently.design/guide/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](https://gradiently.design/guide/variable-fonts) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) lists the standard axes.

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

Animating font-weight on a variable font interpolates smoothly. The min-width stops the line reflowing as the word gets wider.

> **Weight changes width** In most fonts, bolder letters are wider, so an animating word pushes its neighbours around. Give it a fixed box, animate a single word on its own line, or choose a font designed with the same widths across weights.

Respect people who have asked their device for less motion. The `prefers-reduced-motion` media query is how; [reduced motion](https://gradiently.design/guide/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](https://gradiently.design/guide/animated-social-posts) and for captions, [video captions](https://gradiently.design/guide/video-captions-design).

## FAQ

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