Legible City Wayfinding × Newsroom Data Graphics

Add the annotated locator maps of data journalism to explain a neighbourhood with the same heads-up clarity.

From the research on Legible City Wayfinding (Heads-Up Pedestrian Maps)

Mix them and make something Legible City Wayfinding Newsroom Data Graphics

A sample layout drawn from the recipe: shapes from Legible City Wayfinding, their arrangement from Newsroom Data Graphics, the finish from Legible City Wayfinding. 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.

Legible City Wayfinding (Heads-Up Pedestrian Maps) Newsroom Data Graphics & Scrollytelling

Type from Legible City Wayfinding: Humanist sans
Grotesque & neo-grotesque
Colour from Newsroom Data Graphics: Limited spot colours
Flat fields
Form from Legible City Wayfinding: Pictogram
Rectilinear
Composition from Newsroom Data Graphics: Column grid
Layered information
Surface from Legible City Wayfinding: Flat

The type

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

Display · Legible City Wayfinding

Grid

Fira Sans, standing in for New Johnston, Transport for London's corporate humanist sans, used by AIG as Legible London's identifying font on its vitreous enamel and steel signs

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 Legible City Wayfinding. The ink reads on the ground at 4.5:1 or more.

Legible City Wayfinding (Heads-Up Pedestrian Maps) Newsroom Data Graphics & Scrollytelling

#ffffff ground · 36%
#222222 ink · 14%
#faab18 accent · 18%
#1380a1 accent · 14%
#a9c8de accent · 10%
#b9d3a0 accent · 8%

As CSS

:root {
  --ground: #ffffff;
  --ink: #222222;
  --accent-1: #faab18;
  --accent-2: #1380a1;
  --accent-3: #a9c8de;
  --accent-4: #b9d3a0;
  --font-display: "Fira Sans", sans-serif;
  --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

A wayfinding poster headed “Explore Nearby” shows a circular street map with waterways, green parks, landmark icons, and dashed five- and ten-minute walking rings around a yellow location marker. A legend sits at the upper right, with walking times and directions to four destinations along the bottom.

1999–present · Western Europe, North America, Global / networked Legible City Wayfinding (Heads-Up Pedestrian Maps) City-wide pedestrian wayfinding in which the sign is a map. Free-standing totems such as Legible London's Monolith, Midilith and Minilith carry 'heads-up' maps turned to the way the reader faces, a 'you are here' point ringed by a five-minute walking circle (fifteen minutes on the larger planner maps), and key landmarks drawn as small buildings on a flat street plan (in three dimensions in Bristol and London). A calm sans, high-contrast panels and one identifying accent, such as London's yellow top strip, make a single system of streets, stations, bus shelters and printed maps.

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.

More combinations

With Legible City Wayfinding

With Newsroom Data Graphics

Every style combination