Stylogeny combining Data Humanism × Sketchnoting and Graphic Recording

Try

Style combination · Pairs well

Data Humanism × Sketchnoting and Graphic Recording

Both keep the human hand visible in explanatory drawing; sketchnoting adds live speed and containers.

From the research on Sketchnoting and Graphic Recording

Mix them and make something Data Humanism Sketchnoting and Graphic Recording

HOMEData Humanism × Sketchnoting and2014 · 2007
A sample layout drawn from the recipe: shapes from Sketchnoting and Graphic Recording, their arrangement from Data Humanism, the finish from Data Humanism. 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.

Data Humanism Sketchnoting and Graphic Recording

Type from Sketchnoting and Graphic Recording
Colour from Sketchnoting and Graphic Recording
Form from Sketchnoting and Graphic Recording
Composition from Data Humanism
Surface from Data Humanism

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

Home

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

Text · Data Humanism

An information-design approach that draws data rather than charting it, treating numbers as personal, approximate and human. Named by Giorgia Lupi in Print (2017) after Dear Data (2014–15), her year of weekly hand-drawn postcards with Stefanie Posavec, it invents a visual code for each dataset: many small hand-made marks whose shape, colour and orientation each encode a variable, decoded through a custom legend and handwritten notes. Dense and layered, it asks to be read slowly, against Isotype's standard signs and at-a-glance dashboards; Federica Fragapane carries it into vector work.

Caveat; Data Humanism used The designer's own handwriting in pen or pencil for titles, legends and annotations and Giorgia Lupi, a custom typeface made at Pentagram from Lupi's handwriting (2019), used in What Counts

03

The colours

The ground and leading colours come from Sketchnoting and Graphic Recording, with a counter-accent from Data Humanism. The ink reads on the ground at 4.5:1 or more.

Data Humanism Sketchnoting and Graphic Recording

  • #ffffff ground · 36%
  • #1a1a1a ink · 14%
  • #e8452c accent · 18%
  • #f2c14e accent · 14%
  • #9a9a9a accent · 10%
  • #d8d8d8 accent · 8%

As CSS

:root {
  --ground: #ffffff;
  --ink: #1a1a1a;
  --accent-1: #e8452c;
  --accent-2: #f2c14e;
  --accent-3: #9a9a9a;
  --accent-4: #d8d8d8;
  --font-display: "Londrina Solid", cursive;
  --font-text: "Caveat", cursive;
}

Use it with care

Data Humanism: Data portraits are usually drawn from real people's lives (health, moods, relationships, locations): get consent and anonymise before publishing other people's personal data. Because the custom encodings cannot be read at a glance, give a plain-text summary and the key alongside the drawing for readers who use screen readers or are in a hurry.

04

The two styles

A hand-drawn infographic titled “Walking Year” charts a year of walks in twelve winding rows of colourful dots, leaves, triangles, spirals and weather symbols. A key runs down the right side, with summary statistics and dot charts along the bottom on cream paper. 2014–present · Southern Europe, North America, Western Europe Data Humanism An information-design approach that draws data rather than charting it, treating numbers as personal, approximate and human. Named by Giorgia Lupi in Print (2017) after Dear Data (2014–15), her year of weekly hand-drawn postcards with Stefanie Posavec, it invents a visual code for each dataset: many small hand-made marks whose shape, colour and orientation each encode a variable, decoded through a custom legend and handwritten notes. Dense and layered, it asks to be read slowly, against Isotype's standard signs and at-a-glance dashboards; Federica Fragapane carries it into vector work. A hand-drawn poster headed “SMALL STEPS” shows stick figures progressing from confusion to examining an idea, climbing stairs, checking a list, and walking a winding path toward a sunrise. Orange-red arrows link the scenes, with a sprouting plant at the lower left. 2007–present · Global / networked, North America Sketchnoting and Graphic Recording Notes of a talk, book or meeting drawn live by hand on a single page, mixing hand-lettered headings, simple icons, containers and connectors. Scope: this entry treats personal sketchnoting and professional graphic recording as one practice, though graphic facilitation is older than the term. Clarity matters more than aesthetics.

05

More combinations

With Data Humanism

With Sketchnoting and Graphic Recording

Every style combination