Typography | Task 2: Typographic Exploration & Communication (Text Formatting and Expression)

|| 29/10/24 – 12/11/24 (Week 6 – Week 8) 

|| Tee Zi Tong, 0366165

|| Typography 

|| Task 2: Typographic Exploration & Communication (Text Formatting and Expression)

TABLE OF CONTENT 

1. LECTURES
2. INSTRUCTIONS
3. TASK PROGRESSION
4. FEEDBACK
5. REFLECTION
6. FURTHER READING

LECTURES 

Lectures 6 / Typo 5 _ Understanding

1. Asymmetry in Uppercase Letterforms

- Although uppercase letters, such as those seen in the Universe and Baskerville typefaces, seem symmetrical, their stroke weights and arcs are actually asymmetrical. This optical modification improves the typeface family's expressiveness and harmony.

2. Letterform Sensitivity & Consistency

- The Helvetica and Univers typefaces' differing renditions of the letter "A" draw attention to design sensitivity. For optical equilibrium, curved strokes (like the "s") frequently rise or dip slightly. A design's consistency is essential to avoiding typeface overkill.

3. Median Line & Counter Form

- To make curved letters appear the same size as straight characters, they extend slightly above the median line. For a letter to be readable, the space surrounding it is called counter form. Analyzing the way that letters such as "R" handle counters aids in comprehension of readability.

4. Analysis of Existing Typefaces

- Learning about the different typefaces for letters like "S" and "G" will help you understand typographic norms. In typography, contrast—such as light vs dark or organic versus machined—is a technique used to provide special effects and distinguish information

Fig 1.6.1, Examples of Contrast 

INSTRUCTIONS 

<iframe src="https://drive.google.com/file/d/12TJDqEwwVMqcpbJKNmF2YADjo50jhQip/preview" width="640" height="480" allow="autoplay"></iframe> 

TASK PROGRESSION

Task 2: (20%)

Description:

For this assignment, we will choose one of the offered text options (available in TEAMS) to design a 2-page typographic editorial layout. The size of each page should measure, 200mm by 200mm. The design of the project should be restricted to the typographic approach – no graphics aren’t permitted (if not prohibited outright). But there may be lines or shades which can be included occasionally in graphic form.

Learning Goals:

It’s important to have a detailed understanding of actual grids and layouts and the general page flow.

Adopt and use typography elements that will support the economies of the system through controlling the readability and making sure that the reading flows naturally.

Make the typographic presentation interesting and easy to remember. 

Progress / Sketches:

Ms. Vitiyaa presented this assignment during Week 5. The task is to type one of the provided texts selecting an appropriate layout for an editorial. First, I checked the Guidelines of the module to ensure that I was clear about the project’s details and then I searched for a tutorial video on YouTube. Thus, having read through the texts given, I chose two variants to paint two different directions to compare the results while making a concept.

With reference to the texts, they offered some specific difficulties and sources of inspiration in my process of developing a successful typographic piece.

Fig3.1.1, Sketches 

Progress / Title:

To create a clean and engaging typographic design in Adobe Illustrator I tried several title type designs. For some of the titles, I chose to use the Text and Pen tools to pull lines from the letterforms to stress specific characteristics.

For the title font I chose Univers LT Std The font has simple clean look and that’s reflects our approach to the text and content- plain and simple. This choice helps make design looks as professional as possible and, at the same time, easy to read. These explorations facilitated my playing around with the layout hierarchy with a view of making the title arise interest though not overwhelming the rest of the information.

Fig 3.2.1, Progression Screenshot

Fig 3.2.2, Progression Screenshot

Layout Drafts:

Fig 3.3.1, Layout Drafts

My Compositions:

Within my exploration process, I developed six various works to try out on the text formatting and layout designing issue. Every single piece is aimed at striking a chord on its readability factor, the execution and layout of its design and the appropriateness of its theme.

Fig 3.4.1, 6 Pre-Compositions 

Final Design:

Fig 3.5.1, Final Text Expressions and Formatting without grids (JPEG)

Fig 3.5.2, Final Text Expressions and Formatting without grids (PDF)

Fig 3.5.3, Final Text Expressions and Formatting with grids (JPEG)

Fig 3.5.4, Final Text Expressions and Formatting with grids (PDF)

Formatting Details:

Title:

Typeface: Univers LT Std 

Type Size/s:145pt 

Leading:0 

Paragraph spacing: 0 

Body Text: 

Typeface: Gill Sans Std 

Type Size/s: 10 pt

Leading: 12 pt

Paragraph spacing: 12 pt

Characters per-line: 60-65

Alignment: justified with last line aligned left

Margins: 10 mm top + left + right + bottom

Columns: 3

Gutter: 5 mm

FEEDBACK

Week 7

General Feedback:

Unfortunately, I was not able to attend this week’s class. However, I went back to the instruction that were posted on Teams, and I contacted one of my friends to make sure I am caught up with what was being discussed. Ms. Vitiyaa reminded to complete Task 1 with all the portfolio by the end of the week to begin work on Task 2.

She also told us to submit all printed Helvetica work from the Task 1 to her for her final look. Furthermore, she directed us to produce the Task 2 work and take a print and bring it in A3 size for the class presentation.

As for Task 3 that we should do for next week. She said, we have to prepare A4 graph paper and three thick marker pens of above 3.0.

Specific Feedback: N/A

REFLECTION

Experience:

I really had fun doing this task. Since it was up to me to decide how to structure the material, it was the best chance to enhance my knowledge of InDesign and to try out as many compositions as possible. Overall, I found implementing the golden ratio rule in my layouts a difficult but rewarding experience. Ms. Vitiyaa took the time to appreciate some Bauhaus drafts that I created, and that gave me the morale to continue. It was fun to do the visual research for this project as it assisted me in learning more about the Bauhaus movement. I even ventured into what I have never used before is the rotate text to ensure I was aligning it accurately hence the use of snap guides. It was a good approach to my compositions as it gave the work a dynamic look, and it was fun to make these small changes to see the difference they make.

Observations:

During this task, I realized the significance of vacancies and line separation to avoid crowed work. A good art piece should express a given theme without making it a heavily loaded message that a viewer has to decipher. I realized that content knowledge is important because it defines the tones or emotions portrayed in the final design. Any movements between texts such as text rotation and text positioning, however slight they may be, truly affect the harmony of the layout and thus increases the depth of design.

Findings:

This is something I should have observed before but only realized it after the repetition that professional clean-up of the document entails right kerning and the right spacing between different features. Earlier I thought that space can be managed at the paragraph level arbitrarily because sometimes when giving explanations I used to leave large spaces between the lines and create disproportion. I developed a design that was more reader friendly when I refined those details. This was a task that really highlighted the significance of detail in the concern to typographic design and how slight changes could enhance the general layout.

FURTHER READING

"Typographie: A Manual of Design" by Emil Ruder

Source: Arthur Niggli Publishers

This book is a classic that must be read in the learning process of typography as it explain and further the working of typographic elements and incorporating into an design work. Emil Ruder pays much attention to clarity, legibility, and balanced arrangement of the text, and, therefore, it will be useful for attaining mastery in editorial layouts.

Under type and space, Ruder gives details on how the use of type in a design can be made to improve the flow and legibility of the design space. It precisely gives the audience applicable information about the connection between form and function, which is useful when addressing the typographic grids and implementing the complicated structure. It can be used as a reference to improve a typographic sensitivity and study types, including text composition.