Style combination · Contrasts
Phototype Expressive Typography × International Typographic Style
Even spacing, flush-left grotesque and a grid against letters squeezed until they fuse into one centred logotype: put the two side by side to decide whether type should stay neutral or carry the joke.
Mix them and make something Phototype Expressive Typography 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.
Phototype Expressive Typography (Lubalin & U&lc) International Typographic Style
- Type from Phototype Expressive Typography
- Colour from International Typographic Style
- Form from International Typographic Style
- Composition from International Typographic Style
-
Phototype Expressive Typography avoids modular grid: this is where the two pull against each other, which is the point of the contrast.
- Surface from Phototype Expressive Typography
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Display · Phototype Expressive Typography
Index
Josefin Sans, standing in for ITC Avant Garde Gothic (Herb Lubalin and Tom Carnase, 1970; 33 alternate characters and interlocking capital ligatures)
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 Phototype Expressive Typography. The ink reads on the ground at 4.5:1 or more.
Phototype Expressive Typography (Lubalin & U&lc) International Typographic Style
-
#f2f0e9ground · 39% -
#111111ink · 15% -
#e1251baccent · 20% -
#1f4e9caccent · 15% -
#8a8479accent · 11%
As CSS
:root {
--ground: #f2f0e9;
--ink: #111111;
--accent-1: #e1251b;
--accent-2: #1f4e9c;
--accent-3: #8a8479;
--font-display: "Josefin Sans", sans-serif;
--font-text: "Inter", sans-serif;
}04
The two styles
05
More combinations
With Phototype Expressive Typography
- Hipster Artisanal Revival Contrasts · Both pair a script with a geometric sans, but the craft badge tracks its capitals wide in a centred one-ink frame, while Lubalin kerns the same pairing until the letters touch and join. Set one against the other to decide whether the letters should breathe or fuse.
- Push Pin Style Pairs well · Push Pin revives old styles through drawn figures and Lubalin through the letters themselves; pair a Push Pin illustration with a swash, tightly kerned Lubalin headline for full 1970s New York warmth.
- Blue Note Jazz Sleeve Modernism Pairs well · Same New York years and the same belief that the title can be the picture; give a Miles-style tinted photograph a Lubalin logotype whose letters touch and interlock instead of a plain blown-up grotesque.
- Emigre & Early Digital Type Contrasts · Both were made by a new type technology; Emigre's bitmap and PostScript faces end the phototype era, so set a Lubalin ligature against a coarse bitmap word to show how the tool shapes the letter.
- Di Tella Graphic Design (Instituto Torcuato Di Tella) Pairs well · Both made the word the picture in the same years; add Lubalin's tight, playful letter-joins to Di Tella's blunt flat-ink title for a headline-led identity.
- Post-Binary Typography (Bye Bye Binary and Inclusive French Type) Contrasts · Both make new meaning by interlocking letters into ligatures, but Lubalin's phototype ligatures are tight-set display wit for headlines and logotypes, while post-binary ligatures carry gender inside the word, in running French text as well as on banners; choose Lubalin for a witty headline, post-binary glyphs when the grammar of the word is the message.
- Fluxus Graphics (Maciunas) Contrasts · Same New York years and the same habit of locking letters together until they touch, but Lubalin kerned polished phototype for advertising while Maciunas pressed leftover dry-transfer letters into puzzle monograms on kraft; choose between the commercial ligature and the scavenged one.
- Vyaz (Ornamental Slavonic Lettering) Pairs well · Lubalin's phototype logotypes also merge neighbouring letters into ligatures and crowd them into a single shape; borrow vyaz's shared stems and nested small letters for a Cyrillic logotype, and keep it to one or two words so it stays readable.
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.
- Graffiti & Hip-Hop Graphics Contrasts · Put a single tag or throw-up over a strict Swiss grid to stage the clash between institutional order and a street voice.
- 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.