Style combination · Contrasts
Graffiti × International Typographic Style
Put a single tag or throw-up over a strict Swiss grid to stage the clash between institutional order and a street voice.
Mix them and make something Graffiti International Typographic 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.
Graffiti & Hip-Hop Graphics International Typographic Style
- Type from Graffiti
- Colour from International Typographic Style
- Form from Graffiti
- Composition from International Typographic Style
-
Graffiti avoids modular grid: this is where the two pull against each other, which is the point of the contrast.
- Surface from Graffiti
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Text · International Typographic Style
A post-war refinement of the New Typography in which the mathematical grid, objective photography and neo-grotesque sans-serifs were used to communicate with clarity and neutrality. Taught at the Basel and Zurich schools, it became the default language of international corporate and institutional communication.
Inter; International Typographic Style used Akzidenz-Grotesk and Helvetica
03
The colours
The ground and leading colours come from International Typographic Style, with a counter-accent from Graffiti. The ink reads on the ground at 4.5:1 or more.
Graffiti & Hip-Hop Graphics International Typographic Style
-
#f2f0e9ground · 36% -
#111111ink · 14% -
#e1251baccent · 18% -
#1f4e9caccent · 14% -
#00a3e0accent · 10% -
#7a7a7aaccent · 8%
As CSS
:root {
--ground: #f2f0e9;
--ink: #111111;
--accent-1: #e1251b;
--accent-2: #1f4e9c;
--accent-3: #00a3e0;
--accent-4: #7a7a7a;
--font-display: "Sedgwick Ave Display", cursive;
--font-text: "Inter", sans-serif;
}04
The two styles
05
More combinations
With Graffiti
- Corporate Identity Modernism Contrasts · Use graffiti as the foil to corporate identity: a painted name over a logo makes the ownership of public space visible.
- Pop Art Graphics Pairs well · Pair letter-pieces with Ben-Day comic panels and bold outlines, as 1980s gallery graffiti often did, for a street-meets-gallery look.
- Hype Streetwear Graphics (Box Logo to Quotation Marks) Pairs well · Streetwear grew out of New York hip-hop dress; pair a set geometric wordmark with a hand-drawn graffiti piece for a back print, but keep the logo flat and centred so the tag reads as the decoration and the box as the brand.
- Pixação (São Paulo Tag Reto) Contrasts · Both write names on walls, and Pesquisa FAPESP lists hip-hop among the 1980s influences on pixação, but graffiti builds the letter into a coloured, outlined, three-dimensional piece with characters, while pixação keeps a flat black straight letter in level rows and goes for height. Brazilian law since 2011 tolerates graffiti made with the owner's consent and keeps pichação a crime, so decide which one the brief needs.
- Stencil Street Art Contrasts · Both use spray paint in the street, but graffiti makes the writer's name a freehand, many-coloured letter-sculpture with 3D blocks and fades; stencil art sprays a reproducible photographic picture in black. Decide which one the brief needs before mixing them.
- Guochao (China-Chic National Trend) Pairs well · Guochao's streetwear wing already borrows hip-hop lockups; treat a brush character as the tag and keep the heritage palette.
- Black Lives Matter Street Murals Contrasts · Graffiti writers paint their own names on walls and trains, uninvited and in letters few outsiders can read; these murals lay one shared, legible slogan on the road, usually with the city's permission. Let a writer fill one letter, as Sam Sneke did in Seattle, without turning the slogan into a piece.
- Matatu & Nganya Art Pairs well · The source of its names, catchphrases and heroes: take graffiti's wildstyle and bubble lettering for the vehicle name and keep the matatu's photoreal portrait as the focal point.
With International Typographic Style
- Art Nouveau Contrasts · Ornamental curves against an orthogonal grid make a strong deliberate tension.
- Brutalist Web Design Pairs well · Strip the grid to raw HTML defaults to get a rawer, contemporary take on Swiss honesty.
- Psychedelic Poster Contrasts · Its exact opposite on legibility; borrow one swirling element to break a too-cold Swiss layout.
- Japanese Postwar Modernism Pairs well · Add Japanese restraint and emblematic colour fields to the grid for warmth without losing order.
- American Traditional Tattoo Flash Contrasts · Rational grid and sans-serif against sentimental, hand-lettered emblems: one flash motif on a Swiss layout makes a sharp contrast.
- Pop Art Graphics Contrasts · Set one loud appropriated Pop image inside a strict grid with a neutral grotesque so the irony reads as deliberate rather than chaotic.
- Italian Painted Film Poster (Rome Studios) Contrasts · Grid, restraint and photographic objectivity are the opposite of a crowded painted montage.
- East German (DDR) Poster and Gebrauchsgrafik Pairs well · Shares the rational sans and plain ground; add DDR hand-drawn imagery to warm a Swiss layout.