--
Project 3: Type & Hierarchy | Type Specimen Poster
(24.02.2021)
Introduction
The aim of this project is to create a type specimen poster through analysing qualities such as: gestalt, scale, rhythm, line spacing, indentation, colour, tone, value, texture, and position, as well as researching its history and the significance of its form. The typeface I will be focusing on is: Avenir.
Exercise 1: Typographic Voice
To begin, we explore how choice of typeface affects the meaning and emotional feeling of a word.
When exploring the different typefaces to best express the word tradition, I noticed myself often leaning towards more formal, and common typefaces that I tend to use on a day to day basis; they all looked pretty similar to the font “Times”. So for the five chosen typefaces above, I tried to incorporate more variation.
The first typeface I chose is American Typewriter. To me, when I think of a typewriter, it reminds me of an old historical movie. It gives off a reminiscent feeling that allows for the emotion of tradition to also leak in.
The second typeface is Superclarendon. Tradition is something that is engraved in cultures; and it’s bold. I felt that the thick and strong presence of Superclarendon emphasises these feelings. The slight roundness of this typeface also gives off a sort of nostalgic emotion, sort of playful but still grounded.
The third typeface is Times. This felt the most basic to me, thus at the same time very beautifully simple. It felt to be the most obvious to represent tradition.
The fourth typeface is Apple Chancery. The stretch of the cursive and flow of this font felt a little too flowery to me. This style of cursive did not resonate much with tradition.
The fifth typeface is Copperplate. There’s a sharpness to this typeface that alters the emotion that is conveyed. Though it is bold, the x-height is rather short and kind of takes away from the feeling of tradition.
I feel the best typeface that represents tradition is Times. It’s the most simple, foundational and basic font.
About Avenir
Name of typeface: Avenir
Typeface designer: Adrian Frutiger
Year: 1988
Adrian Frutiger designed Avenir in 1988, after years of having an interest in sans serif typefaces. In an interview with Linotype, he said he felt an obligation to design a linear sans in the tradition of Erbar and Futura, but to also make use of the experience and stylistic developments of the twentieth century.
The word Avenir means “future” in French and hints that the typeface owes some of its interpretation to Futura. But unlike Futura, Avenir is not purely geometric; it has vertical strokes that are thicker than the horizontals, an “o” that is not a perfect circle, and shortened ascenders.
These nuances aid in legibility and give Avenir a harmonious and sensible appearance for both texts and headlines.
(https://www.dafontfree.io/avenir-font/)
Quote: “A time for fonts with a human touch” — Adrian Frutiger
Initial Sketches
(01.03.2021)
Exercise 2: Typographic Hierarchy
In exercise 2, we continue to explore how typographic variables clarify a message. In the four chosen exercises, two iterations were created for each option. With the given text, I chose to practice: linespacing, typographic weight & linespacing, typographic weights & horizontal shift, and size change & typographic weight.
I. Linespacing
In understanding linespacing, I chose to use different type weights for the two different explorations. I feel that the Helvetica Bold version is more successful than the Helvetica Roman. Although in both versions, it is harder to understand the hierarchy of information, the linespacing in the Bold version allows for the information to be understood easier through the separation/chunking of information. It also allows for the text to stand out more; drawing more attention from the reader to continue reading the full text.
II. Typographic Weight & Linespacing
When I explored typographic weight and linespacing, I tried to emphasise different text, as well as utilise chunking of information (with linespacing) to highlight different information. From this I learned that the different emphasises causes the information to be read and understood differently. I realised the importance of the choice of text that is emphasised because it depends on what the most important information the creator wants relayed to the viewer is; viewers’ attentions are usually initially drawn to emphasised text.
I feel that the first version (on the left), is definitely the more successful iteration. I chose to bold the seminar titles to immediately allow the viewers to know exactly what the seminar is about, and if it is of their interest, they will be more drawn to read the rest of the information. The information is grouped with the respective seminar title, in regular weight, so as not to overcrowd the eye but still providing the relevant information in the correct space. I felt that only making “admission free” bold in the bottom chunk of text was also a better approach because free things usually attract people’s attention. It was also easier on the eye for me to not view such a large block of bold text.
III. Typographic Weights & Horizontal Shift
Of all four practices, I felt that this category was the most unsuccessful in terms of readability. The jaggedness of the text from the horizontal shifting made the text more difficult to follow, and the flow was disrupted. The layouts ended up being strange compositions that ultimately created a rather ineffective poster.
After the exercise, I feel that the most successful is definitely the version I made when I was exploring size change and typographic weight (as shown on the right above). Changing the order of the text also helped in the readability of the poster. What separates the success of version 1 vs version 2 is the horizontal shift. I think keeping all the text flush-left allowed for a better flow of the page and composition. The text that was bolded were chosen to emphasise the hierarchy and importance of information, as well as the order I want the text to be read in. The spacing allows for relevant information to be grouped and organised in a naturally flowing manner.
Digital Iterations
In my first four digital iterations, I focused on exploring how to make each one visually very different from one another. This was achieved by playing around with typographic weight, upper case and lower case, type size, and spacing.
Feedback
During critique, some feedback I received was to watch out for linespacing and choice of chunking. Also, to be careful about orphans, especially in the quote, and adjust the letting space in large chunks of text. Another aspect was perhaps playing around more with the negative space and how that can begin to affect my composition. Paying attention to hierarchy was something to explore further as well. One last thing was also to start incorporating colour.
(03.03.2021)
Digital Iterations
Feedback:
Print 01:
- Contrast of character set
- fix hierarchy of designer
- move font name on top; diagonal avenir moves downwards
Print 02:
- warping of text is not allowed
Print 03:
- fix horizontal text, make bigger, move on top?
(08.03.2021)
Digital Iteration
In the following iterations, I focused on creating more contrast between text and background, as well as the hierarchy of the different components. In the first iteration, I tried to bring attention to the font name by having a second copy of Avenir in a white outline. I thought that this would also emphasise the geometry of the characters. However, I wasn’t too happy with the overall layout of the rest of the poster. In the second iteration, I wanted to create a more playful effect with the font name, and also a more interesting composition for the overall layout. This iteration was fun but overall, looked less unified. In the final iteration, I decided to use the characters as shapes, which resulted in interesting forms of negative space. However, I struggled to place the paragraph and character set within this composition.
Feedback
Extra notes from feedback session:
Print (Navy):
- align diagonals of “A” and “V” with diagonals of bottom characters
Print(White):
- wave effect not allowed
- offset “avenir” top and bottom
Print(Black):
- play around with overall composition
(15.03.2021)
Although the original composition was one of my favourites, I struggled a lot with creating a final poster that worked well with all the components. I began exploring composition more thoroughly through the use of composition lines. This helped with my proportions of text, and alignment. However, it was difficult to create a cohesive and easily readable poster.
Feedback
(16.03.2021)
Digital Iterations
After multiple attempts at creating a successful poster with my previous concept, I decided to restart and go with a different design idea. I first started with the sketch on the left, but that did not result in a poster layout I was pleased with either. This led me to the iterations on the right, where I looked more closely at how to create a poster that really expressed the font and the history and significance behind it.
Some feedback I received for the iteration in the middle were to slightly change the overall layout of the poster, watch out for alignment, hierarchy, and spacing.
(17.03.2021)
Final Iterations
Final Design Decisions:
A defining design intention that was made by Frutiger is that the font is not purely geometric. The vertical strokes are thicker than the horizontals, the O’s are not perfectly circles, and letters also have shortened ascenders. I tried to embody these aspects into the font name, since it is the first thing I want the viewer to see when they look at the poster. I felt it would make most sense to give the font name the font’s most defining characteristics. For example, there are varying horizontal alignments between each character, and the A and V are offset to emphasise the angles of diagonals, the e in lower case to show the imperfect circle, and the n elevated to show the difference in vertical and horizontal stroke thickness. I felt the jaggedness of the font name also creates a playful effect. This also works to reflect the quote on the poster: “a time for fonts with a human touch”. I also decided to make the word “future” blue in contrast to the rest of the white text within the paragraph to make it stand out, since it is also a very defining characteristic behind Frutiger’s design motivations.
Final Feedback:
- allow for spacing between the vertical border of the page and the font name.
- align designer name with the number 1
- refine spacing in character set
Reflection:
This project challenged me in many ways. I learned a lot during the design process and it allowed for me to explore different ideas more broadly. I think that the iterative process in this project was intense as I often found myself not fully satisfied with my ideas. This resulted in many drafts of different ideas but not too many fully refined concepts (until the end). From this, I learned that the iterative process is constant and long. It is important to eventually refine on one idea, because there will always be a new or different approach that exists. This will definitely be something I keep in mind for future projects.
