Stylogeny combining Mavo × Die Neue Typographie

Try

Style combination · Contrasts

Mavo × Die Neue Typographie

Murayama quoted Moholy-Nagy, yet Mavo refused the objective, standardized type the New Typography preached; set a calm sans-serif page against one Mavo spread to stage order against hand-made revolt.

From the research on Mavo

Mix them and make something Mavo Die Neue Typographie

FutureMavo × Die Neue Typographie1923 · 1923
A sample layout drawn from the recipe: shapes from Mavo, their arrangement from Die Neue Typographie, the finish from Mavo. 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.

Mavo Die Neue Typographie

Type from Mavo
Colour from Die Neue Typographie
Form from Mavo
Composition from Die Neue Typographie

Mavo avoids generous white space: this is where the two pull against each other, which is the point of the contrast.

Surface from Mavo

02

The type

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

Display · Mavo

Future

Big Shoulders, standing in for Blocky hand-drawn masthead letters

Text · Die Neue Typographie

The programme that turned avant-garde experiment into a functional typographic method, named by Moholy-Nagy in 1923 and codified in Jan Tschichold's 'elementare typographie' (1925) and Die neue Typographie (1928). It demanded asymmetric layouts, sans-serif type, standard paper formats, photography and active white space, all justified by clarity of communication, and spread through the Ring neue Werbegestalter and designers from Delft to Prague.

Jost; Die Neue Typographie used Futura and Akzidenz-Grotesk

03

The colours

The ground and leading colours come from Die Neue Typographie, with a counter-accent from Mavo. The ink reads on the ground at 4.5:1 or more.

Mavo Die Neue Typographie

  • #f3efe4 ground · 36%
  • #141414 ink · 14%
  • #d32a1f accent · 18%
  • #7d7a73 accent · 14%
  • #dbb13a accent · 10%
  • #c9367f accent · 8%

As CSS

:root {
  --ground: #f3efe4;
  --ink: #141414;
  --accent-1: #d32a1f;
  --accent-2: #7d7a73;
  --accent-3: #dbb13a;
  --accent-4: #c9367f;
  --font-display: "Big Shoulders", sans-serif;
  --font-text: "Jost", sans-serif;
}

05

More combinations

With Mavo

With Die Neue Typographie

All 17 combinations with Die Neue Typographie

Every style combination