Stylogeny combining Bitmap × Isometric Pixel Art

Try

Style combination · Contrasts

Bitmap × Isometric Pixel Art

Same hand-placed pixels, but front-on icons and sprites under hardware limits against a crammed, full-colour 2:1 city made as a picture.

From the research on Isometric Pixel Art

Mix them and make something Bitmap Isometric Pixel Art

SignalBitmap × Isometric Pixel Art1977 · 1998
A sample layout drawn from the recipe: shapes from Bitmap, their arrangement from Isometric Pixel Art, 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 Isometric Pixel Art

Type from Bitmap
Colour from Isometric Pixel Art
Form from Bitmap
Composition from Isometric Pixel Art
Surface from Bitmap

02

The type

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

Display · Bitmap

Signal

Pixelify Sans, standing in for Chicago (Susan Kare, 1984)

Text · Isometric Pixel Art

Pictures built by hand from single pixels in a 2:1 dimetric 'isometric' projection, made as posters, prints, covers and web graphics rather than as game screens. Its signature is eBoy's Pixorama: a dense, toy-like city of modular buildings, cars, billboards, brand logos and tiny figures packed edge to edge in flat, saturated colour. Habbo Hotel's furnished pixel rooms, though a game world themselves, set off a wide amateur practice of isometric pixel rooms and dioramas made as pictures.

VT323; Isometric Pixel Art used Hand-pixelled lettering drawn into the scene and Small bitmap fonts for captions and navigation beside the picture, such as Silkscreen (Jason Kottke), a typeface for web graphics where extremely small display type is needed (a working recommendation: the style has no settled typeface)

03

The colours

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

Bitmap & Pixel Graphics Isometric Pixel Art

  • #f2f2ee ground · 36%
  • #26263a ink · 14%
  • #ffc933 accent · 18%
  • #9bbc0f accent · 14%
  • #e8413c accent · 10%
  • #ff55ff accent · 8%

As CSS

:root {
  --ground: #f2f2ee;
  --ink: #26263a;
  --accent-1: #ffc933;
  --accent-2: #9bbc0f;
  --accent-3: #e8413c;
  --accent-4: #ff55ff;
  --font-display: "Pixelify Sans", monospace;
  --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. A densely packed, isometric cartoon city contains colorful block-shaped buildings, crowds of tiny people, elevated trains, roads, canals, bridges, and boats. A large red billboard reads “PIXEL CITY,” while pixel-like animals decorate buildings and a giant yellow duck floats in a canal. 1998–present · Central Europe, Northern Europe, Global / networked Isometric Pixel Art Pictures built by hand from single pixels in a 2:1 dimetric 'isometric' projection, made as posters, prints, covers and web graphics rather than as game screens. Its signature is eBoy's Pixorama: a dense, toy-like city of modular buildings, cars, billboards, brand logos and tiny figures packed edge to edge in flat, saturated colour. Habbo Hotel's furnished pixel rooms, though a game world themselves, set off a wide amateur practice of isometric pixel rooms and dioramas made as pictures.

05

More combinations

With Bitmap

All 19 combinations with Bitmap

With Isometric Pixel Art

Every style combination