Newsroom Data Graphics × Sketchnoting and Graphic Recording

Drawn live from speech rather than constructed from data; the pairing makes a plain summary more personal.

From the research on Sketchnoting and Graphic Recording

Mix them and make something Newsroom Data Graphics Sketchnoting and Graphic Recording

A sample layout drawn from the recipe: shapes from Sketchnoting and Graphic Recording, their arrangement from Newsroom Data Graphics, the finish from Sketchnoting and Graphic Recording. Not a real work, and not an image of either style.

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.

Newsroom Data Graphics & Scrollytelling Sketchnoting and Graphic Recording

Type from Sketchnoting and Graphic Recording: Hand-lettering
All caps
Colour from Newsroom Data Graphics: Limited spot colours
Flat fields
Form from Sketchnoting and Graphic Recording: Pictogram
Geometric primitives
Composition from Newsroom Data Graphics: Column grid
Layered information
Surface from Sketchnoting and Graphic Recording

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 · 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

The colours

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

Newsroom Data Graphics & Scrollytelling Sketchnoting and Graphic Recording

#ffffff ground · 36%
#222222 ink · 14%
#faab18 accent · 18%
#e8452c accent · 14%
#1380a1 accent · 10%
#9a9a9a accent · 8%

As CSS

:root {
  --ground: #ffffff;
  --ink: #222222;
  --accent-1: #faab18;
  --accent-2: #e8452c;
  --accent-3: #1380a1;
  --accent-4: #9a9a9a;
  --font-display: "Londrina Solid", cursive;
  --font-text: "Inter", sans-serif;
}

Use it with care

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.

The two styles

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.

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.

More combinations

With Newsroom Data Graphics

With Sketchnoting and Graphic Recording

Every style combination