# Kinetic Typography & Variable Type

> Typography as the moving image: letterforms that stretch, squash, rotate and morph along variable-font axes, loop seamlessly and cut to the beat of music, used for identities, social-media posters and digital out-of-home screens. Enabled by OpenType variable fonts (2016) and popularised by studios such as DIA, it treats a typeface with axes and a motion toolkit, not a fixed logo, as the core of a brand.

- Period: 2016–present
- Where: Global / networked, North America, Western Europe
- Origin: New York and European motion-branding studios; OpenType variable fonts were announced at ATypI Warsaw in September 2016
- Branch: Digital native
- Also known as: Kinetic identity, Motion type, Variable-font design, Elastic type, Kinetic type posters
- Page: https://stylogeny.com/styles/kinetic-typography/

## How it works

- Make the letters the whole picture: fill the frame edge to edge with type and let movement supply the drama.
- Animate along real typographic axes (weight, width, slant or custom axes) so every frame remains a legible letterform.
- Build seamless loops and cut transitions to the rhythm of sound.
- Keep colour to black, white and one signal hue so form and motion carry the identity.
- Deliver a motion toolkit or variable typeface rather than a single static mark.

## Its design choices

Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

### Layout & composition
- [Full bleed](https://stylogeny.com/design-choices/full-bleed/) (characteristic)
- [Central symmetry](https://stylogeny.com/design-choices/central-symmetry/) (characteristic)
- [Modular grid](https://stylogeny.com/design-choices/modular-grid/) (occasional)

### Space & hierarchy
- [Sequential narrative](https://stylogeny.com/design-choices/sequential-narrative/) (defining)
- [Repetition & rhythm](https://stylogeny.com/design-choices/repetition-and-rhythm/) (characteristic)
- [Extreme scale contrast](https://stylogeny.com/design-choices/extreme-scale-contrast/) (characteristic)
- [Illusion of depth](https://stylogeny.com/design-choices/illusion-of-depth/) (occasional)
- [Visual tension](https://stylogeny.com/design-choices/visual-tension/) (occasional)

### Typography
- [Type as image](https://stylogeny.com/design-choices/type-as-image/) (defining)
- [Experimental & distorted](https://stylogeny.com/design-choices/experimental-and-distorted/) (defining)
- [Grotesque & neo-grotesque](https://stylogeny.com/design-choices/grotesque-and-neo-grotesque/) (characteristic)
- [Tight setting](https://stylogeny.com/design-choices/tight-setting/) (characteristic)
- [All caps](https://stylogeny.com/design-choices/all-caps/) (characteristic)
- [Condensed display](https://stylogeny.com/design-choices/condensed-display/) (occasional)

### Colour
- [Monochrome](https://stylogeny.com/design-choices/monochrome/) (characteristic)
- [Limited spot colours](https://stylogeny.com/design-choices/limited-spot-colours/) (characteristic)
- [Dark ground](https://stylogeny.com/design-choices/dark-ground/) (characteristic)
- [Flat fields](https://stylogeny.com/design-choices/flat-fields/) (characteristic)
- [Fluorescent & neon](https://stylogeny.com/design-choices/fluorescent-and-neon/) (occasional)

### Form & shape
- [Optical pattern](https://stylogeny.com/design-choices/optical-pattern/) (occasional)
- [Non-representational](https://stylogeny.com/design-choices/non-representational/) (occasional)

### Surface & texture
- [Flat](https://stylogeny.com/design-choices/flat/) (characteristic)
- [Chrome & 3D render](https://stylogeny.com/design-choices/chrome-and-3d-render/) (occasional)

### Ornament
- [Ornament-free](https://stylogeny.com/design-choices/ornament-free/) (characteristic)

### Imagery
- [Typography only](https://stylogeny.com/design-choices/typography-only/) (defining)
- [3D render](https://stylogeny.com/design-choices/3d-render/) (occasional)
- [Generative imagery](https://stylogeny.com/design-choices/generative-imagery/) (occasional)

### Medium & production
- [Motion & broadcast](https://stylogeny.com/design-choices/motion-and-broadcast/) (defining)
- [Web & CSS](https://stylogeny.com/design-choices/web-and-css/) (characteristic)
- [Generative & AI](https://stylogeny.com/design-choices/generative-and-ai/) (occasional)
- [Architecture & signage](https://stylogeny.com/design-choices/architecture-and-signage/) (occasional)

### Tone & intent
- [Playful & witty](https://stylogeny.com/design-choices/playful-and-witty/) (characteristic)
- [Technological & futurist](https://stylogeny.com/design-choices/technological-and-futurist/) (characteristic)

Avoids: Abundant decoration, Floral & vegetal, Painterly illustration, Line illustration, Naturalistic depiction, Skeuomorphic material, Classical text block

Palette: #0b0b0b, #f3f3ef, #ff3d1f, #2b3dff, #c8ff3a

Typefaces: Variable grotesques with weight and width axes (e.g. Roboto Flex), Decovar (David Berlow), Bahnschrift (Microsoft's variable DIN 1451, 2017), Custom display typefaces drawn for animation

Known for: DIA (Mitch Paone & Meg Donohoe, Brooklyn, founded 2008), kinetic identities and typographic systems; OpenType 1.8 variable fonts, announced by Adobe, Apple, Google and Microsoft at ATypI Warsaw (2016); David Berlow, Decovar, a multi-axis decorative variable font (Font Bureau / Type Network); 36 Days of Type (Nina Sans & Rafa Goicoechea, Barcelona, from 2014), annual letter challenge that spread animated type online; Saul Bass, North by Northwest title sequence (1959), precursor; Kyle Cooper, Se7en title sequence (1995), precursor

## Where it comes from, and what it’s close to

- Grew out of: [Generative & Dynamic Identities](https://stylogeny.com/styles/generative-identity.md) (2007–present)
- Influenced by: [Swiss Punk / New Wave Typography](https://stylogeny.com/styles/new-wave-typography.md) (1968–1990)
- Influenced by: [Neo-Swiss Revival](https://stylogeny.com/styles/swiss-revival.md) (2005–present)
- Influenced by: [Op Art Graphics](https://stylogeny.com/styles/op-art.md) (1960–1975)
- Influenced by: [American Mid-Century Modernism](https://stylogeny.com/styles/american-modernism.md) (1940–1970)
- Alike in its design choices: [Lucerne Poster Scene (Neubad & Südpol Posters)](https://stylogeny.com/styles/lucerne-poster-scene.md) (2007–present), 68% alike
- Alike in its design choices: [Di Tella Graphic Design (Instituto Torcuato Di Tella)](https://stylogeny.com/styles/di-tella-graphics.md) (1960–1970), 64% alike
- Alike in its design choices: [Danmaku Bullet-Comment Overlay](https://stylogeny.com/styles/danmaku-comments.md) (2006–present), 59% alike
- Alike in its design choices: [Zagreb Modernist Graphics (EXAT 51 to Teatar &TD)](https://stylogeny.com/styles/zagreb-modernist-graphics.md) (1951–1975), 58% alike
- Alike in its design choices: [Seoul Independent Graphic Design (Small-Studio Scene)](https://stylogeny.com/styles/seoul-independent-design.md) (2005–present), 56% alike
- Alike in its design choices: [Roman-like Thai Typography (modern loopless Thai)](https://stylogeny.com/styles/thai-loopless-type.md) (1973–present), 53% alike

## Real works

- [A-Trak, In the Loop: A Decade of Remixes: animated typographic covers and packaging](https://web.archive.org/web/20170123093754/http://dia.tv/a-trak-in-the-loop/): DIA (Mitch Paone, Meg Donohoe), c. 2016–17 (DIA project page archived 23 January 2017), Internet Archive Wayback Machine (DIA website, dia.tv)
- [Stattkino & Bourbaki – Innerschweizer Filmpreis (digital poster)](https://www.emuseum.ch/en/objects/231050): Mixer, Luzern (Erich Brechbühl), 2019, Museum für Gestaltung Zürich, Poster Collection (eAd-0034)
- [Haettenschweiler von A bis Z – Schriftgestalter, Grafiker und Künstler (animated digital poster)](https://www.emuseum.ch/en/objects/262580): Studio Feixen, Luzern, 2022, Museum für Gestaltung Zürich, Graphic Design Collection (dig-GS-2022-0010)
- [Variable version of Founder Lanting Hei (方正兰亭黑), weight-axis animation](https://commons.wikimedia.org/wiki/File:Chinese_variable_fonts_Lanting_Hei.gif): Typeface by Founder Type (方正字库); animation by Buernia (Wikimedia Commons user), 2019 (animation uploaded 31 August 2019), Wikimedia Commons

## Sources

- Creative Review, 'DIA: typography and motion design' (creativereview.co.uk)
- It's Nice That, 'Nicer Tuesdays March 2019: DIA' (2019)
- Type Network, 'ATypI Warsaw 2016, Day 2, Part I: the return of the Multiple Master'
- Wikipedia, 'Variable font'

---

From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Kinetic Typography & Variable Type”, https://stylogeny.com/styles/kinetic-typography/