Style combination · Contrasts
Shanghai Modern × International Typographic Style
Its framed, ornamented, figurative poster is the opposite of Swiss reduction; strip elements one by one to find what carries the mood.
Mix them and make something Shanghai Modern International Typographic 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.
Shanghai Modern & Yuefenpai International Typographic Style
- Type from Shanghai Modern
-
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 Shanghai Modern
- Composition from International Typographic Style
-
Shanghai Modern avoids modular grid: this is where the two pull against each other, which is the point of the contrast.
- Surface from Shanghai Modern
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
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 Shanghai Modern. The ink reads on the ground at 4.5:1 or more.
Shanghai Modern & Yuefenpai International Typographic Style
-
#f2f0e9ground · 36% -
#111111ink · 14% -
#e1251baccent · 18% -
#1f4e9caccent · 14% -
#c8a24aaccent · 10% -
#7a7a7aaccent · 8%
As CSS
:root {
--ground: #f2f0e9;
--ink: #111111;
--accent-1: #e1251b;
--accent-2: #1f4e9c;
--accent-3: #c8a24a;
--accent-4: #7a7a7a;
--font-display: "Limelight", sans-serif;
--font-text: "Inter", sans-serif;
}04
The two styles
05
More combinations
With Shanghai Modern
- Socialist Realist Propaganda Poster Contrasts · After 1949 the same painters and rubbed-watercolour technique served propaganda; compare how one rendering style sells glamour versus ideology.
- Nianhua & Chinese Folk Print Pairs well · Fold nianhua's auspicious symbols and bright folk colour into a calendar-poster layout for festive packaging.
- Art Deco Pairs well · Wrap a softly painted yuefenpai figure in Deco borders and geometric lettering for East–West period glamour.
- Republican Chinese Book Cover Design (Lu Xun & Tao Yuanqing) Contrasts · Same city and decades, opposite intent: calendar posters model glamorous women in soft polychrome with ornamental borders, while New Literature covers leave a plain field to one flat, symbolic motif and a drawn title.
- Mexican Calendar Chromo (Cromos calendáricos) Contrasts · Both are tobacco-sponsored calendar pictures of beauties, but yuefenpai set softly rubbed watercolour women inside decorative borders with the products alongside, while the Mexican chromo is an oil painting of a whole scene that fills the sheet, with the pad pasted at its foot.
- Cuban Tobacco Lithography (Habilitaciones & Marquillas) Pairs well · Shanghai's calendar posters were also given away by tobacco firms; pair their softly modelled women and ornamental borders with the Havana label's medals and arms for a cross-continental tobacco or spirits heritage line.
- Showa Modern Commercial Art and Zuan-moji Pairs well · Both put a modern-girl figure in East Asian commercial posters; combine the Japanese geometric lettering with Shanghai's painterly figure for a pan-Asian Deco look.
- Lianhuanhua Picture-Story Books Pairs well · Its parent print culture: pair a lianhuanhua line sequence with a yuefenpai-style painted cover for a period Shanghai feel.
With International Typographic Style
- Art Nouveau Contrasts · Ornamental curves against an orthogonal grid make a strong deliberate tension.
- Brutalist Web Design Pairs well · Strip the grid to raw HTML defaults to get a rawer, contemporary take on Swiss honesty.
- Psychedelic Poster Contrasts · Its exact opposite on legibility; borrow one swirling element to break a too-cold Swiss layout.
- Japanese Postwar Modernism Pairs well · Add Japanese restraint and emblematic colour fields to the grid for warmth without losing order.
- American Traditional Tattoo Flash Contrasts · Rational grid and sans-serif against sentimental, hand-lettered emblems: one flash motif on a Swiss layout makes a sharp contrast.
- Graffiti & Hip-Hop Graphics Contrasts · Put a single tag or throw-up over a strict Swiss grid to stage the clash between institutional order and a street voice.
- Pop Art Graphics Contrasts · Set one loud appropriated Pop image inside a strict grid with a neutral grotesque so the irony reads as deliberate rather than chaotic.
- Italian Painted Film Poster (Rome Studios) Contrasts · Grid, restraint and photographic objectivity are the opposite of a crowded painted montage.