Style combination · Pairs well
Internet Ugly × Situationist Détournement Graphics
Image macros and reaction memes recaption a known picture to say something new, which is détournement by other means; set a situationist rewritten balloon in a meme layout to bring the method online.
Mix them and make something Internet Ugly Situationist Détournement Graphics
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.
Internet Ugly & Meme Vernacular Situationist Détournement Graphics
- Type from Internet Ugly
- Colour from Situationist Détournement Graphics
- Form from Internet Ugly
- Composition from Situationist Détournement Graphics
- Surface from Internet Ugly
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Display · Internet Ugly
Sure.
Anton, standing in for Impact (Geoffrey Lee, Stephenson Blake, 1965), set white with a black outline
Text · Situationist Détournement Graphics
Graphics of the Letterist and Situationist Internationals (1956–1972), built on détournement: taking existing words and pictures (comic strips, advertisements, news photographs, city maps, classic texts) and turning them against their source. Debord and Jorn scattered cut press fragments among splashes of coloured ink in the artist's books Fin de Copenhague and Mémoires, and cut the map of Paris into islands linked by red arrows. Strasbourg students and the CMDO refilled comic-strip balloons with theory and pasted the strips up.
Courier Prime; Situationist Détournement Graphics used Caractères Simples, a nineteenth-century French sans serif shown by Deberny, set in lowercase for the title on every issue of Internationale situationniste and Found press type
03
The colours
The ground and leading colours come from Situationist Détournement Graphics, with a counter-accent from Internet Ugly. The ink reads on the ground at 4.5:1 or more.
Internet Ugly & Meme Vernacular Situationist Détournement Graphics
-
#f3f0e8ground · 36% -
#151515ink · 14% -
#e08a2caccent · 18% -
#00a2e8accent · 14% -
#c62f2aaccent · 10% -
#2f5aa8accent · 8%
As CSS
:root {
--ground: #f3f0e8;
--ink: #151515;
--accent-1: #e08a2c;
--accent-2: #00a2e8;
--accent-3: #c62f2a;
--accent-4: #2f5aa8;
--font-display: "Anton", sans-serif;
--font-text: "Courier Prime", monospace;
}Use it with care
Internet Ugly & Meme Vernacular: Most meme templates are photographs of real people, often children, or licensed stock. Success Kid is Laney Griner's son: the photo has been licensed to advertisers, and in January 2020 she sent a cease-and-desist letter to a congressman whose fundraising campaign used it without permission. Distracted Boyfriend is microstock, and its photographer says use without a proper licence is not allowed. License a template or make a new picture for commercial or political work. Check what a format means now: some characters that spread through 4chan were taken up as hate symbols (the ADL listed Pepe the Frog, Matt Furie's 2005 Boy's Club character, in 2016, while noting that most uses are not hateful). Reaction images of Black people posted by non-Black users and brands read as digital blackface (Lauren Michele Jackson, Teen Vogue, 2017), and deep-fried memes came out of Black Twitter, so credit where formats come from. When brands and campaigns borrow a format, its makers often protest or drop it (Douglas).
04
The two styles
05
More combinations
With Internet Ugly
- Punk & DIY Zine Pairs well · Both make amateur, cheap reproduction a stance; combine ransom-note cut-ups with Impact captions and crude pasted photos for zine-style posters that still read as a joke.
- International Typographic Style Contrasts · Drop one rage face or Impact caption into a strict Swiss grid to show how much of design's authority comes from polish.
- Brutalist Web Design Pairs well · Put MS Paint drawings and image macros on a raw-HTML page of default fonts and blue links; both treat software defaults as honesty rather than lack of taste.
- Acid Graphics / New Ugly Contrasts · Acid Graphics' 'New Ugly' is rendered by professionals in chrome and 3D; Internet Ugly is ugly because it is quick and amateur. Decide which kind of ugly a brief needs before borrowing either.
- Corporate Memphis Contrasts · Brand-safe flat illustration is what meme makers mock; a brand that borrows meme templates risks the backlash Douglas describes, as communities drop co-opted formats.
- Indie Sleaze Pairs well · Both live on casual web platforms and refuse polish; Indie Sleaze takes the music-scene snapshot where Internet Ugly takes meme vernacular.
- Instagram Slideshow Activism (Social-Justice Infographics) Contrasts · The meme vernacular is its ironic other and the language of its parodies: crude, found and knowing where the slideshow is polished and sincere.
- 'Good Morning' Greeting Images (WhatsApp Forward Vernacular) Contrasts · The same forwarding networks with the opposite intent: borrow the meme's speed and template logic, and even its jokes, but keep the greeting affectionate rather than ironic.
With Situationist Détournement Graphics
- Punk & DIY Zine Contrasts · Punk reprised the situationist prank in the late 1970s, but it packs torn photocopies and mixed type into crowded pages; détournement keeps a few recognisable fragments and lets each one say the opposite of what it said. Borrow the rewritten balloon when a punk layout needs a sharper argument.
- Fotoromanzo (Italian Photo-Romance) Pairs well · The photo-romance was a raw material René Viénet named in Internationale situationniste no. 11 (1967), calling for photo-romances to be détourned by adding or altering their speech bubbles: keep the photographed lovers and the grid of frames untouched and change only the balloons, so that the melodrama speaks against itself.
- American Four-Colour Comic Book (Golden to Bronze Age) Pairs well · Mass-market comic panels were a favourite raw material of détournement: keep the drawing of an adventure or western panel untouched and rewrite only the balloons to turn it against its own story.
- Pop Art Graphics Contrasts · Both took comic panels and advertisements in the same years, but Lichtenstein enlarged a single panel to painting size as a close copy of what it already said, while détournement kept the panel at reading size and rewrote its balloon to argue against its source; the SI's English section called Pop art 'the last ditch attempt to shore up the decomposition of the spectacle' (1967). Enlarge when the source itself is the subject, rewrite when the message must turn on the source.
- Atelier Populaire (May '68 Screenprint Poster) Contrasts · Same Paris spring of 1968, opposite method: the Atelier populaire drew new figures and slogans and screenprinted them flat in one colour, while the situationists reused existing comics, photographs and texts. Draw when the message must read from across the street, détourn when the audience must recognise the source.
- ACT UP & Gran Fury AIDS Activist Graphics Contrasts · Gran Fury placed its work 'in direct line of descent with Situationist questions' and kept the hijacking of mass media, but it copied whole advertising formats (a Benetton campaign, the front page of The New York Times) in professional offset with staged photographs and one-line slogans, where the situationists scattered cut fragments under ink. Copy the format whole when the work must pass for the real thing in public space; cut it up when the reader should see the seams.
- Fluxus Graphics (Maciunas) Contrasts · Contemporaries who both took found pictures, but Maciunas packed them into a tight, deadpan black grid of mixed dry-transfer type, while Debord and Jorn scattered fragments under painted ink and aimed the joke at revolution; choose order or drift.
- Il Male Newspaper-Forgery Satire Pairs well · Take the cut-up method and add the dense tabloid page to turn theory into a prank.