Style combination · Contrasts
Kinetic Typography × Renaissance Book Typography
The still, centuries-old reading page is the opposite pole; keep long text static and reserve motion for display.
Mix them and make something Kinetic Typography Renaissance Book Typography
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.
Kinetic Typography & Variable Type Renaissance Book Typography
- Type from Kinetic Typography
- Colour from Kinetic Typography
- Form from Renaissance Book Typography
-
Kinetic Typography avoids floral & vegetal: this is where the two pull against each other, which is the point of the contrast.
- Composition from Renaissance Book Typography
-
Kinetic Typography avoids classical text block: this is where the two pull against each other, which is the point of the contrast.
- Surface from Renaissance Book Typography
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Display · Kinetic Typography
Atlas
Inter Tight, standing in for Variable grotesques with weight and width axes (e.g. Roboto Flex)
Text · Renaissance Book Typography
The printed book as shaped by humanist Italy and France: roman and italic types modelled on humanist handwriting, a single justified text block set in harmonious proportions within generous margins, and woodcut initials, borders and printer's devices as the only ornament. Its page became the default model of the Western book for the next five centuries.
EB Garamond; Renaissance Book Typography used Jenson's roman and Griffo's roman
03
The colours
The ground and leading colours come from Kinetic Typography, with a counter-accent from Renaissance Book Typography. The ink reads on the ground at 4.5:1 or more.
Kinetic Typography & Variable Type Renaissance Book Typography
-
#0b0b0bground · 36% -
#f3f3efink · 14% -
#ff3d1faccent · 18% -
#b23a2baccent · 14% -
#2b3dffaccent · 10% -
#b8973faccent · 8%
As CSS
:root {
--ground: #0b0b0b;
--ink: #f3f3ef;
--accent-1: #ff3d1f;
--accent-2: #b23a2b;
--accent-3: #2b3dff;
--accent-4: #b8973f;
--font-display: "Inter Tight", sans-serif;
--font-text: "EB Garamond", serif;
}04
The two styles
05
More combinations
With Kinetic Typography
- Generative & Dynamic Identities Pairs well · Drive the variable axes with data or sound so the type responds to input rather than merely looping.
- Neo-Swiss Revival Pairs well · Animate a Swiss-revival grid of tight grotesque headlines and you have most of a kinetic identity; the grid keeps the motion legible.
- Czech Poetist Book Design (Devětsil) Pairs well · Teige's Abeceda posed a dancer as each letter; borrow its body-as-glyph idea to give motion type a human performer.
- Demoscene Graphics (Cracktros, Demos & Text-Mode Art) Pairs well · The sine scroller is an early kinetic type system; set greetings or credits as a waving bitmap scroller over raster bars for event openers and title sequences.
- Danmaku Bullet-Comment Overlay Contrasts · Kinetic type is one designer's choreographed letters; danmaku is hundreds of identical-default lines from strangers. Decide whether motion type should feel authored or crowd-made before borrowing either.
- Korean Variety-Show Captions (Yeneung Jamak) Contrasts · Borrow a brief scale change for one emphatic caption, but keep live-action performers as the subject: the atlas's kinetic identity style makes moving letters the picture, whereas variety captions comment on footage and often simply cut in and out.
- Lucerne Poster Scene (Neubad & Südpol Posters) Pairs well · Lucerne's twisted and warped letters are already halfway to motion (The Notwist also ran as an animated poster); animate the construction for screens while keeping the printed F4 as the still.
With Renaissance Book Typography
- Minimalist Graphic Design Pairs well · Keep classical page proportions and a humanist serif but strip the ornament to give minimal layouts warmth and authority.
- Arts & Crafts Movement Pairs well · Morris's Kelmscott Press revived Jenson's roman; pair a Renaissance text block with dense Arts & Crafts borders for a private-press feel.
- Gothic Blackletter & Fraktur Tradition Contrasts · The humanist roman was drawn against the gothic textura it replaced in Italy: open, round and light where blackletter is dense, broken and dark.
- Islamic Geometric & Calligraphic Tradition Pairs well · Use arabesque or moresque fleurons, as Venetian and Lyon printers did, to frame a classical text block.
- International Typographic Style Contrasts · Centred, justified and serifed versus asymmetric, ragged and sans: the clearest foil for deciding which order a page should follow.
- Ethiopian Ge'ez Manuscript & Haräg Illumination Pairs well · Ge'ez manuscripts share the logic of black text with red rubrics; borrow the principle of red for names and headings, not the sacred imagery.
- Gothic Book of Hours (Illuminated Devotional Book) Contrasts · Compare a hand-painted devotional opening with a printed humanist text page: the former gives pictures and illuminated margins a larger organising role, while the latter centres roman type and measured margins.
- Emblem Book (Motto, Picture & Epigram) Contrasts · Its parent shares the humanist roman and italic, the paper and the woodcut, but lets text carry the page with ornament at its edges; the emblem book puts a framed picture at the centre of every page and makes it part of the argument.