Style combination · Contrasts
Early Web Vernacular × International Typographic Style
A single centred Comic Sans headline on a Swiss grid makes a sharp, funny statement about taste and authority.
Mix them and make something Early Web Vernacular 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.
Early Web Vernacular International Typographic Style
- Type from Early Web Vernacular
-
International Typographic Style avoids eclectic mixing: this is where the two pull against each other, which is the point of the contrast.
- Colour from International Typographic Style
- Form from Early Web Vernacular
-
International Typographic Style avoids abundant decoration: this is where the two pull against each other, which is the point of the contrast.
- Composition from International Typographic Style
-
Early Web Vernacular avoids modular grid: this is where the two pull against each other, which is the point of the contrast.
- Surface from Early Web Vernacular
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 Early Web Vernacular. The ink reads on the ground at 4.5:1 or more.
Early Web Vernacular International Typographic Style
-
#f2f0e9ground · 36% -
#111111ink · 14% -
#e1251baccent · 18% -
#0000ffaccent · 14% -
#1f4e9caccent · 10% -
#ff00ffaccent · 8%
As CSS
:root {
--ground: #f2f0e9;
--ink: #111111;
--accent-1: #e1251b;
--accent-2: #0000ff;
--accent-3: #1f4e9c;
--accent-4: #ff00ff;
--font-display: "Newsreader", serif;
--font-text: "Inter", sans-serif;
}04
The two styles
05
More combinations
With Early Web Vernacular
- Vaporwave Pairs well · Vaporwave already mines this archive; combine tiled backgrounds and default fonts with its pastel 3D for nostalgic net art.
- Material Design Contrasts · Material's systematic spacing and elevation are everything the amateur web lacked; use it as the ‘after’ to this ‘before’.
- Brutalist Web Design Pairs well · Drop the GIFs but keep raw HTML defaults and visible structure for a contemporary, knowingly unpolished site.
- Media-Player & Desktop Skins (Winamp-Era Skinning) Pairs well · The same amateur, communal web of the late 1990s; pair a skin with a fan homepage for a full period set.
- Weirdcore & Dreamcore Pairs well · Frame a weirdcore still in an old browser window, a default dialog box or a low-resolution GIF to make its debt to the amateur early web explicit; keep the window empty rather than crowding it with the early web's badges and counters.
- Flash Vector Cartoon (Newgrounds-Era Web Animation) Pairs well · Its native habitat: put the cartoon in a cluttered portal page of banners and visitor counters for the full dial-up context.
- Japanese Dense Web Design Contrasts · This grew from the early web's link directories and table layouts, but the early web was amateur bricolage on dark tiled grounds, while this is a professional convention on white in system gothics; borrow its column discipline to tame a GeoCities pastiche.
- Emigre & Early Digital Type Pairs well · Low-resolution type and layered layouts carry naturally into table-based web pages and GIF graphics.
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.