Stylogeny combining Isotype Pictorial Statistics × Sketchnoting and Graphic Recording

Try

Style combination · Contrasts

Isotype Pictorial Statistics × Sketchnoting and Graphic Recording

Standardised pictogram rows counting statistics against improvised personal icons; borrow its consistency to keep a sketchnote's icons readable.

From the research on Sketchnoting and Graphic Recording

Mix them and make something Isotype Pictorial Statistics Sketchnoting and Graphic Recording

FORMIsotype Pictorial × Sketchnoting and
A sample layout drawn from the recipe: shapes from Sketchnoting and Graphic Recording, their arrangement from Isotype Pictorial Statistics, 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.

Isotype Pictorial Statistics Sketchnoting and Graphic Recording

Type from Sketchnoting and Graphic Recording
Colour from Isotype Pictorial Statistics
Form from Sketchnoting and Graphic Recording
Composition from Isotype Pictorial Statistics

Sketchnoting and Graphic Recording avoids modular grid: this is where the two pull against each other, which is the point of the contrast.

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 · Sketchnoting and Graphic Recording

Form

Londrina Solid; Sketchnoting and Graphic Recording used Hand-lettered bold capitals and Faux-bold outlined lettering

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 Isotype Pictorial Statistics, with a counter-accent from Sketchnoting and Graphic Recording. The ink reads on the ground at 4.5:1 or more.

Isotype Pictorial Statistics Sketchnoting and Graphic Recording

  • #f2ecdf ground · 36%
  • #1a1a1a ink · 14%
  • #c8372d accent · 18%
  • #2c5aa0 accent · 14%
  • #9a9a9a accent · 10%
  • #8a5a3b accent · 8%

As CSS

:root {
  --ground: #f2ecdf;
  --ink: #1a1a1a;
  --accent-1: #c8372d;
  --accent-2: #2c5aa0;
  --accent-3: #9a9a9a;
  --accent-4: #8a5a3b;
  --font-display: "Londrina Solid", cursive;
  --font-text: "Jost", sans-serif;
}

05

More combinations

With Isotype Pictorial Statistics

All 32 combinations with Isotype Pictorial Statistics

With Sketchnoting and Graphic Recording

Every style combination