Typography - Task 2: Typographic Exploration and Communication

26.05.2025 - 09.06.2025(Week 6 - Week 7)
Lee Xiang Ling / 0384095 
Typography / Bachelor of Design (Honours) in Creative Media / Taylors University
Task 2 / Typographic Exploration and Communication

LIST / JUMPLINK


LECTURES

Week 5  

Typo_5_Understanding

1. Letters / Understanding letterforms

Fig 5.1 - Differents of Capital Letter 'A'_JPG, Week 05 (23/5/2025)

This capital letter looks symmetrical, but it is not, because the Baskerville font has two different weights in its stroke forms. Each bracket that connects the serif to the stem has its own unique radius of curvature.

Most capital letters may look symmetrical, but a closer look reveals that the diagonal stroke on the left is thinner than the stroke on the right. Both Baskerville and Univers show the careful attention the type designers paid to ensuring internal harmony while also ensuring that each letter has a unique expression.

Fig 5.2 - Helvetica vs Univers_JPG, Week 05 (23/5/2025)

The complexity of typeface structure can be seen by comparing the lowercase “a” in two seemingly similar sans-serif typefaces, Helvetica and Univers. The difference between the two font styles lies in the way the stroke ends and the connection between the bowl and the stem.


2. Letters / Maintaining x-height
The x-height usually indicates the height of lowercase letters. But a curved stroke like the “s” needs to extend slightly above the median (or below the baseline) to appear visually consistent with adjacent straight and horizontal strokes.

Fig 5.3 - Median & Baseline_JPG, Week 05 (23/5/2025)


3. Letters / Form / Counterform
In addition to recognizing specific letterforms, it is also important to pay attention to the space between letters, that is, cultivate "counterform". For example, the lowercase letter "r" has no enclosed space. When typesetting, how well you manage "counterform" will affect the flow and readability of the words.

Fig 5.4 - Example of font and counterform_JPG, Week 05 (23/5/2025)

The best way to understand the relationship between letterforms and counterspace is to observe the letters in detail. This helps you grasp the balance between them, feel the unique form of the font, and further understand the process of font design and word creation.

Fig 5.5 - Observe the characteristics of fonts_JPG, Week 05 (23/5/2025)

The letter "S" can still maintain its overall recognition after being enlarged, but the letter "g" is easy to lose its overall characteristics after being enlarged due to its complex components.


4. Letters / Contrast
The basic principles of graphic design also apply to font design. Among them, contrast is one of the most expressive techniques, which not only brings rhythm, hierarchy and visual tension to the layout, but also enhances the expression of information.

Fig. 5.6 - Example of Contrast_JPG, Week 05 (23/5/2025)


INSTRUCTIONS


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

EXERCISES

Soon we arrived at our Task 2. The task of this issue will continue the knowledge learned in Task 1 and design the layout of the article. Among the three candidate articles, I chose "Design Change: How Designers Shape the World We Live In" as the layout object.

Fig. 1 - My Sketches of Text Formatting Headline_JPG, Week 05 (23/5/2025)

I selected several sketches with well-executed layouts and clear, distinct titles for my design work.
( I later discovered that I had written the title wrong on my sketches -- lost the "-ing". )
 
Fig. 2 - Text Formatting sample layout that I tried_JPG, Week 05 (23/5/2025)

After observing other students' works and listening to Mr Vinod's comments, I realized that I was too limited in my ideas about typography. So I collected some layout and design references from the Internet and bookshop.

Fig. 3 - My Research_JPG, Week 06 (29/5/2025)

I reworked my assignment based on the sample made by Mr.Vinod and my search results.

Fig. 4 & 5 - Reworked 1_JPG, Week 06 (29/5/2025)

Fig. 6 & 7 - Reworked 2_JPG, Week 06 (29/5/2025)

After Mr Vinod reminded me, I realized that I had misspelled "CHANGE" and corrected it. Then, I had a hard time choosing the final submission. After consulting with friends around me and considering all options, I finally choose this assignment with a better overall reading effect as the final submission.


MY FINAL ASSIGNMENT

#DESIGN 1
This design is easier to read, but the design is somewhat lacking.

Fig. 8 & 9 - Design 1_JPG, Week 07 (2/6/2025)

DESIGN 1_PDF, Week 07 (2/6/2025)
<iframe src="https://drive.google.com/file/d/1usS1LUyG0R2XF3vocLjZhM6FHlyVhsFB/preview" width="640" height="480" allow="autoplay"></iframe> 

HEAD LINE
Typeface: Futura Std (DESIGNING/CHANGE) / ITC Garamond Std (HOW...IN)
Font/s: Bold Condensed (DESIGNING), Book (CHANGE:) / Light Italic (HOW...IN)
Type Size/s: 224pt (DESIGNING) / 35pt (CHANGE:) / 36pt (HOW...IN)
Leading: - / - / 36pt (HOW...IN)
Paragraph spacing: -

BODY
Typeface: Adobe Calson Pro  (Text) / Bembo Std (Subheading)
Font/s: Regular (Text) / Italic (Subheading)
Type Size/s: 11pt (Text) / 10pt (Subheading)
Leading: 14pt
Paragraph spacing: 14pt
Characters per-line: 57
Alignment: Justify with last line aligned left
Margins: 10 mm top + bottom + left + right
Columns: 2
Gutter: 5 mm


#DESIGN 2
The design of this design is good, but because the articles are located on the left and right sides, it lacks readability.

Fig. 10 & 11 - Design 2_JPG, Week 07 (2/6/2025)


DESIGN 2_PDF, Week 07 (2/6/2025)
<iframe src="https://drive.google.com/file/d/1S1CBZOPeAnF0Tp2Jjv-mFA07qv-BDID2/preview" width="640" height="480" allow="autoplay"></iframe> 

HEAD LINE
Typeface: Futura Std (DESIGNING/CHANGE) / ITC Garamond Std (HOW...IN)
Font/s: Bold Condensed (DESIGNING), Heavy (CHANGE:) / Light Italic (HOW...IN)
Type Size/s: 200pt (DESIGN) + 133pt (ING) / 109pt (CHANGE:) / 36pt (HOW...IN)
Leading: - / - / 36pt (HOW...IN)
Paragraph spacing: -

BODY
Typeface: Adobe Calson Pro  (Text) / Bembo Std (Subheading)
Font/s: Regular (Text) / Italic (Subheading)
Type Size/s: 11pt (Text) / 12pt (Subheading)
Leading: 14pt
Paragraph spacing: 14pt
Characters per-line: 57
Alignment: Justify with last line aligned left
Margins: 10 mm top + bottom + left + right
Columns: 2
Gutter: 5 mm

FEEDBACKS

Week 6
General Feedback:The focus of this class is to provide feedback for students' Task 2 - Text Formatting. Common problems for most students include: the title is disconnected from the text, the layout lacks visual focus, too many graphic elements are used, and the overall layout is not coordinated. Through the freeback aims to help students strengthen their ability to integrate text and layout, and improve the overall design's orderliness and visual guidance.
Specific Feedback: Most designs performed well overall, but avoid using color to split the headline, so as to avoid making the title look like it has two different meanings. In addition, it is recommended to strengthen the visual concentration of the layout design, ensure that the layout has a clear visual focus, and improve the efficiency and beauty of information transmission.

Week 7
General Feedback: This week, Mr Vinod continued to give us feedback on the task 2. We should ensure the smooth flow of information in their layout choices to avoid overcrowding and uncoordinated designs. In addition, appropriate white space should be maintained to enhance the overall visual effect.
Specific Feedback: The design and layout are good, and dynamic effects make it look active. However, the spelling of "CHANGE" is wrong and needs to be revised.


REFLECTIONS

Experience
Through this assignment, I deeply understand the importance of article layout. A good layout needs to have good reading fluency and visual focus. We need to try to avoid too many graphic elements, inconsistent layout, and disconnection between the title and the text. In the process of completing this assignment, I have been constantly trying my own ideas and constantly improving my understanding of layout, which will become an indispensable experience for me in the future.  

Observation
When thinking about how to readjust my assignment, I found that it was very challenging to maintain the sense of design while ensuring reading fluency. This requires not only careful control of typography and visual hierarchy, but also a balance between beauty and practicality. In order to avoid visual imbalance, we need to pay attention to the coordination of the layout at all times, and the placement of each element needs to be carefully considered to achieve an easy-to-read and beautiful effect.
 
Findings
I found that we should try to avoid placing the title in the middle of the layout. To be honest, when I was re-adjusting my work, I once tried to make a layout with the title in the middle. But it was very difficult. No matter how I adjusted it, I felt that something was missing. Although its visual effect was indeed very focused, it greatly affected the overall reading fluency. So it is not easy to make a good layout. It requires constant thinking and thinking to make a good layout.


FURTHER READINGS

Continuing from where I left off last time: ‘THE VIGNELLI CANON’ by Massimo Vignelli

Discipline
We must be disciplined when it comes to details. There is no room for carelessness or complacency in typographic design—every detail impacts the final result. Discipline is a rule of self-restraint and an attitude of self-expectation. It can be said that without discipline, there is no good design. Regardless of the design style, a lack of discipline is an act of irresponsibility.

Appropriateness
Appropriateness refers to the specific solution path corresponding to a specific problem. It helps us avoid heading in the wrong direction and prevents wasted effort. Appropriateness guides us in choosing the right medium, the right materials, the right scale, the right form of expression, color, and texture—ultimately creating a sense of resonance for the client. There may be many ways to solve a problem, but regardless of the method, the outcome must be appropriate. This is one of the most fundamental principles in design standards.

Fig. 1 - Example of Appropriateness_JPG, Week 07 (1/6/2025)

Ambiguity
Ambiguity carries multiple meanings, or rather, it is the ability to endow an object or a design with various possible interpretations. These interpretations can complement one another, enriching the deeper meaning of the subject. It is often used to enhance the expressive power of a design. However, one must exercise caution when employing ambiguity—if not handled with care, it may lead to counterproductive results.

Design Is One
Only by mastering the fundamental methods and principles of design can one be truly equipped to take on any design challenge. "Design is one – it is not many different ones." The core principles of design are consistent and can be applied across a wide range of fields, regardless of style.

Design is often misunderstood as a particular aesthetic or trend, but in truth, it is more akin to a discipline—a creative process governed by its own set of rules. These rules ensure clarity, consistency, and purpose, allowing design to serve its function in the most effective and expressive way.

Visual Power
The author believes that excellent design is a manifestation of creativity, possessing visual power, capable of clearly conveying ideas, and expressed through refined form and color. There are countless ways to achieve this:
  • Contrast in scale can create a strong visual impact.
  • The contrast between bold and light typefaces generates tension and visual dynamism.
  • Different materials interacting with light can produce endlessly varied and expressive effects.
Visual power is a rational and elegant expression, and it is a vital subject in achieving effective design.

Fig. 2 - Example of Visual Power_JPG, Week 07 (1/6/2025)

A great design is inseparable from clear values and principles. It’s not just about looking good — it’s about doing it right. It emphasizes discipline and logic, respects content and function, values appropriateness and expression, while embracing creativity and ambiguity. 

As mentioned in the book, “Design is one – it is not many different ones.”

Comments

Popular posts from this blog

Typography - Task 1: Exercises

Typography - Task 3: Type Design and Communication