ZAZZ

a display font designed to
set bold type & generate patterns

TYPE TESTER

  • CHARACTERS: 0
  • CLEAR
  • ◀︎▶︎
  • ◀︎▶︎
  • ◀︎▶︎
  • ◀︎▶︎

PATTERN MAKER

LETTERFORM STRUCTURE

P
A
T
T
E
R
N
W
O
R
D
A
N
D
L
E
T
T
E
R
S
Zazz is a study in the relation­ship between type and patterns and the nuances of reading and seeing.

Two significant factors that affect whether we identify a series of shapes as letters, words, or pattern/image, are context and spacing. A period, for example, is often only identifiable when it comes after another character. On its own, it simply appears as a dot. When the rhythm of white space between letters is removed, they merge into each other and automatic reading is disrupted, forcing us to parse the visual mass.

XXXXX
XXXXX
XXXXX

Some typefaces that employ pattern do so by conforming pattern to strokes of a letter 1 or by creating patterns through repeating a module on a grid 2. Unlike these, the patterns of Zazz are not completely apparent from viewing one letterform. Instead individual letter­forms conform into a larger textural pattern. It was designed with the idea of removing the margin of white­space between letters to create tiled patterns, taking advantage of the alphabet’s modu­lar­ity.

The font originated by geo­metriz­ing the strokes of a slab serif that I had a drawn a couple char­acters for. Later I increased the geometric rigor by configuring the letters with basic modules on a grid 3. The letters were then massaged to become more coherent forms, as before they were a tangram of shapes.

Like a jigsaw puzzle, the letters have connection points on all four sides, allowing every character to work with each other in the pattern while re­main­ing distinct in regular type­setting. This is a common technique in tex­tiles, and also what Zuzana Licko did for her pattern kits 4.

The letters are bounded in a square, allowing for more easily transfigured sym­metries, an important aspect to generating a variety of patterns. One can rotate a square letter 90 degrees and still have it fit within the pattern 5. This also allows for the counterforms of each letter to connect to each other on all sides, main­tain­ing geometric rhythm hori­zontally and vertically.

The gridded nature of the letterforms and how they fit with each other not only allows the letters to form patterns on their own indiv­idually, but also allows entire words to become the modules for patterns that obfuscate the semantic content 6. It is initially more of a binary switch from image to word instead of a simultaneous experience 7.

FUNKY!

Zazz is also an inter­preta­tion of how geometrically based letterforms can convey diff­er­ent tones and create diff­er­ent textures. The type­face Orientation 8 is a recent example of what direction geometric counter­forms can take, adding a different voice within the geometric typeface classification.

PRECEDENTS

1 PATTERN TYPE

Eike Dingler / Mauve Type (2015)

Pattern Type was inspired by the ornamentation of medieval initial letters and conceptualized through the lens of generative art. Patterns based on the rect­angle or triangle were compu­ta­tion­ally processed to fit within the outlines of a geometric upper­case, allowing the letters to function as image while maintaining legibility and readability.

I Love Typography

2 WIND

Hansje van Halem / Typotheque (2017)

Van Halem is a Dutch graphic designer known for enmeshing letter­forms within complex patterns. Due to the systematic nature of her patterns, some of them are trans­lat­able into typefaces. Wind is a vari­able font of one of her lettering projects.

Hansje van Halem

It is constructed like a bitmap font, but aesthet­ic­ally transforms due to repeating one module. The long and overlapping lines create a texture that lifts off the page. This is another example of how the modularization of letter­forms can be some­thing greater than a tangram of shapes and how a typeface can reflect a designer’s body of work.

3 SCHABLONENSCHRIFT

Josef Albers (1926)

Albers’ “Schablonen” (stencil in German) reflects the Bauhaus ideology of reductive geometric abstraction. The configuration of primary shapes and the rela­tion­ships and diff­er­ences between the letters show the basic premise of what type generally is: a modular system.

FontShop / original drawing from Offset, Buch und Werbekunst

Generating combinations of modules derived from three simple shapes — the circle, square, and triangle — can challenge one’s schema of what a letter is. Albers has also created other reduc­tively geo­metric alphabets, such as the Bauhaus Lettering Set.

4 TANGLY

Zuzanna Licko / Emigre (2018)

As described by Emigre, the pattern parts in Tangly connect on all four sides, somewhat similarly to script characters. The pattern parts in Tangly also have symmetric, mirrored, and asymmetric counter­parts to aid patternmaking.

Emigre

Tangly is Licko’s fourth pattern “typeface,” follow­ing Puzzler (2005), Hypno­pædia (1997), and Whirligig (1994).

5 KABA ORNAMENT

Bram de Does (1985)

Kaba exemplifies the true spirit of orna­menta­tion: beauty in the multiplied module.

Alphabettes

Kaba’s module, a curved shape and a line bounded in a square, seems under­stated, and the ornament is only made up of a single pair of mirrored modules. But the small set and clarity in form is hardly limiting. The nega­tive shape is similar to the posi­tive, creating a rota­tional color symmetry within the module itself. When multiplied and trans­formed through 90° rota­tions, the symmetries expo­nen­tiate and dynamic patterns and images emerge.

6 CALCULA

Shiva Nallaperumal / Typotheque (2017)

Calcula is a typeface that was inspired by a geometric style of ancient Arabic calli­graphy. It is composed on a grid, and several ligatures were drawn in order to fit words into rectangular blocks. The words conse­quently become modules themselves, making them apt for constructing patterns.

Typotheque

7 JURRIAAN SCHROFER

Juuriaan Schrofer (1926–1990) was a Dutch graphic designer and partner at Total Design, the studio co-founded by Wim Crouwel. Schrofer designed increas­ingly illegible letterforms that were easily manipu­lated for dimensional effect due to their square proportions.

Text Biben / European Journal of Agricultural Economics

Schrofer also designed geometrically modular alphabets reminiscent of Josef Albers’.

8 ORIENTATION

Sandrine Nugue / Commercial Type (2018)

Orientation is a refreshing inter­pret­ation of a geo­metric sans in a crowd of a otherwise sterile ones. Its triangular counterforms maintain a soph­is­ti­cated rather than elementary sense of play. Despite the un­con­ven­tional forms, the typeface is easily read­able, as Nugue origi­nally designed it for stencil signage.

posters designed by Sandrine Nugue: left, right

9 FIVE STRAND WOVEN

Tauba Auerbach / Diagonal Press (2013)

Auerbach’s fonts are part of her artistic work. In particular, Five Strand Woven, made in 2013, conn­ects to her woven-canvas paintings, made from 2012 to 2015.

Diagonal Press

To Auerbach, her fonts are not “tools” for other people but for her own art­is­tic expression: “I've never sold fonts for use because the letters feel very personal — like vis­ual­iz­a­tions of my voice. Seeing one of these type­faces used by a stranger would be akin to hearing my voice come out of someone else's mouth.”

◀︎
jump to section:

CHARACTER SET

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

!?.,-–—*+=&()[]<>◆⬥


To try the font, contact vannavu@wustl.edu.

COLOPHON

This website and the typeface Zazz were created by Vanna Vu for the Communication Design BFA Capstone at Washington University in St. Louis (2019). The supporting typeface is Klim’s Pitch Sans. The process for this project can be found here.

Many thanks to:

Jonathan Hanahan, Ben Kiel, Penina Acayo Laker, Jim Walker, and Ken Botnick for being either significant advisors on this project or educators throughout my time at WashU,

the designers, makers, and writers who informed this project,

and all of my peers — each which have either supported or inspired me along the way and that continue to do so.

Please rotate your device into landscape orientation or widen your browser window