Style combination · Pairs well

Flash-Era Web Design × International Typographic Style

Manovich called the Flash generation a new modernism of pixel-thin grids; a strict Swiss grid steadies the panels and readouts.

From the research on Flash-Era Web Design (Flash Portfolio Sites)

Mix them and make something Flash-Era Web Design International Typographic Style

A sample layout drawn from the recipe: shapes from Flash-Era Web Design, their arrangement from Flash-Era Web Design, the finish from Flash-Era Web Design. Not a real work, and not an image of either style.

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.

Flash-Era Web Design (Flash Portfolio Sites) International Typographic Style

Type from International Typographic Style: Grotesque & neo-grotesque
Type as image
Colour from International Typographic Style: Limited spot colours
Flat fields
Form from Flash-Era Web Design: Rules & bars
Rectilinear
Composition from Flash-Era Web Design: Framed panels
Layered information
Surface from Flash-Era Web Design: Chrome & 3D render

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · International Typographic Style

Index

Inter Tight, standing in for Akzidenz-Grotesk

Text · Flash-Era Web Design

Websites built as one designed Flash movie (a plug-in in the browser) rather than as HTML pages: a fixed-size stage, often dark, entered through a preloader and an animated intro with sound. Inside, navigation is a console of framed panels on a visible technical grid, with hairline rules, numbered sections and readouts, tiny aliased pixel fonts in tracked capitals, a grey or navy key lit by one hot accent, metallic gradients and 3D renders. Menus zoom, slide and react to the mouse. Its experimental wing, from praystation to yugop.com's white page, made the site a field for code-driven play.

VT323; Flash-Era Web Design used Silkscreen (Jason Kottke), a free pixel face for 'extremely small graphical display type', meant for nav bars, menus and captions at 8 pt multiples with anti-aliasing off and Miniml pixel fonts, used on the Favourite Website Awards site

The colours

The ground and leading colours come from International Typographic Style, with a counter-accent from Flash-Era Web Design. The ink reads on the ground at 4.5:1 or more.

Flash-Era Web Design (Flash Portfolio Sites) International Typographic Style

#f2f0e9 ground · 36%
#111111 ink · 14%
#e1251b accent · 18%
#ff6a00 accent · 14%
#1f4e9c accent · 10%
#9bd31c accent · 8%

As CSS

:root {
  --ground: #f2f0e9;
  --ink: #111111;
  --accent-1: #e1251b;
  --accent-2: #ff6a00;
  --accent-3: #1f4e9c;
  --accent-4: #9bd31c;
  --font-display: "Inter Tight", sans-serif;
  --font-text: "VT323", monospace;
}

The two styles

A dark science-fiction poster headed “NEXUS” centers on a towering metallic structure wrapped by a circular track, with glowing orange and lime-green components. Framed technical panels surrounding it show a wireframe globe, orbital diagrams, a futuristic corridor, moons, modular parts, charts, and a cityscape facing an orange sun.

1997–2010 · Global / networked, North America, Western Europe, East Asia Flash-Era Web Design (Flash Portfolio Sites) Websites built as one designed Flash movie (a plug-in in the browser) rather than as HTML pages: a fixed-size stage, often dark, entered through a preloader and an animated intro with sound. Inside, navigation is a console of framed panels on a visible technical grid, with hairline rules, numbered sections and readouts, tiny aliased pixel fonts in tracked capitals, a grey or navy key lit by one hot accent, metallic gradients and 3D renders. Menus zoom, slide and react to the mouse. Its experimental wing, from praystation to yugop.com's white page, made the site a field for code-driven play.

The words “Urban Systems” appear in large black and red lettering at the upper left of an off-white cover. Tall blue, black and grey rectangular blocks rise from the bottom, with fine vertical dividing lines and a red circle at the upper right.

1950–1975 · Central Europe 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.

Flash-Era Web Design × International Typographic Style

What each style brings

The type

The colours

As CSS

The two styles

More combinations

With Flash-Era Web Design

With International Typographic Style