Project 3: Type & Hierarchy

Shan Wang
Communication Design Fundamentals F17
3 min readSep 17, 2017

Typeface: Garamond

Designer: a Parisian engraver Claude Garamond

Year it was designed: 16th century

Characters/features:

letters with a relatively organic structure resembling handwriting with a pen, but with a slightly more structured and upright design,

soft rounded serifs; scooped serifs; flag-shaped top-serifs,

classical feeling yet not overly ornate;

delicate and allows ink to bleed on the page without distorting the word;

Expression of the typeface in a sentence:

Exercise Three

Typographic Hierarchy

1 Linespacing
2 Typographic weights
3 Horizontal shift or Indentation
4 Typographic weight & linespacing
5 Typographic weight & horizontal shift
6 Horizontal shift & linespacing
7 Size change & typographic weight

Typeface Poster:

After gathering information about the chosen font including history, unique characteristics and so on, we started sketching layout of the poster and explored a variety of compositions.

sketch 1 & 2
sketch 1 & 2

Digital Iterations I:

Entering the first round of digital iteration, I looked into the effect of figure ground and how the flip in color as well as the change in scale can really emphasize the unique characteristics of the font. Among all the alphabetical letters, I was drawn to the capital “G”, the lowercase “g” & “a” for the special serifs.

Digital Iteration 1, 2 & 3

Digital Iteration II:

After several iterations on the first round, I further developed the three versions of the poster and received valuable feedback in terms of the hierarchy of information & the value created by blocks of text.

Digital Iteration 4,5 & 6

Digital Iteration III:

In this stage, I narrowed down to two versions of the poster, and further iterated on the alignment of text, kerning & leading and explored the effect of scale and overlaps on the reading of relationships between characters.

Digital Iteration 7 & 8

Final:

I chose one poster and refined the leading & tracking between the characters, and adjusted the position of the text block to minimize the amount that got cut off by the clipping mask for the optimal visual hierarchy and harmony.

Final Poster

--

--