Stylogeny combining Indian Institutional Modernism × Isotype Pictorial Statistics

Try

Style combination · Pairs well

Indian Institutional Modernism × Isotype Pictorial Statistics

Add Isotype counting figures to the symbol system for public-information campaigns that work across literacy levels.

From the research on Indian Institutional Modernism (NID)

Mix them and make something Indian Institutional Modernism Isotype Pictorial Statistics

IndexIndian Institutional × Isotype Pictorial
A sample layout drawn from the recipe: shapes from Isotype Pictorial Statistics, their arrangement from Indian Institutional Modernism, the finish from Isotype Pictorial Statistics. 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.

Indian Institutional Modernism (NID) Isotype Pictorial Statistics

Type from Indian Institutional Modernism
Colour from Indian Institutional Modernism
Form from Isotype Pictorial Statistics
Composition from Indian Institutional Modernism
Surface from Isotype Pictorial Statistics

02

The type

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

Display · Indian Institutional Modernism

Index

Inter Tight, standing in for Helvetica

Text · Isotype Pictorial Statistics

A method of visual education developed by Otto Neurath, Marie Neurath (Reidemeister) and Gerd Arntz in Red Vienna from 1925, which turns statistics into rows of identical pictograms where a greater quantity is shown by more signs, never by bigger ones. Continued in The Hague and Oxford until 1971, its standardised symbols, flat colours and sans-serif captions laid the foundations of modern information graphics and pictogram systems.

Jost; Isotype Pictorial Statistics used Futura and Gerd Arntz's linocut pictogram set (c. 4,000 signs), used like a fount of picture-type

03

The colours

The ground and leading colours come from Indian Institutional Modernism, with a counter-accent from Isotype Pictorial Statistics. The ink reads on the ground at 4.5:1 or more.

Indian Institutional Modernism (NID) Isotype Pictorial Statistics

  • #fbfaf6 ground · 36%
  • #1a1a1a ink · 14%
  • #f26a21 accent · 18%
  • #c8372d accent · 14%
  • #22409a accent · 10%
  • #138a3c accent · 8%

As CSS

:root {
  --ground: #fbfaf6;
  --ink: #1a1a1a;
  --accent-1: #f26a21;
  --accent-2: #c8372d;
  --accent-3: #22409a;
  --accent-4: #138a3c;
  --font-display: "Inter Tight", sans-serif;
  --font-text: "Jost", sans-serif;
}

05

More combinations

With Indian Institutional Modernism

With Isotype Pictorial Statistics

All 32 combinations with Isotype Pictorial Statistics

Every style combination