# Kinetic Type

> Type that moves — letters appear, drift, snap, scale, and exit in a sequence that makes reading an experience rather than a task.

- Category: Expressive & trend
- Era: 1950s–1990s (film/TV origin); digital 2010s – present
- Origin: Motion graphics, title sequences, MTV and Channel 4 identity
- Lesson: https://design.dawit.dev/styles/kinetic-type
- Try it: https://design.dawit.dev/styles/kinetic-type?style=kinetic-type

## Where it came from

Kinetic typography grew from film title sequences and broadcast identity design. Motion graphics studios in the 1990s pushed type into animation as a standalone art form. On the web, CSS animations and GSAP brought kinetic type to digital products. It is the default mode for big-budget product launch videos and now appears as a micro-interaction pattern in marketing sites.

## How to spot it

- Type as the primary animated element
- Precise timing, easing, and sequencing
- Display weight and scale contrast driven by motion
- Minimal colour — type is the content

## Strengths

- Exceptional for conveying rhythm and brand personality
- Makes reading feel active and engaging
- Works in small spaces where illustration does not fit

## Weaknesses

- Fails completely under prefers-reduced-motion
- Requires careful timing work — hard to rush
- Overused in SaaS hero sections to the point of fatigue

## In the wild

- Se7en film title sequence (Kyle Cooper)
- Apple keynote product video typography
- CSS kinetic type experiments on CodePen

## Use it when

Hero sections, product launches, or onboarding flows where you want to choreograph attention.

## Related styles
[Big Type](https://design.dawit.dev/styles/big-type.md), [Variable Font](https://design.dawit.dev/styles/variable-font.md), [Swiss / International](https://design.dawit.dev/styles/swiss.md)