Stylogeny combining Kinetic Typography × Neo-Swiss Revival

Try

Style combination · Pairs well

Kinetic Typography × Neo-Swiss Revival

Animate a Swiss-revival grid of tight grotesque headlines and you have most of a kinetic identity; the grid keeps the motion legible.

From the research on Kinetic Typography & Variable Type

Mix them and make something Kinetic Typography Neo-Swiss Revival

FORMKinetic Typography × Neo-Swiss Revival
A sample layout drawn from the recipe: shapes from Neo-Swiss Revival, their arrangement from Neo-Swiss Revival, the finish from Kinetic Typography. Not a real work, and not an image of either style.

01

What each style brings

Each part of the design comes from the style with the stronger say in it, and each style gives at least two.

Kinetic Typography & Variable Type Neo-Swiss Revival

Type from Kinetic Typography
Colour from Neo-Swiss Revival
Form from Neo-Swiss Revival
Composition from Neo-Swiss Revival
Surface from Kinetic Typography

02

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · Kinetic Typography

Form

Inter Tight, standing in for Variable grotesques with weight and width axes (e.g. Roboto Flex)

Text · Neo-Swiss Revival

A contemporary revival of the International Typographic Style, fuelled by digital re-releases of neo-grotesques and by studios such as Experimental Jetset and Norm: modular grids, flush-left grotesque type, huge tightly set headlines and flat fields of black, white and one signal colour. It treats Swiss modernism as a living toolkit for posters, identities and the responsive web, sometimes with a knowing, citational wink.

Inter; Neo-Swiss Revival used Akkurat and Neue Haas Grotesk

03

The colours

The ground and leading colours come from Neo-Swiss Revival, with a counter-accent from Kinetic Typography. The ink reads on the ground at 4.5:1 or more.

Kinetic Typography & Variable Type Neo-Swiss Revival

  • #f5f5f0 ground · 39%
  • #111111 ink · 15%
  • #ff4a1c accent · 20%
  • #1d3bff accent · 15%
  • #c8c8c3 accent · 11%

As CSS

:root {
  --ground: #f5f5f0;
  --ink: #111111;
  --accent-1: #ff4a1c;
  --accent-2: #1d3bff;
  --accent-3: #c8c8c3;
  --font-display: "Inter Tight", sans-serif;
  --font-text: "Inter", sans-serif;
}

04

The two styles

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. 2016–present · Global / networked, North America, Western Europe 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. A typographic arts poster features enormous black words “New” and “Now” stacked on an off-white background divided by thin grid lines. Orange-red, blue and pale gray rectangular fields sit below, alongside smaller exhibition details and the words “Art Ideas People Today.” 2005–present · Global / networked, Central Europe, Western Europe Neo-Swiss Revival A contemporary revival of the International Typographic Style, fuelled by digital re-releases of neo-grotesques and by studios such as Experimental Jetset and Norm: modular grids, flush-left grotesque type, huge tightly set headlines and flat fields of black, white and one signal colour. It treats Swiss modernism as a living toolkit for posters, identities and the responsive web, sometimes with a knowing, citational wink.

05

More combinations

With Kinetic Typography

With Neo-Swiss Revival

All 14 combinations with Neo-Swiss Revival

Every style combination