Stylogeny combining Bitmap × Total Design

Try

Style combination · Pairs well

Bitmap × Total Design

Crouwel's New Alphabet anticipated screen type; combine grid-drawn letters with pixel fonts for a historically grounded digital identity.

From the research on Total Design & Dutch Functionalism

Mix them and make something Bitmap Total Design

circuitBitmap × Total Design1977 · 1963
A sample layout drawn from the recipe: shapes from Bitmap, their arrangement from Bitmap, the finish from Bitmap. Not a real work, and not an image of either 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.

Bitmap & Pixel Graphics Total Design & Dutch Functionalism

Type from Total Design
Colour from Total Design
Form from Bitmap
Composition from Bitmap
Surface from Bitmap

02

The type

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

Display · Total Design

Circuit

Inter Tight, standing in for Helvetica

Text · Bitmap

Graphics and lettering built from the square pixels of low-resolution screens (arcade and console sprites, home-computer displays and the first graphical user interfaces), where every dot was placed by hand within tight limits of memory, resolution and palette. Designers such as Susan Kare turned those constraints into a language of legible pictogram icons, jagged bitmap fonts and dithered tones.

VT323; Bitmap used Chicago and Geneva and Monaco

03

The colours

The ground and leading colours come from Total Design, with a counter-accent from Bitmap. The ink reads on the ground at 4.5:1 or more.

Bitmap & Pixel Graphics Total Design & Dutch Functionalism

  • #ffffff ground · 36%
  • #111111 ink · 14%
  • #e4352a accent · 18%
  • #9bbc0f accent · 14%
  • #1e50a2 accent · 10%
  • #ff55ff accent · 8%

As CSS

:root {
  --ground: #ffffff;
  --ink: #111111;
  --accent-1: #e4352a;
  --accent-2: #9bbc0f;
  --accent-3: #1e50a2;
  --accent-4: #ff55ff;
  --font-display: "Inter Tight", sans-serif;
  --font-text: "VT323", monospace;
}

04

The two styles

A retro pixel-art space navigation interface shows a gridded star map with a spiral galaxy, colorful stars, and green celestial bodies. A right-hand panel displays a cyan planet and its statistics, while object cards and a command menu run along the bottom. 1977–1995 · North America, East Asia Bitmap & Pixel Graphics Graphics and lettering built from the square pixels of low-resolution screens (arcade and console sprites, home-computer displays and the first graphical user interfaces), where every dot was placed by hand within tight limits of memory, resolution and palette. Designers such as Susan Kare turned those constraints into a language of legible pictogram icons, jagged bitmap fonts and dithered tones. Oversized lowercase lettering reads “urban rhy thm” in black, red and blue on an off-white background with fine grey grid lines. Rectangles, repeated bars and large blue and black circular segments fill the remaining space. 1963–1990 · Western Europe Total Design & Dutch Functionalism The Dutch strand of systematic modernism took shape when Wim Crouwel, Benno Wissing, Friso Kramer and Paul and Dick Schwarz founded Total Design in Amsterdam in 1963 as the country's first multidisciplinary studio. It pushed Swiss grid logic towards the mechanical: visible grids, alphabets constructed on the same module as the page, and one cool, programmatic order applied to museums, airports and corporations alike.

05

More combinations

With Bitmap

All 19 combinations with Bitmap

With Total Design

Every style combination