# 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. - Period: 1977–1995 - Where: North America, East Asia - Origin: US personal-computer makers (Apple, Xerox PARC) and Japanese arcade and console developers (Taito, Namco, Nintendo) - Branch: Digital native - Also known as: Pixel art, 8-bit graphics, Bitmap type, Low-res graphics - Page: https://stylogeny.com/styles/bitmap-pixel/ ## How it works - Draw every glyph, icon and sprite on the pixel grid, placing each dot by hand and never relying on smooth curves or anti-aliasing. - Reduce subjects to the fewest pixels that still read (an icon in 32×32, a character in 16×16), exaggerating the key features. - Work within a fixed hardware palette, from 1-bit black and white to 4–16 colours, and fake extra tones with dither patterns. - Design type as bitmaps for one specific size, whether monospaced terminal fonts or proportional screen faces like Chicago and Geneva. - Make interfaces legible through metaphor and pictograms (trash can, folder, wristwatch) so that function reads without words. ## Its design choices Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then. ### Layout & composition - [Modular grid](https://stylogeny.com/design-choices/modular-grid/) (defining) - [Isolated object](https://stylogeny.com/design-choices/isolated-object/) (characteristic) - [Framed panels](https://stylogeny.com/design-choices/framed-panels/) (characteristic) ### Space & hierarchy - [Repetition & rhythm](https://stylogeny.com/design-choices/repetition-and-rhythm/) (characteristic) - [Measured density](https://stylogeny.com/design-choices/measured-density/) (occasional) ### Typography - [Bitmap & pixel](https://stylogeny.com/design-choices/bitmap-and-pixel/) (defining) - [Monospace](https://stylogeny.com/design-choices/monospace/) (characteristic) - [All caps](https://stylogeny.com/design-choices/all-caps/) (occasional) ### Colour - [Flat fields](https://stylogeny.com/design-choices/flat-fields/) (characteristic) - [Monochrome](https://stylogeny.com/design-choices/monochrome/) (characteristic) - [Limited spot colours](https://stylogeny.com/design-choices/limited-spot-colours/) (characteristic) - [Dark ground](https://stylogeny.com/design-choices/dark-ground/) (characteristic) ### Form & shape - [Pictogram](https://stylogeny.com/design-choices/pictogram/) (defining) - [Rectilinear](https://stylogeny.com/design-choices/rectilinear/) (characteristic) - [Stylised figuration](https://stylogeny.com/design-choices/stylised-figuration/) (characteristic) ### Surface & texture - [Flat](https://stylogeny.com/design-choices/flat/) (characteristic) - [Grain & noise](https://stylogeny.com/design-choices/grain-and-noise/) (characteristic) ### Ornament - [Ornament-free](https://stylogeny.com/design-choices/ornament-free/) (characteristic) ### Imagery - [Icons & pictograms](https://stylogeny.com/design-choices/icons-and-pictograms/) (defining) - [Pattern & repeat](https://stylogeny.com/design-choices/pattern-and-repeat/) (characteristic) - [Comic & cartoon](https://stylogeny.com/design-choices/comic-and-cartoon/) (occasional) ### Medium & production - [App & OS interface](https://stylogeny.com/design-choices/app-and-os-interface/) (characteristic) - [Desktop publishing](https://stylogeny.com/design-choices/desktop-publishing/) (characteristic) - [Motion & broadcast](https://stylogeny.com/design-choices/motion-and-broadcast/) (occasional) ### Tone & intent - [Technological & futurist](https://stylogeny.com/design-choices/technological-and-futurist/) (defining) - [Playful & witty](https://stylogeny.com/design-choices/playful-and-witty/) (characteristic) - [Warm & approachable](https://stylogeny.com/design-choices/warm-and-approachable/) (occasional) - [Rational & objective](https://stylogeny.com/design-choices/rational-and-objective/) (occasional) Avoids: Gradients, Gloss & highlights, Skeuomorphic material, Painterly brushwork, Script, Whiplash line, Straight photography Palette: #000000, #f2f2f2, #55ffff, #ff55ff, #352879, #9bbc0f Typefaces: Chicago (Susan Kare, 1984), Geneva and Monaco (Macintosh bitmap fonts), Oakland, Emperor and Universal (Zuzana Licko, 1985; later reissued as Lo-Res), Commodore PETSCII character set Known for: Susan Kare (Apple Macintosh icons and the Chicago, Geneva and Monaco fonts, 1984); Bill Atkinson (MacPaint, 1984); Tomohiro Nishikado (Space Invaders, Taito, 1978); Toru Iwatani (Pac-Man, Namco, 1980); Shigeru Miyamoto (Super Mario Bros., Nintendo, 1985); Zuzana Licko (Emperor, Oakland and Universal bitmap faces, Emigre, 1985); Wim Crouwel (New Alphabet, 1967; a precursor of screen type) ## Where it comes from, and what it’s close to - Grew out of: [Isotype Pictorial Statistics](https://stylogeny.com/styles/isotype.md) (1925–1971) - Influenced by: [International Typographic Style](https://stylogeny.com/styles/swiss-international.md) (1950–1975) - Influenced by: [Total Design & Dutch Functionalism](https://stylogeny.com/styles/dutch-total-design.md) (1963–1990) - Led to: [Demoscene Graphics (Cracktros, Demos & Text-Mode Art)](https://stylogeny.com/styles/demoscene-graphics.md) (1985–present) - Led to: [Early Web Vernacular](https://stylogeny.com/styles/early-web.md) (1994–2004) - Led to: [Emoji Pictographic Language](https://stylogeny.com/styles/emoji.md) (1997–present) - Led to: [Skeuomorphic UI](https://stylogeny.com/styles/skeuomorphism.md) (2000–2013) - Led to: [Low Poly Illustration](https://stylogeny.com/styles/low-poly.md) (2012–present) - Led to: [NFT Profile-Picture Collections (CryptoPunks to Bored Apes)](https://stylogeny.com/styles/nft-pfp-collections.md) (2017–present) - Alike in its design choices: [Flat Design](https://stylogeny.com/styles/flat-design.md) (2010–2016), 55% alike - Alike in its design choices: [HfG Ulm Systematic Design](https://stylogeny.com/styles/ulm-school.md) (1953–1968), 49% alike - Alike in its design choices: [British Road Signage (Kinneir & Calvert)](https://stylogeny.com/styles/british-road-signage.md) (1958–present), 49% alike - Alike in its design choices: [Contemporary Arabic & Dual-Script Type Design](https://stylogeny.com/styles/arabic-latin-bilingual-type.md) (2004–present), 48% alike - Alike in its design choices: [Munich 1972 Olympic Design (Otl Aicher)](https://stylogeny.com/styles/munich-72.md) (1966–1972), 47% alike - Alike in its design choices: [Techno-Futurist Graphics](https://stylogeny.com/styles/techno-futurism.md) (1986–2002), 47% alike ## Real works - [MacPaint screen with an early MacPaint drawing by Susan Kare](https://computerhistory.org/blog/macpaint-and-quickdraw-source-code/): Bill Atkinson (MacPaint) and Susan Kare (icons, Chicago font and drawing), Apple Computer, c. 1984, Computer History Museum - [Space Invaders](https://www.moma.org/collection/works/169996): Tomohiro Nishikado (Taito Corporation), 1978, The Museum of Modern Art, New York - [Pac-Man](https://www.moma.org/collection/works/164917): Toru Iwatani (NAMCO), 1980, The Museum of Modern Art, New York - [Graphic icon sketch ("debug" and "boot")](https://www.moma.org/collection/works/188388): Susan Kare, 1982–1983, The Museum of Modern Art, New York - [Oakland (bitmap typeface)](https://www.moma.org/collection/works/139320): Zuzana Licko (Emigre), 1985, The Museum of Modern Art, New York ## Sources - Rudy VanderLans & Zuzana Licko, Emigre: Graphic Design into the Digital Realm (1993) - Philip B. Meggs & Alston W. Purvis, Meggs' History of Graphic Design (chapter on the digital revolution) --- From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Bitmap & Pixel Graphics”, https://stylogeny.com/styles/bitmap-pixel/