Stylogeny combining Grunge Typography × Brutalist Web Design

Try

Style combination · Pairs well

Grunge Typography × Brutalist Web Design

Raw web layouts absorb grunge's broken grids naturally; add one scanned texture for an analogue edge.

From the research on Grunge Typography

Mix them and make something Grunge Typography Brutalist Web Design

RiotGrunge Typography × Brutalist Web Design
A sample layout drawn from the recipe: shapes from Brutalist Web Design, their arrangement from Grunge Typography, the finish from Grunge Typography. 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.

Grunge Typography Brutalist Web Design

Type from Grunge Typography
Colour from Brutalist Web Design
Form from Brutalist Web Design
Composition from Grunge Typography
Surface from Grunge Typography

02

The type

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

Display · Grunge Typography

Riot

Rock Salt; Grunge Typography used Template Gothic and FF Trixie

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

03

The colours

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

Grunge Typography Brutalist Web Design

  • #ffffff ground · 36%
  • #000000 ink · 14%
  • #ff0000 accent · 18%
  • #a8322d accent · 14%
  • #0000ee accent · 10%
  • #551a8b accent · 8%

As CSS

:root {
  --ground: #ffffff;
  --ink: #000000;
  --accent-1: #ff0000;
  --accent-2: #a8322d;
  --accent-3: #0000ee;
  --accent-4: #551a8b;
  --font-display: "Rock Salt", cursive;
  --font-text: "Courier Prime", monospace;
}

04

The two styles

A distressed collage poster combines oversized lettering reading “TIDE ROT” with a high-contrast image of a derelict ship on a muddy, rocky shoreline. Torn-looking black, cream, rust-orange and olive patches, scratches, and a cropped facial fragment fill the surrounding space. 1990–2000 · North America, Western Europe Grunge Typography The 1990s magazine and music-industry style in which type was layered, eroded, overlapped and cropped until legibility became negotiable. Made on the Macintosh but deliberately dirty, it combined distressed digital fonts, scanned textures and blurred, cropped photography with layouts that broke the grid on every spread, treating the page as an expressive surface rather than a neutral container for text. 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.

05

More combinations

With Grunge Typography

With Brutalist Web Design

All 14 combinations with Brutalist Web Design

Every style combination