Typography- Task 2: Typographic Exploration and Communication

 29/10/24 - 17/11/24 ( Week 6- Week 8)

Kek Kai Wei, 0363513
Typography / Bachelor of Patisserie Arts ( Hons)
Task 2: Typographic Exploration and Communication

TABLE OF CONTENTS

LECTURES

WEEK 5

Typo_5_Understanding


1. Understanding letterforms:

  •        Appears symmetrical but isn’t: The uppercase letters in Baskerville look symmetrical, but each stroke actually varies in weight.
  •        Differences in serif curves: The curves connecting the serifs to the main strokes are all slightly different, adding subtle uniqueness to each letter.
  •      Attention to detail: While the design appears balanced, the designer adds small variations to enhance visual interest.
  •           Overall harmony: These adjustments keep the typeface family cohesive

  •      Appears symmetrical but has subtle differences: The left stroke of uppercase letters is thinner than the right.

  •    Attention to detail and uniqueness in type design: Both Baskerville and Univers showcase the designer's skill in maintaining overall harmony while giving each letter a unique character.

  • Complex Characteristics of Letterforms: By comparing the lowercase letter "a" in the sans-serif fonts Helvetica and Univers, the intricate details of each letterform can be clearly presented.

  • Significant Differences in Style: By examining the treatment of stroke endings and the connection between the circular parts and the stems of the letters, the stylistic differences between these two fonts become evident.

Fig 1 Difference between 2 letterform 'a'



2. Maintaining x-height
  • The x-height primarily refers to the height of lowercase letters. It's important to note that curved strokes, like those in the letter 's', need to rise above the median or drop below the baseline to appear consistent in size with the vertical and horizontal strokes they connect to.
Fig 1.1 Curved strokes extending over lines


3. Form/ Counterform
  • Recognizing letterforms and understanding counterforms (the space defined by the strokes) are equally important. This is particularly true for letters like the lowercase 'r', which do not have a distinct counterform. The visual connection between words directly affects readability, influencing how easily people can comprehend the text. Therefore, considering both letterforms and counterforms is crucial for enhancing readability.
  • To grasp a letter's form and counter, close examination reveals the balance between them, showcases the letterforms' unique traits, and offers insight into the letter-making process.

Fig 1.2 Counterform


4. Letters/ Contrast
  • contrast refers to the difference in thickness between the strokes of a letter, affecting its style and legibility.
Fig 1.3 examples of contrast in Typography





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

Task 2: Typographic Exploration & Communication

1. Searching for ideas

In Task 2, we were given three texts to choose from for our assignment, and I selected the title "A Code to Build On and Live By." I chose this title because it immediately sparked several ideas in my mind. To ensure my ideas were effectively conveyed, I went to Pinterest to find similar design inspiration. However, after a round of searching, I found it challenging to find relevant information related to this title, so I decided to focus on exploring title designs instead.


Fig 1.4 Idea


2. Layout

After conducting a period of research, I began designing my title in Adobe Illustrator while simultaneously formatting the text in InDesign. Throughout this process, I continuously integrated my ideas and inspirations into the design, striving to make the title both creative and visually appealing. I hope that through this approach, I can better showcase my concepts.



Figure 1.5 Heading design #1 and #2 in AI ( 23/10/24)


Fig 1.6 Different layouts ( 23/10/24)

 After receiving feedback from Ms. Vitiyaa, I made further adjustments to my assignment. She mentioned that my kerning and letterspacing were unbalanced, so I corrected these inconsistencies. 


Fig 1.7 layout after Feedback( 8/11/2024)

3. Final Layout

Before submitting my work, I noticed that my image for "A Code to Build On and Live By" was missing the word "and." Additionally, I wasn't fully satisfied with the design, so I decided to use my draft 1 image for the final submission. I also removed the triangle in the top left corner to keep it simpler.

After presenting my final work to Ms. Vitiyaa, she pointed out that my design for "A Code to Build On and Live By" lacked flow, appeared cluttered, and included an orphan line in the layout, which affected the overall aesthetics of the article. Therefore, I decided to create a new design and correct the orphan line issue.

Fig 1.8 Final heading design( 8/11/2024)


Margins：10mm
Gutter: 5mm

Head
Font: Bodoni Std- Poster 

Body
Font: Futura Std Book
Type size: 9pt
Leading: 13pt 
Paragraph spacing: 0mm
Characters per line: 55-65
Alignment: left justified




Fig 1.8 ' A code to build on and live by' Final (9/11/2024)


Fig 1.9 'A code to build on and live by' (PDF) (9/11/2024)


Fig 1.10 ' A code t build on and live by' (jpeg with grid) (9/11/2024)


Fig 1.11 ' A code to build on and live by' (PDF with grid）(9/11/2024)

FEEDBACK

Week 6

Specific feedback: In the Helvetica assignment, I need to remove the photo in the lower left corner of my work and adjust the leading text to a smaller size. Overall, there are no major issues with the assignment.  

General feedback: We need to complete the Task 1 e-portfolio, including lectures and exercises, by the end of today and submit it by 11:59 PM, as well as finish the assignments newly assigned by the team.

Week 7

Specific Feedback: 
Ms. Vitiyaa pointed out that some lines in my paragraphs have spacing that’s too wide, while others are too dense, causing certain areas to appear overly black and difficult to read, while some areas feel too spacious. Although my layout is good, the overall kerning and letter spacing are not yet balanced.

General Feedback: 
The layout is good, but there are still some issues in the paragraphs, such as inconsistent leading and kerning, unbalanced letter spacing, or the presence of widows and orphans.



REFLECTION

Experience：

My experience with this task is slightly worse than the previous one. The last exercise, "I am Helvetica," was the one I felt I did the best. However, it was that exercise that gave me the foundational knowledge to complete this task. Although I made more mistakes this time, such as unbalanced letter spacing, the final result was still successful.

Observations：

What I observed from this task is that trying to achieve a perfect layout for all the text while incorporating graphical elements is a very challenging task for me. The space between the fonts cannot be too large or too small, or it will affect readability. Following the tutorial in the video, I tried using three columns of text, but after creating two examples, I found it a very difficult challenge. It was hard for me to balance the kerning and letter spacing, so I ended up changing my final assignment to two columns, as I still needed to fit both the text and the graphical elements.

Findings：

What I’ve learned from this task is that typography is really hard. Not only does it require creative elements, but creating a good layout is not easy. This task is very time-consuming, so thorough research is necessary before starting.




FURTHER READING

1) Typography design: Form and Communication

Fig 1.12 Typography design : Form and Communication


Fig 1.13 The golden spiral winds 

Divided space reflects a system of proportional relationships, and the typographic grid is also a system of proportions. The grid ratio (such as X:2X) determines the size and placement of typographic elements.

The golden section is a common proportional model, with a ratio of 1:1.618 (or 38% to 62%), widely used in art and design. The Fibonacci sequence, related to the golden section, has each number as the sum of the two preceding numbers, and can be observed in nature, such as in the patterns of shells and pine cones.



2) The Complete Manual of Typography:

Fig 1.14 The Complete Manual Of Typography

Chapter 8： What Makes Good Type Good (and Bad Type Bad)

Fig 1.15 tight space

After reading this chapter, I realized that the quality of typography has a significant impact on the overall design of a page, especially in terms of font readability and visual appeal. Poor typography reduces readability and affects aesthetics.  Readability refers to the recognizability of the letterforms, while  clarity is the ease with which the text can be understood. The spacing between letters and lines is also crucial in typography; both tight and loose letter spacing can affect the visual outcome. Tight spacing makes the letterforms harder to recognize, while loose spacing appears rough and can hide typographical issues.

Additionally,  unbalanced typography makes the page look uneven and reduces overall readability. Therefore, typography design should pay attention to details, maintaining balance in letter spacing, line spacing, and font choice to ensure clarity and a unified visual effect.















Comments

Post a Comment

Popular posts from this blog

TYPOGRAPHY- TASK 1: EXERCISES

Image
23/09/24 - 01/11/24 ( Week 1- Week 6) Kek Kai Wei, 0363513 Typography / Bachelor of Patisserie Arts ( Hons) Task 1: Exercises & Lectures TABLE OF CONTENTS 1.  LECTURES 2.  INSTRUCTIONS 3.  FEEDBACK 4.  REFLECTION 5. FURTHER READING LECTURES Week 1 :   Typo_1_Development (A)  Introduction  Typography: The art and technique of arranging type to make written language legible, readable, and appealing when displayed.  Font:  The individual font or weight within the Typeface. Typeface : The entire family of fonts/ weights that share similar characteristics/styles. Figure 1.1: Example of fonts Figure 1.2: Example of typeface  (b) De velopment 1. Early letterform development : Phoenician To Roman        Uppercase forms are simple combination of straight lines and pieces of circles, as the materials and tools of early writing required.          Phoenicians wrote right to left   ...
Read more

Task 1/ Exploration

Image
03 /02/25 -  21/02/25 ( Week 1- Week 3) Kek Kai Wei, 0363513 Design Principles / Bachelor of Patisserie Arts ( Hons) Task 1:  Exploration Table Content: 1. Instruction 2. Design Principles 3. Interest artwork 4. Feedback Instruction MODULE INFORMATION Design Principles:  Gestalt theory This theory describes how humans perceive things as a whole rather than as individual elements. The human eye organizes perceived elements into recognizable patterns, and by processing information in this way, we can better understand and adapt to our environment. The Lord Of The Rings: The Two Towers (2002) Take from pinterest Principle of Similarity : Although the elements are separate, the brain will still create a link between similar ones. The similarity with the circles Posted by CarmenU Principle of Continuation : A continuous flow of visual elements can be created by moving along the paths, lines, and curves in a design. Examples Of Continuation Take from Pinterest Posted By Hannah...
Read more

Task 2 : Visual Analysis & Ideation

Image
 17 /02/25 -  07/03/25 ( Week 3- Week 5) Kek Kai Wei, 0363513 Design Principles / Bachelor of Patisserie Arts ( Hons) Task 2: Visual Analysis & Ideation CONTENT 1. Instruction 2. Brief understanding of visual analysis. 3. Visual Analysis of  artwork " The Seine at Bougival in the Evening " 4. Ideation 5. Feedback Instruction Module Information 2. Recap Task 2 brief In this task, I have to assess and analyze the artwork i have selected in Task 1 based on Visual analysis lecture notes.  Propose three improvement ideas, each described in 30-50 words, and explain these three ideas based on design principles.  Brief understanding of visual analysis Visual analysis is a method of understanding design, primarily focusing on visual elements and design principles. In a strict sense, it is the description and explanation of visual structure. Its purpose is not only to understand the structure but also to identify the designer's choices and analyze how the design conve...
Read more