Stylogeny combining Push Pin Style × International Typographic Style

Try

Style combination · Contrasts

Push Pin Style × International Typographic Style

Push Pin defined itself against Helvetica neutrality; pit a bespoke illustrated letterform against a Swiss grid to dramatise personality versus system.

From the research on Push Pin Style

Mix them and make something Push Pin Style International Typographic Style

GridPush Pin Style × International Typographic
A sample layout drawn from the recipe: shapes from Push Pin Style, their arrangement from International Typographic Style, the finish from Push Pin Style. 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.

Push Pin Style International Typographic Style

Type from Push Pin Style

International Typographic Style avoids ornamented display: this is where the two pull against each other, which is the point of the contrast.

Colour from International Typographic Style
Form from Push Pin Style
Composition from International Typographic Style

Push Pin Style avoids modular grid: this is where the two pull against each other, which is the point of the contrast.

Surface from Push Pin Style

02

The type

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

Display · Push Pin Style

Grid

Righteous; Push Pin Style used Baby Teeth and Glaser Stencil

Text · 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.

Inter; International Typographic Style used Akzidenz-Grotesk and Helvetica

03

The colours

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

Push Pin Style International Typographic Style

  • #f2f0e9 ground · 36%
  • #111111 ink · 14%
  • #e1251b accent · 18%
  • #f2b632 accent · 14%
  • #1f4e9c accent · 10%
  • #e0512f accent · 8%

As CSS

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

04

The two styles

A red-haired woman in a flowing purple dress rides a giant flying black-and-white cat beneath a smiling golden sun. Large orange lettering reading “SUNRIDER” crowns the scene, with a coastal village below and flowers decorating the border. 1954–1980 · North America Push Pin Style The eclectic illustrative style of New York's Push Pin Studios, founded by Seymour Chwast, Milton Glaser and Edward Sorel. Against the neutrality of the Swiss style it raided Victorian wood type, Art Nouveau, Art Deco, comics and folk art, drawing everything with bold contours, flat colour and invented display lettering, and made illustration and personal wit central to graphic design again. 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.

05

More combinations

With Push Pin Style

All 16 combinations with Push Pin Style

With International Typographic Style

All 97 combinations with International Typographic Style

Every style combination