Stylogenyin the style of Kinetic Typography & Variable Type

Digital native · 2016–present · Global / networked, North America, Western Europe

Kinetic Typography & Variable Type

Also known as Kinetic identity, Motion type, Variable-font design, Elastic type, Kinetic type posters

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.

Make something in this styleGet advice in this styleMix it with another style

The word “PHASE” fills the square in extremely tall, heavy letters on black. Repeated, warped outlines shrink toward a horizontal middle line, with off-white fading into orange-red above and vivid blue filling most of the lower half.
AI-generated by Stylogeny from the style’s design choices. Not a real or historical work.

01

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.

New York and European motion-branding studios; OpenType variable fonts were announced at ATypI Warsaw in September 2016

02

Its design choices

From Stylogeny’s vocabulary of design choices: defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

Layout & composition
Space & hierarchy
Typography
Colour
Form & shape
Surface & texture
Ornament
Imagery
Medium & production
Tone & intent
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

03

Make something in this style

Say what you need, and Stylogeny’s image studio draws it from Kinetic Typography & Variable Type’s design choices and checks it against them. It takes about a minute, and you get a link to share.

Rule out a choice, read the prompt, or blend in another style: take this brief to Mix styles.

04

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

Before it

The style it grew out of, and the styles it borrowed from.

This styleKinetic Typography & Variable Type2016–present · Global / networked, North America, Western Europe

After it

The styles that grew out of it.

No later style in the atlas grew out of it yet.

Alike in its design choices

Styles that make many of the same choices, related or not, besides those above.

05

Real works

Artefacts in museums, libraries and archives that show the style, linked at their source.

06

Sources

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

How Stylogeny researches and checks a style: where the facts come from.