Task 02: : Typographic Exploration & Communication

9/05/2023 - 23/05/2023 
Week 06 - Week 07
Adrianna Sofea Mohd Fauzi (0350661)
Bachelor of Design (Hons) in Creative Media
Typography - Task 2 : Typographic Design & Communication

---

LECTURES
WEEK 6 - WEEK 7
All lectures from 1 to 6 are completed in Task 1: Exercises
Task 2 - Demo Progression

Figure 1.0 Typography Task 2 Demo Progress 

NOTE:

Our lecturer assigned us our next task and explained us through this video as he demonstrated the editorial look or book cover look that we have to be doing for task 2. We are to create an editorial spread with the measurement of (200 x 200). The texts and content are provided by our lecturer, he gave us 3 options one is the "Bauhaus" heading, secondly "A Code to Build on and Live by", and thirdly "Unite To Visualize A Better World". This time we have to use Adobe InDesign to compose and express the given contents and it was my first time learning each function in InDesign to create a seamless layout and expression or modification is allowed only for the headline.

Tools or Application used:

• Adobe InDesign
• Adobe Illustrator

---

INSTRUCTIONS

Page 9 -10: Task 2: Type Design and Communication

---

TASK 2: TYPE DESIGN AND COMMUNICATION

1. Sketches

Notes:
I have decided to go with the third option, which is "Unite to visualize a better world". I have read the content and feel confident to choose this topic and wish to proceed with the third option.

Figure 1.1 Rough Sketch on Layout Structure, 7/05/2023

Figure 1.2 Brainstorming on Type Expression, Layout Formatting, 10/05/2023

Notes:

Sketching process was quite interesting, although I did most of the sketching incorrectly, I had to include this into my portfolio for process purposes. I did not know how to develop or arrange heading, body text, subtext, etc. However, I focused more on the expression of the heading by kerning and changing perspective of the letterform order. 

---

1(02) Visual Research

Figure 1.3 Heading Expression Idea

Figure 1.4 Layout Research

---

2. Headline Expression Progress

Thought process:

Figure 2.1 First Ideation of Heading Expression 

Notes:
During this thinking process, I wanted to try using different typefaces for each letterform to create a fun and lively heading relating to its context that is heavily focused about designers and creativity. 

Details:
LETTERFORM EXPRESSION-
#1 -"UNITE" Futura Std based typeface with different appearance known as "Bold". (The "I"in Unite is ITC Garamond Std, to shift it into a "tangled" form of union. This is to highlight the word "unite" and the start of the sentence to read. "To Visualize" Futura Std, "A" Futura Std, "Better World" ITC Garamond Std. 
COMPOSITION-
#1- "UNITE" the "e" letterform gives space to connect the "TO" word and continuity. "TO" word has kerning applied to fit "Visualize" the "V" letterform's body width and the "V" character width aligned with "A", following "World"'s, "W" with "A". 

Figure 2.2 Second Ideation of Heading Expression

Notes:

Second ideation, I changed my focus word to "Visualize" instead of "Unite" (from the first ideation). The word "Visualize" seems more suitable to its context because it brings more creativity and wide meaning to design, which is to visually create. Although for this idea, I decided to expand the heading to give more free space, and use the white space instead of cramping them together. The word "Visualize" as seen in figure 2.2 is the major heading whilst "UNITE TO" and "A BETTER WORLD" will be the small headings. 

Details:
LETTERFORM EXPRESSION-
#3 "Visualize" in uppercase letterform and kern, with multiple typefaces and different appearance creates an uneven ascender height to give rhythm to its meaning. "UNITE TO" and "A BETTER WORLD" are seen to use the same typeface and point size, as well as appearance.
COMPOSITION-
However, I positioned them differently, by rotating them either horizontal or vertical positions, as seen above.

Figure 2.3 Third Ideation of Heading Expression  with "Visualize"
as major heading 

Figure 2.4 Third Ideation of Heading Expression Process

Notes:

Third ideation, "Visualize" has 9 characters which is an uneven number, which was difficult for me to position them with their partner, therefore I added an element from (Adobe Illustrator) beside "V" to balance the the structure vertically. 

Details:
LETTERFORM EXPRESSION-
#6 and #7 each letterform are different typefaces with aligned vertically below each other. The lines of gray value are repeated stroke of the letterform, there are over 18 strokes to create a minimal amount of effect that I want it to look like a distorted letterform. I tried between 20-15 and found 18, the most suitable at best in regards of the spacing and motion it gives.
COMPOSITION-
The structure for this heading is a motion-like sequence, each letterform is placed below each other for 18pt away.

Figure 2.5 Fourth Ideation of Heading Expression with "Visualize" as 
major heading

Notes:

Fourth ideation is inspired by the third ideation, in which I changed the typeface to one instead of multiple fonts for "Visualize".  Shifted and tilting each letterform to enhance rhythm and movement helps to bring the "Visualize" meaning to life. 

Details:
LETTERFORM EXPRESSION-
#10 is a duplicate of #9 but I tried to add a few element however, I felt that it was unnecessary. Although, I took quite a long time to choose which gray value suits best for the repeated stroke.
COMPOSITION-
The structure for this heading is a motion-like sequence, each letterform is placed below each other for 18pt away. (similar to figure 2.5)

Figure 2.6 Grayscale (Values) to use in Heading Expression

Notes:
I have tried a variation of gray value to complement the black-color fill of the font. Between Dark Grey to Border color (based on figure 2.6) I particularly liked the Medium or Light grey color as the font would appear more clearly in comparison of Dark-grey that might give a blurry, unclear look to the font. 

Figure 2.7 Fifth Ideation of Heading Expression with "Visualize" as
major heading 

Details:
LETTERFORM EXPRESSION-

Fifth ideation, "Visualize", here I experimented with shifting the position of the letterform for #11, #12 and #14. Attempt #13, I played with creating elements in which I added a square to the "I" but below, and a semicircle to look like an eye on top of the letter "S", the letterform "A" with another uppercase "A" but inside the counterform 

---

3. Text Layout Progress
When it comes to body text formatting, margins and guides are vital to achieve stability
and readbility:

Figure 3.0 Alignment and Interline Spacing 

Figure 3.1 Cross Alignment and Leading 

Figure 3.2 Line Length within 55-65 characters for each paragraph 

In typography, margins helps to construct a well proportionate layout. In which, we decide how many columns to used. In this task, I have set two columns in this (200 x 200) page. This is due to having the heading on the left side (different page). Paragraph spacing is the same value as interline spacing (Leading). I double the value for the leading, as the point size is 10 pt, therefore, leading would be 12 pt. Ensuring there is no widow and orphan at the end of each paragraph. 

---

4. Headline and Body Text Progress

Figure 4.0 Attempt #1, #2, #3 and #4 of structuring heading and body text 

Figure 4.1 Attempt #5, #6, #7 and #8 of structuring heading and body text 

---

5. Blocked Out Layout

Figure 5.0 Attempt #1, #2, #3, #4, #5, #6, #7 but in blocked out blocks. 

---

6. Week 6 - Feedback Discussion 

Figure 6.0 Before and After Feedback of heading structure and body texts

Feedback:

Mr. Vinod had suggested if I wanted to use various amount of typefaces, it is allowed, however I must apply them for each letterform to give balance and harmony to the heading. 

Mr. Vinod's version of what he suggested: 

Figure 6.1 Mr.Vinod's version of the heading that is balance and harmony.

---

7. Layout Options

Figure 7.0 Attempt #2 (Heading) with Body Texts 

Fonts: Futura Std (Light Condensed Oblique), ITC Garamond Std (Bold Narrow Italic), Futura Std (Light), Janson Text LT Std (75 Bold)

Point size: 130 pt (Heading), 8 pt (Subtext), 9 pt (Lead-in text), 9 pt (Body Text)

Alignment: Left alignment (Body Text), Left Alignment (Lead-in-text), Left Alignment (Subtext)

Leading: 10 pt (Lead-in text),10 pt (Body Text and Subtext)

Paragraph spacing: 10 pt (Body Text and Subtext), 10 pt (Lead-in text)

Line length: 54-63 characters (Body Text)

Figure 7.1 Attempt #9 (Heading) with Body Texts

         Fonts: Futura Std (Light Condensed Oblique), Bembo Std (Regular), Univers LT Std (47 Light Condensed), Futura Std (Light)
Point size: 120 pt (Major Heading), 54 pt (Small Heading), 8 pt (Subtext), 10 pt (Lead-in text), 10 pt (Body Text)
Alignment: Left alignment (Body Text), Left Alignment (Lead-in-text), Left Alignment (Subtext)
Leading: 11.5 pt (Lead-in text),12 pt (Body Text and Subtext)
Paragraph spacing: 12 pt (Body Text and Subtext), 11.5 pt (Lead-in text)
Line length: 54-63 characters (Body Text)

Figure 7.2 Attempt #3 (Heading) with Body Texts 

          Fonts: Futura Std (Light Condensed Oblique), Futura Std (Light Condensed)Janson Text LT Std (74 Bold), ITC Garamond Std  Light Italic), Futura Std (Bold)(Major Heading), Futura Std (Light (Small Headings), Bembo Std (Regular) (Body Text)
Point size: 150 pt (Major Heading), 54 pt (Small Headings), 8 pt (Subtext), 10 pt (Lead-in text), 10 pt (Body Text)
Alignment: Left alignment (Body Text), Left Alignment (Lead-in-text), Left Alignment (Subtext)
Leading: 11.5 pt (Lead-in text),12 pt (Body Text and Subtext)
Paragraph spacing: 12 pt (Body Text and Subtext), 11.5 pt (Lead-in text)
Line length: 55-63 characters (Body Text), 56 (Subtext)

---

FINAL TASK 2: EXPLORATION AND COMMUNICATION

Final Layout (Figure 7.1) with Grids in PDF

 Final Layout (Figure 7.1) in PDF

Final Layout (Figure 7.1) in JPEG

---

FEEDBACK

Week 6:

General Feedback: Ensure to express the headline by choosing a specific word to express. Example: "Unite" and highlight that word to attract the reader. 

Specific Feedback: Using different typefaces/characters is allowed but apply them every word in the headline instead of certain letter as it caused the layout to look disheveled

---

REFLECTION

Experience:
This task was interesting as I get to learn how crucial every step of the rules of typography that it requires to create a unique layout. I feel that I am still not competent enough, however, it has helped me learnt a lot from my mistakes especially in kerning and to ensure it is not too condensed or awkward. As well as adjusting the paragraph spacing and setting the alignment of each text to balance the structure and message.

Observations:
Based on my observation, I tend to make smaller text point size to achieve a minimalist look which is incorrect. Because reducing the point size will make the text hard to read and reduce visibility, Mr.Vinod has also pointed out on my body text formatting in figure 6.0 (before feedback) were too small and it disrupts the overall layout if the context is not legible.

Findings:
In Typography, layout is constraint to contrast, simplicity and proportion. This is to achieve legibility and effectiveness of visual communication. Based on the Typographic Design: Form and Communication by Rob Carter (the 6th Edition) book below, I have learnt the detailed requirements to manipulate a successful layout. 

---

FURTHER READING

Typographic Design: Form and Communication by Rob Carter 
(the 6th Edition)