Style combination · Contrasts
Islamic Geometric × International Typographic Style
Drop one tessellated panel into an asymmetric Swiss grid to make the tension between infinite pattern and white space the subject.
Mix them and make something Islamic Geometric 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.
Islamic Geometric & Calligraphic Tradition International Typographic Style
- Type from International Typographic Style
- Colour from International Typographic Style
- Form from Islamic Geometric
- Composition from Islamic Geometric
-
International Typographic Style avoids central symmetry: this is where the two pull against each other, which is the point of the contrast.
- Surface from Islamic Geometric
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Text · Islamic Geometric
A visual system shared across the Islamic world in which proportioned calligraphy, compass-and-straightedge geometry and the vegetal arabesque carry meaning and beauty in place of figurative imagery. Star-and-polygon tilings repeat across whole surfaces as if continuing beyond the frame, while Kufic, Thuluth and Naskh inscriptions give hierarchy to buildings, manuscripts and objects.
Reem Kufi; Islamic Geometric used Kufic and Thuluth
03
The colours
The ground and leading colours come from International Typographic Style, with a counter-accent from Islamic Geometric. The ink reads on the ground at 4.5:1 or more.
Islamic Geometric & Calligraphic Tradition International Typographic Style
-
#f2f0e9ground · 36% -
#111111ink · 14% -
#e1251baccent · 18% -
#c8a046accent · 14% -
#1f4e9caccent · 10% -
#a63d2faccent · 8%
As CSS
:root {
--ground: #f2f0e9;
--ink: #111111;
--accent-1: #e1251b;
--accent-2: #c8a046;
--accent-3: #1f4e9c;
--accent-4: #a63d2f;
--font-display: "Inter Tight", sans-serif;
--font-text: "Reem Kufi", cursive;
}Use it with care
Islamic Geometric & Calligraphic Tradition: Qur'anic verses, the names of God and the Prophet and other sacred phrases must not be cropped, distorted, mirrored, used as texture or printed on floors, footwear or throwaway packaging; have any Arabic-script text read and approved by a fluent reader or calligrapher. Abstract geometric pattern is far less sensitive than script, but credit the traditions and makers it comes from.
04
The two styles
05
More combinations
With Islamic Geometric
- Art Deco Pairs well · Borrow star polygons and stepped borders for Deco-style framing; both depend on strict symmetry and metallic accents.
- Iranian Modernist Graphic Design Pairs well · Set one calligraphic word or a fragment of girih against flat colour and a modernist grid instead of reproducing whole tile panels.
- Armenian Manuscript Illumination Contrasts · Horseshoe arches and vegetal and geometric ornament are shared, but the Islamic geometric tradition keeps its arches and fields aniconic, while Armenian books fill the same arches with birds, beasts and painted saints; choose whether a frame should carry figures or only pattern.
- Kamon (Japanese Family Crests) Contrasts · Both are built with compass and straight edge, but girih tiles the whole surface without end while a mon closes one motif inside a ring; borrow the tessellation for a ground and the crest for the single sign on it.
- Baghdad School of Arab Book Painting (Maqamat Illustration) Contrasts · Non-figural Islamic art is the contrast: this style puts people and satire where geometry would be. No descent is implied.
- Ethiopian Ge'ez Manuscript & Haräg Illumination Pairs well · Haräg interlace and Islamic strapwork share frame-and-band logic; compare them for headpieces, but keep the Ethiopian bands varied rather than strictly tiled.
- Andean Woven Graphic Systems Contrasts · Islamic pattern interlaces stars around radial centres while Andean geometry is orthogonal, stepped and deliberately irregular; choose one as the structural logic rather than blending them.
- Batik Pattern Tradition Pairs well · Coastal batik already absorbs Arabic script and geometric lattices; combine the two for pattern that is both structured and hand-made.
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.