International Typographic Style × Brutalist Web Design

Strip the grid to raw HTML defaults to get a rawer, contemporary take on Swiss honesty.

From the research on International Typographic Style

Pair raw HTML with a strict Swiss grid and one grotesque so brutalism reads as intentional rather than broken.

From the research on Brutalist Web Design

Mix them and make something International Typographic Style Brutalist Web Design

A sample layout drawn from the recipe: shapes from Brutalist Web Design, their arrangement from International Typographic Style, the finish from Brutalist Web Design. 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.

International Typographic Style Brutalist Web Design

Type from International Typographic Style: Grotesque & neo-grotesque
Type as image
Colour from International Typographic Style: Limited spot colours
Flat fields
Form from Brutalist Web Design: Rectilinear
Rules & bars
Composition from International Typographic Style: Modular grid
Dynamic asymmetry
Surface from Brutalist Web Design: 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 · Brutalist Web Design

A reaction against templated, conversion-optimised web design that exposes the raw materials of the browser: default system fonts, blue underlined links, visible borders, unstyled forms and plain document flow. Named after architectural Brutalism by Pascal Deville's survey site brutalistwebsites.com (2014), it ranges from functional austerity to deliberately abrasive antidesign.

Courier Prime; Brutalist Web Design used Times New Roman and Courier New and system monospace

The colours

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

International Typographic Style Brutalist Web Design

#f2f0e9 ground · 36%
#111111 ink · 14%
#e1251b accent · 18%
#ff0000 accent · 14%
#1f4e9c accent · 10%
#0000ee accent · 8%

As CSS

:root {
  --ground: #f2f0e9;
  --ink: #111111;
  --accent-1: #e1251b;
  --accent-2: #ff0000;
  --accent-3: #1f4e9c;
  --accent-4: #0000ee;
  --font-display: "Inter Tight", sans-serif;
  --font-text: "Courier Prime", monospace;
}

The two styles

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.

A white website homepage titled “RIVER SONGS” uses enormous black serif lettering, blue underlined links, and thick black dividing rules. A high-contrast image of rippling water sits beside a blue latest-posts panel and text about river essays and field recordings.

2014–present · Global / networked, Central Europe Brutalist Web Design A reaction against templated, conversion-optimised web design that exposes the raw materials of the browser: default system fonts, blue underlined links, visible borders, unstyled forms and plain document flow. Named after architectural Brutalism by Pascal Deville's survey site brutalistwebsites.com (2014), it ranges from functional austerity to deliberately abrasive antidesign.

More combinations

With International Typographic Style

All 97 combinations with International Typographic Style

With Brutalist Web Design

All 14 combinations with Brutalist Web Design

Every style combination