Stylogeny combining Hong Kong East–West Graphic Modernism × Shanghai Modern

Try

Style combination · Contrasts

Hong Kong East–West Graphic Modernism × Shanghai Modern

An earlier East–West commercial art of painted beauties and ornamental borders; compare it to see how Hong Kong studios replaced the figure and frame with one symbol and empty space.

From the research on Hong Kong East–West Graphic Modernism

Mix them and make something Hong Kong East–West Graphic Modernism Shanghai Modern

Yay!Hong Kong × Shanghai Modern1964 · 1910
A sample layout drawn from the recipe: shapes from Shanghai Modern, their arrangement from Hong Kong East–West Graphic Modernism, the finish from Hong Kong East–West Graphic Modernism. 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.

Hong Kong East–West Graphic Modernism Shanghai Modern & Yuefenpai

Type from Shanghai Modern

Hong Kong East–West Graphic Modernism avoids ornamented display: this is where the two pull against each other, which is the point of the contrast.

Colour from Hong Kong East–West Graphic Modernism
Form from Shanghai Modern
Composition from Hong Kong East–West Graphic Modernism
Surface from Hong Kong East–West Graphic Modernism

02

The type

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

Display · Shanghai Modern

Yay!

Limelight; Shanghai Modern used Meishuzi and Songti

Text · Hong Kong East–West Graphic Modernism

The studio design of Hong Kong from the 1960s, made for banks, developers, trade bodies, hotels and cultural events in a city that had to speak Chinese and English at once. Henry Steiner, a Yale student of Paul Rand, and a local generation taught by Wucius Wong, led by Kan Tai-keung, set compact symbols, sans-serif type and white space against quoted Chinese signs: ancient coins, characters, mythical creatures and, from the 1980s, ink washes and brush strokes, often staged as an East–West visual pun.

Inter; Hong Kong East–West Graphic Modernism used Sans-serifs for the Latin and Chinese set horizontally and smaller than the Latin, as the title 香港之進展 beside the skewed English of 'Progress Hong Kong'

03

The colours

The ground and leading colours come from Hong Kong East–West Graphic Modernism, with a counter-accent from Shanghai Modern. The ink reads on the ground at 4.5:1 or more.

Hong Kong East–West Graphic Modernism Shanghai Modern & Yuefenpai

  • #f3efe6 ground · 36%
  • #151515 ink · 14%
  • #c62a20 accent · 18%
  • #b08d4a accent · 14%
  • #8c8b86 accent · 10%
  • #1f5f5b accent · 8%

As CSS

:root {
  --ground: #f3efe6;
  --ink: #151515;
  --accent-1: #c62a20;
  --accent-2: #b08d4a;
  --accent-3: #8c8b86;
  --accent-4: #1f5f5b;
  --font-display: "Limelight", sans-serif;
  --font-text: "Inter", sans-serif;
}

Use it with care

Hong Kong East–West Graphic Modernism: Hong Kong uses traditional Chinese characters, so do not substitute simplified forms, and have every Chinese word in a lockup checked by a literate reader, since image models often invent or garble characters. The style used real Chinese signs and characters for their meaning, such as the coin and 中 of the Bank of China emblem; do not fall back on brush-effect 'chop-suey' Latin fonts or random characters as exotic texture.

05

More combinations

With Hong Kong East–West Graphic Modernism

With Shanghai Modern

All 12 combinations with Shanghai Modern

Every style combination