Style combination · Contrasts
Flat Design × Victorian Letterpress
Ornamented wood type and dense rules show everything flat design removed; quote one decorative headline to warm a sterile interface.
Mix them and make something Flat Design Victorian Letterpress
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.
Flat Design Victorian Letterpress & Wood Type
- Type from Victorian Letterpress
- Colour from Flat Design
- Form from Flat Design
- Composition from Victorian Letterpress
- Surface from Victorian Letterpress
-
Flat Design avoids paper & letterpress bite: this is where the two pull against each other, which is the point of the contrast.
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Display · Victorian Letterpress
Index
Abril Fatface, standing in for Fat face romans (Thorne, Figgins)
Text · Flat Design
An interface and illustration language that stripped screens of simulated materials, replacing bevels, gloss and textures with solid fields of colour, clean sans-serif type and reduced pictograms. Formalised in Microsoft's Metro design language (Windows Phone 7, 2010) and made mainstream by Apple's iOS 7 (2013), it applied Swiss modernist reduction to responsive, touch-first screens.
Inter; Flat Design used Segoe UI and Helvetica Neue
03
The colours
The ground and leading colours come from Flat Design, with a counter-accent from Victorian Letterpress. The ink reads on the ground at 4.5:1 or more.
Flat Design Victorian Letterpress & Wood Type
-
#ecf0f1ground · 36% -
#2c3e50ink · 14% -
#f1c40faccent · 18% -
#b3322baccent · 14% -
#e74c3caccent · 10% -
#d9b45aaccent · 8%
As CSS
:root {
--ground: #ecf0f1;
--ink: #2c3e50;
--accent-1: #f1c40f;
--accent-2: #b3322b;
--accent-3: #e74c3c;
--accent-4: #d9b45a;
--font-display: "Abril Fatface", serif;
--font-text: "Inter", sans-serif;
}04
The two styles
05
More combinations
With Flat Design
- Skeuomorphic UI Contrasts · Its direct predecessor and foil: one realistic, textured object on an otherwise flat screen becomes an instant focal point.
- Japanese Postwar Modernism Pairs well · Add the emblematic circles and calm colour fields of Japanese postwar posters to give flat screens a stronger focal image.
- Isotype Pictorial Statistics Pairs well · Borrow Isotype's rows of identical counting pictograms to turn a flat icon set into honest, readable data graphics.
- Indie Pixel Art Revival Contrasts · Resolution-independent vector flatness against a deliberately coarse grid lit with glows and depth.
- Arts & Crafts Movement Contrasts · Borrow one engraved border or initial to give a flat interface a crafted, editorial moment against its vector minimalism.
- WPA Silkscreen Posters Pairs well · Its flat layered shapes translate directly to vector; use the national-park look for warm, civic flat illustration.
- Munich 1972 Olympic Design (Otl Aicher) Pairs well · Flat icon families descend from these round-headed figures; borrow a single stroke width (which, as Holt shows, the 1972 figures only approximate, since a limb built from an orthogonal and a 45-degree segment cannot keep one thickness) and the 0, 45 and 90-degree rule to keep a screen icon set coherent.
- Ligne Claire (Franco-Belgian Clear Line) Pairs well · Flat, unshaded fields translate directly to screen; add ligne claire's even outline and documented settings to flat UI illustration for scenes with more narrative and character, keeping ligne claire's perspective, which flat design avoids.
With Victorian Letterpress
- Hand-Painted Signage & Vernacular Lettering Pairs well · Sign writers and type founders traded letterforms; add brushed shading and drop shadows to wood-type headlines for a street-made feel.
- Push Pin Style Pairs well · Push Pin revived Victorian display faces with irony; mix one wood-type headline with modern illustration for the same knowing nostalgia.
- International Typographic Style Contrasts · One face, flush left and white space against a centred clamour of faces: use the contrast to test whether hierarchy needs variety at all.
- Arts & Crafts Movement Contrasts · Morris reacted against exactly this commercial clutter; set the two side by side to show craft restraint versus jobbing exuberance.
- HfG Ulm Systematic Design Contrasts · A Victorian mixed-face handbill is the clutter Ulm's one-family rule was meant to cure; use it as a before-and-after foil.
- Victorian Colour Toy Books (Evans, Crane, Caldecott and Greenaway) Contrasts · Its black-letter-dense, type-and-ornament jobbing page is the opposite of a picture-led page; combine them by hanging a wood-type title over a flat colour picture.
- Dada Pairs well · Raid Victorian wood type and stock ornaments as the Dadaists did, but scatter them instead of centring them.
- American Four-Colour Comic Book (Golden to Bronze Age) Pairs well · Both are cheap letterpress print that shouts to passers-by; borrow the playbill's stacked display capitals, banners and rules for a comic cover's blurbs and price box, while keeping the comic's hand-drawn letters and keyline art.