Style combination · Contrasts
Glitch Art × PC Music Graphics
Later hyperpop and glitchcore lean on glitchy, cluttered, datamoshed edits that corrupt the image; PC Music keeps the surface flawless.
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.
Glitch Art & Datamosh Graphics PC Music Graphics
- Type from PC Music Graphics
- Colour from Glitch Art
- Form from Glitch Art
- Composition from PC Music Graphics
- Surface from Glitch Art
-
PC Music Graphics avoids glitch and grain & noise: this is where the two pull against each other, which is the point of the contrast.
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Display · PC Music Graphics
Fine
Tilt Warp; PC Music Graphics used Custom display lettering after Rudolf Koch and Berthold Wolpe, with a Renaissance, woodcut feel and Comic Sans and other early-web system defaults, quoted knowingly
Text · Glitch Art
An art and design practice that makes digital failure the picture. Artists deliberately corrupt image and video files or short-circuit hardware: they edit a JPEG's bytes (databending), delete a video's keyframes so one shot smears into the next (datamoshing) or sort pixels into streaks. Compression blocks, torn scanlines, shifted colour channels and raw code replace drawing, and the colour comes from the fault. Rosa Menkman and GLI.TC/H framed it as a critique of seamless technology; designers took it onto record sleeves and fonts, music videos onto MTV in 2009, and it became a stock filter.
Space Mono; Glitch Art used Raw file bytes opened as text (databending in a text editor) and Operating-system interface fonts caught in error messages and cascading windows, as in JODI's My%Desktop
03
The colours
The ground and leading colours come from Glitch Art, with a counter-accent from PC Music Graphics. The ink reads on the ground at 4.5:1 or more.
Glitch Art & Datamosh Graphics PC Music Graphics
-
#0a0a0aground · 36% -
#00ff41ink · 14% -
#ff00ffaccent · 18% -
#f2ff1faccent · 14% -
#00e5ffaccent · 10% -
#e0151faccent · 8%
As CSS
:root {
--ground: #0a0a0a;
--ink: #00ff41;
--accent-1: #ff00ff;
--accent-2: #f2ff1f;
--accent-3: #00e5ff;
--accent-4: #e0151f;
--font-display: "Tilt Warp", sans-serif;
--font-text: "Space Mono", monospace;
}
Use it with care
Glitch Art & Datamosh Graphics: Glitch video and animated glitch effects often flicker: keep flashes to three or fewer in any one second, and be stricter with saturated red, to meet WCAG 2.3.1 and protect people with photosensitive epilepsy. Datamoshing and databending usually start from someone else's footage or photographs, so clear the rights before corrupting them for commercial work. When a datamosh or pixel-sort look follows a particular artist's process, credit it; the 2009 music videos overtook the artists who developed the technique.
04
The two styles
05
More combinations
With Glitch Art
- Grunge Typography Contrasts · Grunge scanned in photocopier grain and dirt and layered type on the Mac; glitch art breaks the file and lets the codec make the damage. Pick analogue distress or digital failure deliberately rather than stacking both.
- Vaporwave Pairs well · Vaporwave uses glitch as one surface among busts, grids and pastel 3D; give a vaporwave video a real datamosh between its found clips so the smear comes from the file rather than a plug-in.
- Brutalist Web Design Pairs well · Both put the machinery on show; set corrupted images on a raw-HTML page of default fonts so the code and the broken pictures make one argument about the medium.
- Internet Ugly & Meme Vernacular Contrasts · Deep-fried memes also pile up JPEG damage, but as a joke for a crowd to copy; glitch art makes the damage its subject. Borrow the re-saving, not the punchline.
- Acid Graphics / New Ugly Contrasts · Acid graphics renders polished chrome and adds glitch as a finish; glitch art breaks the file and keeps what comes out. Decide whether a brief wants spectacle or exposure.
- Frutiger Aero Contrasts · Aero's glossy, seamless interface is the frictionless technology glitch art questions; corrupt one Aero-style screen to show what the gloss hides.
- International Typographic Style Contrasts · A clean Swiss grid is the perfect signal to break: tear one band of a strict layout sideways and let the rest stay legible as the reference.
- Witch House Graphics (Symbol Names and Haunted Web Imagery) Pairs well · Use channel displacement or compression damage to estrange a recognisable scene, but retain the symbol-name as the identity; the image need not become an abstract demonstration of file failure.
With PC Music Graphics
- Hipgnosis Photographic Concept Sleeve Contrasts · Both take an idea literally and push it until it turns strange, but Hipgnosis staged it in a real place with a camera, while PC Music renders a synthetic product on a blank field.
- Vaporwave Contrasts · Both are ironic about consumer culture, but vaporwave collages faded pastel ruins of the 1990s, while PC Music renders one pristine new product.
- Acid Graphics / New Ugly Contrasts · Neighbours in the late 2010s club scene, but acid graphics crowd chrome, blackletter and neon on black, where PC Music isolates one clean object on a plain field.
- Kawaii Design Pairs well · Add kawaii's cute characters and pink to the label's plastic packshots for its bubblegum, Hannah Diamond side.
- Op Art Graphics Pairs well · Borrow vibrating line patterns, as Month of Mayhem did, to make a glossy object shimmer on a spinning record or a screen.
- Y2K Futurism Contrasts · Same chrome, gloss and 3D renders, but Y2K believed in the millennium's technology; PC Music quotes the gloss as a product with a straight face and a pun.
- Gabber and Hardcore Graphics (Rotterdam and Thunderdome) Contrasts · Glossy chrome and loud colour appear in both, but hardcore keeps them aggressive where hyperpop makes them sugary.