TYPOGRAPHY - TASK 2: TYPOGRAPHIC EXPLORATION AND COMMUNICATION

May 19,2025

19/5/2025 - 08/06/2025/Week5-Week7
ZHANG QIYU/0384019
Typography/Bachelor of Design in Creative Media/Taylor's University

Task 2: Typographic Exploration and Communication                                                                                

---

                                                         

                                                                                LECTURES

Week 5

Typo_5_Understanding

1.Letters

The two different stroke weights of the Baskerville stroke form , the fact that each bracket connecting the serif to the stem has a unique arc.

The width of the left slope is thinner than the right stroke. Both Baskerville  and Univers  are both internally harmonious and individually expressive.

                                        Fig.1.1. Baskerville  and Univers

The complexity of each individual letterform is neatly demonstrated by examining the lowercase 'a' of two seemingly similar sans-serif typefaces Helvetica and Univers. A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

                                          Fig.1.2 .Helvetica and Univers

2.Maintaining  x-height

The x-height generally describe the size of the lowercase letterforms. However, you should keep in mind that curved strokes, such as in "S",must rise above the median  in order to appear to be the same size as the vertical and  horizontal strokes they adjoin.

                                             Fig.1.3..Maintaining  x-height

3.Form / Counterform

• Just as important as recognizing specific letterforms is developing a sensitivity to the counterform (or counter)-the space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them
• The latter is particularly and important concept when working with letterforms like lowercase 'r' that have no counters per se. How well you handle the counters when you set type determines how well words hang together-in other words, how easily we can read what's been set.     

                                            Fig.1.4 Form and counterform

4.Contrast

The basic principles of Graphic Design apply directly to typography.The simple contrasts produces numerous variations: small+ organic/large+machined; small+ dark/ large light ...

                                                                                                  Fig. 1.6 Contrast

Week 6

Typo_6_Screen&Print

                                                                          Fig. 2.1 Screen&Print

Print Type  Vs Screen Type 

1. Type for Print and Screen

•  Type for Print 

elegant and intellectual / highly readable /diverse functions /easy to use

•  Type for Screen

This can include a taller X-height , wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs.

Improve character recognition and overall readability in the non-print environment, which can include the web, e-books, e-readers, and mobile devices.

2. Hyperactive Link/ hyperlink

• Hyperactive: Links a word, phrase, or image that you can click on to jump to a new document or a new section within the current document. 
• Hyperlinks ：Found in nearly all Web pages, allowing users to click their way from page to another, Text hyperlinks are normally blue and underlined by default.

3. Font Size for Screen

16-pixel text on a screen is about the same size as text printed in a book or magazine

• read books close -  about 10 points.
• read them at arm's length - at least 12 points

4. System Fonts for Screen / Web Safe Fonts

• System Fonts for Screen：Window - one group
                                        MacOS - ones pull from another
                                        Google - own system
• Web Safe Fonts ：Across all operating systems，they are the small collection of fonts that overlap from Windows to Mac to Google.

5. Pixel Differential Between Devices

The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too, because they have different sized pixels. 

                                                  Fig. 2.2 Differential Devices

 Static Vs Motion

• Static typography: minimal characteristic 

Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.We encounter all forms of static typography with wide ranging purposes. Whether they are informational promotional, formal or aspirational pieces of designs, the Level at impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.

• Motion Typography: "dramatize" type

For letterforms to become "fluid" and "Kinetic"Film title credits present typographic information over time, often bringing it to life through animation, Motion graphics, particularty he brand identities of film and television production companies , contain animated type.

Type is of en overlaid onto music videos and advertisements, often set in mation following the rhythm of a soundtrack. On screen typography has developed to become expressive, helping to establish the fone of associated content or express a set of brand Values.

                                                    Fig. 2.3  Static Vs Motion

                                                                  

---

                                                                             INSTRUCTIONS

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

Task 2: Typographic Exploration and Communication

1. Searching for ideas

I searched the internet for a lot of information on horizontal layout design to use as a reference. At first, I had no idea where to start.

                                                     Fig 3.1 Inspo 1

                                                      Fig 3.2 Inspo 2 

                                                    Fig 3.3 Inspo 3

2. Layout/Idea Exploration

 I tried to imitate and made three designs, but they were all too ordinary. Moreover, since the materials were different, the effects they produced were also different.

                                                    Fig.3.4  imagine1

                                                     Fig.3.5  imagine2

                                                     Fig.3.5  imagine3

3. Final Layout

Finally, I combined the two scenarios I envisioned, added a main title, divided it into three colors (black, white, and gray), making it clear and concise. Additionally, the title part was tilted.

Margins: 12.7 mm

Gutter: 5 mm

Head

Font : Univers Lt Std

Body

Font : Univers Lt Std  Bembo Std

Type size: 9 pt

Leading : 11 pt

Paragraph spacing : 11pt

Characters per line : 34

Alignment : Left-align

                                                           Fig. 3.6  Final Layout

                                                   Fig. 3.7  Final Layout with grid visible

                                                 Fig. 3.8  Final Layout(PDF)

                                          Fig. 3.9  Final Layout with grid visible(PDF)

---

                                                                      FEEDBACK

Week 6

General feedback: Overall, the layout work presents a visually appealing hierarchy with a style that aligns with the theme, effectively conveys information, and clearly demonstrates the overall coherence and creativity of the work.

Specific Feedback: I have encountered some issues with the text layout and page design, such as the font being somewhat chaotic and lacking uniformity, the line spacing of the main text being too tight, the white space being insufficient, and there is no breathing room at the page edges. The titles should also be strengthened.

---

                                                                   REFLECTION

1. Experience

During my practice, I also encountered many problems, such as too tight line spacing, no distinction between paragraphs, where the text jumps to the next line after reading just two lines, and punctuation marks like periods breaking off into the next line, with the period hanging alone at the beginning of the line.

2. Observations

I found out that I need more time in finding idea for headline and making it more better. It takes time and effort to tackle and create a good headline.In this project, I learned that in layout design, attention should be paid to the legibility of fonts, clear paragraph spacing, and the priority of left alignment for alignment; the overall design should be simple and unified; and after completion, a trial reading and verification are necessary.

3. Findings

I learn a lot using InDesign tools,make sure your design sends out the correct message. To do so, do more research on the subject and understand it better to find the best solution to deliver the message. 

---

                                                             FURTHER READING

1. Adjusting Spacing: The Invisible Art (Microscopic Beauty)

Fragment Content:

• The book presents an extremely simple exercise, asking readers to manually adjust the spacing between two specific letter combinations (such as "VA", "To", "Ly"). Kane emphasizes that excellent spacing adjustment is 'invisible'- when the spacing is just right, the visual tension between the letters reaches a balance, and readers will not notice the spacing itself, only feeling the smoothness and harmony.

Teaching Value:

• Developing 'Visual Sensitivity': It forces you to break out of the habit of 'reading the content', and instead focus on the form and flow of the negative space (white space). This is the key ability that distinguishes designers from ordinary people.
• Understanding the Subtleties of Font Design: The shape of each letter contains the designer's consideration of spatial relationships. Adjusting the spacing is a respect and continuation of the font design intention.
• 'The Devil is in the Details': The most basic skills (adjusting spacing) often best reflect professional standards. The refinement of a project is often determined by these micro-adjustments.

2.Grid System: The Foundation of Order (The Power of Structure)

Fragment Content: 

• Kane does not elevate the grid system to a complex formula. Instead, he explains it from the perspective of the basic physiological needs of reading. He clearly demonstrates that the core objective of the grid is to establish repetitive visual rhythms (such as uniform line spacing in the baseline grid), reducing the burden of eye movement and guiding the line of sight to move smoothly. Through the comparison of "gridless" and "grid-based" text blocks in the book, it is visually presented how the grid brings clarity, coherence, and professionalism.

Teaching Value:

• Overcoming Fear of Grids: The grid is not a restraint but a tool that serves the clear communication of information and visual comfort.
• Emphasizing Functionality: The primary task of the grid is to solve the "readability" and "easy readability" issues of reading, followed by aesthetic considerations.
• Establishing Design Logic: Understanding the grid is the foundation for understanding layout organization, hierarchical relationships, and visual balance. It is the starting point for all complex typesetting work. 

3. Font Selection and Pairing: Expressing Emotions and Identity (Macro Wisdom)

Fragment Content: Kane went beyond the simple "serif vs sans-serif" rule.

• Font Character: How to interpret the "personality" and "emotions" hidden within fonts by examining their historical origins (such as classical serif vs geometric sans-serif) and visual characteristics (such as a high x-height appearing friendly, a low x-height appearing elegant).
• Pairing Logic: Emphasizes the balance of contrast and harmony. Contrast (such as size, thickness, style) creates layers and interest; harmony (such as similar font cavity ratios, x-height, design era feel) ensures overall unity without being chaotic. Through numerous positive and negative examples, he demonstrates how poor pairings can convey chaos or a cheap feel.

Educational Value:

• Fonts as Language: Font selection is not decoration; it is part of information transmission**. It can reinforce the content or conflict with it.
• Rational Decision-Making: Provides a clear analytical framework to avoid mistakes made by choosing fonts based on "feel".
• Establishing "Font Thinking": Views fonts as "characters" with historical, cultural, and emotional attributes, rather than cold tools.