Stylogeny combining Frutiger Aero × Grunge Typography

Try

Style combination · Contrasts

Frutiger Aero × Grunge Typography

Clean glossy optimism is grunge's opposite; juxtapose them only when you want the clash itself to be the message.

From the research on Grunge Typography

Mix them and make something Frutiger Aero Grunge Typography

SignalFrutiger Aero × Grunge Typography2004 · 1990
A sample layout drawn from the recipe: shapes from Frutiger Aero, their arrangement from Grunge Typography, the finish from Frutiger Aero. 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.

Frutiger Aero Grunge Typography

Type from Grunge Typography
Colour from Frutiger Aero
Form from Frutiger Aero
Composition from Grunge Typography
Surface from Frutiger Aero

Grunge Typography avoids gloss & highlights: this is where the two pull against each other, which is the point of the contrast.

02

The type

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

Display · Grunge Typography

Signal

Rock Salt; Grunge Typography used Template Gothic and FF Trixie

Text · Frutiger Aero

The glossy, optimistic look of consumer technology from the mid-2000s to the early 2010s, retrospectively named in 2017 by the Consumer Aesthetics Research Institute after Windows Vista's Aero interface and Adrian Frutiger's humanist sans. Translucent glass panels, glossy orbs and buttons, water droplets, bubbles, auroras, green fields and blue skies fused technology with clean nature, set in airy humanist sans-serifs.

Fira Sans; Frutiger Aero used Frutiger and Segoe UI

03

The colours

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

Frutiger Aero Grunge Typography

  • #f5fbff ground · 36%
  • #0b5fa5 ink · 14%
  • #22c3c9 accent · 18%
  • #a8322d accent · 14%
  • #4fb3e8 accent · 10%
  • #b8e04a accent · 8%

As CSS

:root {
  --ground: #f5fbff;
  --ink: #0b5fa5;
  --accent-1: #22c3c9;
  --accent-2: #a8322d;
  --accent-3: #4fb3e8;
  --accent-4: #b8e04a;
  --font-display: "Rock Salt", cursive;
  --font-text: "Fira Sans", sans-serif;
}

04

The two styles

2004–2013 · Global / networked Frutiger Aero The glossy, optimistic look of consumer technology from the mid-2000s to the early 2010s, retrospectively named in 2017 by the Consumer Aesthetics Research Institute after Windows Vista's Aero interface and Adrian Frutiger's humanist sans. Translucent glass panels, glossy orbs and buttons, water droplets, bubbles, auroras, green fields and blue skies fused technology with clean nature, set in airy humanist sans-serifs. 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.

05

More combinations

With Frutiger Aero

All 13 combinations with Frutiger Aero

With Grunge Typography

Every style combination