Metro × International Typographic Style

Take back the Swiss grid and flush-left discipline to keep tile layouts rational.

From the research on Metro (Microsoft Design Language)

Mix them and make something Metro International Typographic Style

A sample layout drawn from the recipe: shapes from Metro, their arrangement from Metro, the finish from Metro. 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.

Metro (Microsoft Design Language) International Typographic Style

Type from International Typographic Style: Grotesque & neo-grotesque
Type as image
Colour from International Typographic Style: Limited spot colours
Flat fields
Form from Metro: Rectilinear
Pictogram
Composition from Metro: Modular grid
Extreme scale contrast
Surface from Metro: Flat

The type

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

Display · International Typographic Style

Grid

Inter Tight, standing in for Akzidenz-Grotesk

Text · Metro

An interface language from Microsoft that put typography ahead of chrome: large light sans-serif headings, flat rectangular Live Tiles, lateral panoramic scrolling and bold single accent colours on dark or white grounds. It borrowed from Swiss graphic design and public transport signage, and gave way to Fluent Design from 2017.

Inter; Metro used Segoe UI and Segoe WP

The colours

The ground and leading colours come from International Typographic Style, with a counter-accent from Metro. The ink reads on the ground at 4.5:1 or more.

Metro (Microsoft Design Language) International Typographic Style

#f2f0e9 ground · 36%
#111111 ink · 14%
#e1251b accent · 18%
#fa6800 accent · 14%
#1f4e9c accent · 10%
#d80073 accent · 8%

As CSS

:root {
  --ground: #f2f0e9;
  --ink: #111111;
  --accent-1: #e1251b;
  --accent-2: #fa6800;
  --accent-3: #1f4e9c;
  --accent-4: #d80073;
  --font-display: "Inter Tight", sans-serif;
  --font-text: "Inter", sans-serif;
}

The two styles

A black poster reads “MOVE MORE” in large white letters above a white running-person symbol on a blue panel. A right-hand column contains white symbols of a sun, a leaf, ascending bars, and a right-pointing arrow, with blue, green, orange, and black backgrounds.

2010–2017 · Global / networked, North America Metro (Microsoft Design Language) An interface language from Microsoft that put typography ahead of chrome: large light sans-serif headings, flat rectangular Live Tiles, lateral panoramic scrolling and bold single accent colours on dark or white grounds. It borrowed from Swiss graphic design and public transport signage, and gave way to Fluent Design from 2017.

The words “Urban Systems” appear in large black and red lettering at the upper left of an off-white cover. Tall blue, black and grey rectangular blocks rise from the bottom, with fine vertical dividing lines and a red circle at the upper right.

1950–1975 · Central Europe International Typographic Style A post-war refinement of the New Typography in which the mathematical grid, objective photography and neo-grotesque sans-serifs were used to communicate with clarity and neutrality. Taught at the Basel and Zurich schools, it became the default language of international corporate and institutional communication.

Metro × International Typographic Style

What each style brings

The type

The colours

As CSS

The two styles

More combinations

With Metro

With International Typographic Style