Style combination · Contrasts
Arts × Die Neue Typographie
Tschichold's asymmetric, unornamented page was built against this centred, bordered book; set them side by side to argue tradition versus machine age.
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.
Arts & Crafts Movement Die Neue Typographie
- Type from Arts
-
Die Neue Typographie avoids blackletter: this is where the two pull against each other, which is the point of the contrast.
- Colour from Die Neue Typographie
- Form from Arts
-
Die Neue Typographie avoids abundant decoration: this is where the two pull against each other, which is the point of the contrast.
- Composition from Die Neue Typographie
- Surface from Arts
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 Die Neue Typographie, with a counter-accent from Arts. The ink reads on the ground at 4.5:1 or more.
Arts & Crafts Movement Die Neue Typographie
-
#f3efe4ground · 36% -
#141414ink · 14% -
#d32a1faccent · 18% -
#a33224accent · 14% -
#7d7a73accent · 10% -
#c39a4aaccent · 8%
As CSS
:root {
--ground: #f3efe4;
--ink: #141414;
--accent-1: #d32a1f;
--accent-2: #a33224;
--accent-3: #7d7a73;
--accent-4: #c39a4a;
--font-display: "EB Garamond", serif;
--font-text: "Jost", sans-serif;
}04
The two styles
05
More combinations
With Arts
- Flat Design Contrasts · Borrow one engraved border or initial to give a flat interface a crafted, editorial moment against its vector minimalism.
- Scandinavian Functionalism Pairs well · Keep the craft ethic and natural palette but reduce Morris's foliage to a single repeating motif for warmth without clutter.
- Risograph & Indie Print Culture Pairs well · Frame a two-ink riso print with a Morris-style vine border to give indie publishing an heirloom, hand-made gravity.
- Gothic Blackletter & Fraktur Tradition Pairs well · Morris's Kelmscott Press revived gothic type (Troy and Chaucer) inside dense woodcut borders; join the broken letter to foliate frames and handmade paper for a medieval, hand-made book.
- Renaissance Book Typography Pairs well · Morris's Kelmscott Press revived Jenson's roman; pair a Renaissance text block with dense Arts & Crafts borders for a private-press feel.
- Josef Frank and Svenskt Tenn Botanical Prints Pairs well · The parent tradition: both fill a repeat with plants on linen, but Morris is symmetrical, earthy and dense with dark grounds, Frank is looser, brighter and mostly light. Pair a Morris-style framed book page with Frank-style endpapers.
- Italian Futurism Contrasts · Arts & Crafts handwork is everything Futurism wanted to burn; juxtapose them to stage machine against hand.
- Vorticism & BLAST Typography Contrasts · BLAST refused 'a revival of lost folk art' and blasted the 'years 1837 to 1900'; set its hard black shards against a hand-printed floral page to stage machine against handicraft.
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.
- International Typographic Style Pairs well · Extend its asymmetric black-and-red onto a full modular grid for a seamless Swiss-era update.
- 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.