Stylogeny combining Data Humanism × Newsroom Data Graphics

Try

Style combination · Contrasts

Data Humanism × Newsroom Data Graphics

Newsroom graphics use chart types readers already know, labelled directly so they can be read at a glance; data humanism invents a new hand-drawn code for each dataset and asks for slow reading. Use the newsroom chart for the finding, a hand-drawn data portrait for the people behind it.

From the research on Newsroom Data Graphics & Scrollytelling

Mix them and make something Data Humanism Newsroom Data Graphics

GridData Humanism × Newsroom Data Graphics
A sample layout drawn from the recipe: shapes from Newsroom Data Graphics, 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 Newsroom Data Graphics & Scrollytelling

Type from Data Humanism
Colour from Newsroom Data Graphics
Form from Newsroom Data Graphics
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 · Data Humanism

Grid

Caveat, standing in for The designer's own handwriting in pen or pencil for titles, legends and annotations (the Dear Data postcards; the red handwritten script of Lupi's Print manifesto, 2017)

Text · Newsroom Data Graphics

The house style of newspaper graphics desks since about 2009–2011 (the New York Times graphics desk, D3.js, the Guardian Datablog): conventional charts drawn from the data, on a white or pale paper ground with light grey gridlines and no axis titles, lines labelled directly in place of a legend where possible and short annotations saying what to look at. A flush-left title states the finding and a source line closes the chart; one highlight colour picks out the story against grey context. In long-form pieces the graphic stays pinned while the text scrolls past and steps it through its states.

Inter; Newsroom Data Graphics used Helvetica and Arial

03

The colours

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

Data Humanism Newsroom Data Graphics & Scrollytelling

  • #ffffff ground · 36%
  • #222222 ink · 14%
  • #faab18 accent · 18%
  • #f2c14e accent · 14%
  • #1380a1 accent · 10%
  • #e0574a accent · 8%

As CSS

:root {
  --ground: #ffffff;
  --ink: #222222;
  --accent-1: #faab18;
  --accent-2: #f2c14e;
  --accent-3: #1380a1;
  --accent-4: #e0574a;
  --font-display: "Caveat", cursive;
  --font-text: "Inter", sans-serif;
}

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.

Newsroom Data Graphics & Scrollytelling: The look signals checked, sourced reporting: never use it to present invented, unsourced or AI-generated figures as data, always name the source, and do not copy a newspaper's proprietary typefaces, masthead or logo. Give every chart a text summary and do not let colour alone carry the meaning, for readers who use screen readers or cannot tell the highlight colours apart. In a mock-up or generated image the figures are invented: label them plainly as illustrative (for example 'Source: illustrative data'), and never attribute them to a real newspaper, agency, survey or person.

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. An infographic titled “Greener Commutes” presents line and bar charts comparing commuting methods from 2013 to 2023. Teal, orange, blue and gray graphics on a white background show falling car use, growing low-carbon travel and an estimated reduction in commute emissions. 2009–present · North America, Western Europe Newsroom Data Graphics & Scrollytelling The house style of newspaper graphics desks since about 2009–2011 (the New York Times graphics desk, D3.js, the Guardian Datablog): conventional charts drawn from the data, on a white or pale paper ground with light grey gridlines and no axis titles, lines labelled directly in place of a legend where possible and short annotations saying what to look at. A flush-left title states the finding and a source line closes the chart; one highlight colour picks out the story against grey context. In long-form pieces the graphic stays pinned while the text scrolls past and steps it through its states.

05

More combinations

With Data Humanism

With Newsroom Data Graphics

Every style combination