Style combination · Pairs well
Die Neue Typographie × International Typographic Style
Extend its asymmetric black-and-red onto a full modular grid for a seamless Swiss-era update.
Mix them and make something Die Neue Typographie 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.
Die Neue Typographie International Typographic Style
- Type from International Typographic Style
- Colour from International Typographic Style
- Form from Die Neue Typographie
- Composition from Die Neue Typographie
- Surface from Die Neue Typographie
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Text · Die Neue Typographie
The programme that turned avant-garde experiment into a functional typographic method, named by Moholy-Nagy in 1923 and codified in Jan Tschichold's 'elementare typographie' (1925) and Die neue Typographie (1928). It demanded asymmetric layouts, sans-serif type, standard paper formats, photography and active white space, all justified by clarity of communication, and spread through the Ring neue Werbegestalter and designers from Delft to Prague.
Jost; Die Neue Typographie used Futura and Akzidenz-Grotesk
03
The colours
The ground and leading colours come from International Typographic Style, with a counter-accent from Die Neue Typographie. The ink reads on the ground at 4.5:1 or more.
Die Neue Typographie International Typographic Style
-
#f2f0e9ground · 39% -
#111111ink · 15% -
#e1251baccent · 20% -
#1f4e9caccent · 15% -
#7d7a73accent · 11%
As CSS
:root {
--ground: #f2f0e9;
--ink: #111111;
--accent-1: #e1251b;
--accent-2: #1f4e9c;
--accent-3: #7d7a73;
--font-display: "Inter Tight", sans-serif;
--font-text: "Jost", sans-serif;
}04
The two styles
05
More combinations
With Die Neue Typographie
- Risograph & Indie Print Culture Pairs well · Two-colour riso printing suits its black-plus-red restraint for low-budget editorial and posters.
- Cranbrook & Deconstructivist Typography Contrasts · Cranbrook dismantled exactly these rules; state one New Typography convention clearly, then break it on purpose.
- Renaissance Book Typography Contrasts · Tschichold himself returned to the centred classical page; set the two side by side to choose between symmetric tradition and asymmetric function.
- Mechano-Faktura & Polish Constructivist Advertising Pairs well · Pair the line-field image with asymmetric sans setting for an advertising layout.
- Post-Punk Record Sleeve (Stiff, Factory, 4AD) Pairs well · Saville's model: borrow Tschichold's asymmetric placement and small sans-serif capitals, then replace his photographs with one quoted image to get a cool, ordered sleeve.
- Brodovitch Editorial Design (Harper's Bazaar) Contrasts · Asymmetry without rules: improvised and photographic rather than systematic.
- German Book Art Movement (Buchkunstbewegung) Contrasts · From the mid-1920s the Bauhaus and the New Typography took over the avant-garde of the book; centred hand-press pages against asymmetric sans-serif layouts make a clear old-against-new tension.
- ECM Sleeve Aesthetic (Munich) Pairs well · Barbara Wojirsch named Tschichold as an influence: borrow his asymmetric blocks of small sans-serif type and set them beside one quiet photograph instead of his photomontage.
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.