Stylogeny combining Glasgow Style × Vienna Secession

Try

Style combination · Pairs well

Glasgow Style × Vienna Secession

Vienna learned from Glasgow in 1900; combine Mackintosh's attenuated verticals with Secession squares and gold for refined cultural branding.

From the research on Glasgow Style

Mix them and make something Glasgow Style Vienna Secession

LIGHTGlasgow Style × Vienna Secession1890 · 1897
A sample layout drawn from the recipe: shapes from Glasgow Style, their arrangement from Vienna Secession, the finish from Vienna Secession. 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.

Glasgow Style Vienna Secession

Type from Glasgow Style
Colour from Glasgow Style
Form from Glasgow Style
Composition from Vienna Secession
Surface from Vienna Secession

02

The type

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

Display · Glasgow Style

Light

Poiret One; Glasgow Style used Charles Rennie Mackintosh's attenuated hand lettering and ITC Rennie Mackintosh

Text · Vienna Secession

The Viennese break with academic art led by Gustav Klimt, Koloman Moser, Josef Hoffmann and Alfred Roller, which pulled Art Nouveau toward the square, the grid and the flat plane. Its exhibition posters, the journal Ver Sacrum and Wiener Werkstätte graphics enclose stylised figures and dense geometric lettering in rectangular frames, in black, white and gold, with severe symmetrical clarity.

Libre Caslon Text; Vienna Secession used Alfred Roller's elongated, interlocking block capitals and Koloman Moser's geometric display lettering

03

The colours

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

Glasgow Style Vienna Secession

  • #f4f1ea ground · 36%
  • #1d1b1a ink · 14%
  • #c9768e accent · 18%
  • #b8913a accent · 14%
  • #8e7aa8 accent · 10%
  • #a3282a accent · 8%

As CSS

:root {
  --ground: #f4f1ea;
  --ink: #1d1b1a;
  --accent-1: #c9768e;
  --accent-2: #b8913a;
  --accent-3: #8e7aa8;
  --accent-4: #a3282a;
  --font-display: "Poiret One", sans-serif;
  --font-text: "Libre Caslon Text", serif;
}

05

More combinations

With Glasgow Style

With Vienna Secession

All 10 combinations with Vienna Secession

Every style combination