Advanced Typography / Task 1

24.04.2024 - 22.05.2024 (Week 1 - Week 5)

Tan Sin Mi (0368821)

Advanced Typography

Task 1

---

CONTENT

1. Instructions
2. Lectures
3. Exercises 1 - Typographic Systems
4. Exercises 2 - Type & Play
5. Feedback
6. Reflection
7. Further Reading

---

INSTRUCTIONS

 

---

LECTURES

Week 1: Lecture 1- Typographic Systems

Typographic systems have a set of rules that is unique and provides a sense of purpose that focuses and directs the decision making.

Shape grammar is a set of shape rules that apply in a step-by-step way to generate a set or language of designs.

1. Axial System

• All elements are organized to the left or right of a single axis.
  

  

  Figure 1.1 Axial system example

  

  Figure 1.2 Axial system example

2. Radial System

• All elements are extended from a point of focus.

  

  Figure 1.3 Radial system example

  

  Figure 1.4 Radial system example

3. Dilatational System

• All elements expend from a central point in a circular fashion.

  

  Figure 1.5 Dilatational system example

  

  Figure 1.6 Dilatational system example

4. Random System

• Elements appear to have no specific pattern or relationship.

Figure 1.7 Random system example

Figure 1.8 Random system example

5. Grid System

• A system of vertical and horizontal divisions.
  

  

  Figure 1.9 Grid system example
  

  

  Figure 1.10 Grid system example

6. Transitional System

• An informal system of layered banding.

  

  Figure 1.11 Transitional system example

  

  Figure 1.12 Transitional system example

7. Modular System

• A series of non-objective elements that are constructed in as a standardised units.

  

  Figure 1.13 Modular system example

  

  Figure 1.14 Modular system example

8. Bilateral System

• All text is arranged symmetrically on a single axis.

  

  Figure 1.15 Bilateral system example

  

  Figure 1.16 Bilateral system example
  
  

Week 2: Lecture 2- Typographic Composition

1. Principles of Design Composition

• Fundamental principles like emphasis, symmetry, and alignment guide the arrangement of design elements for visually appealing layouts.

2. The Rule of Thirds

• This photographic guideline divides a frame into thirds both horizontally and vertically, providing points of interest for balanced compositions.

3. Environmental Grid

• This design system extracts structural elements from the environment to organize design elements creatively, incorporating curved and straight lines for visual interest and context.

4. Form and Movement

•  Explores the concept of movement within design, treating page turning as a form of animation to create dynamic compositions that guide the viewer's eye.

Week 3: Lecture 3- Context & Creativity

Early mechanical letterforms were initially crafted to replicate the appearance of handwritten script, thus establishing a foundational template for the shape, arrangement, and conventions of subsequent typographic designs.

1. Cuneiform (c.3000 B.C.E)

• Earliest known writing system, evolving from pictograms and written from left to right.

2. Hieroglyphs (2613-2160 B.C.E.)

• Egyptian writing system combining pictorial and phonetic elements, serving as a precursor to alphabetic systems.

3. Development of Western Handwriting

        1) Early Greek (5th C. B.C.E.)

• Drawn freehand, without serifs.
• Over time, strokes thickened, apertures lessened, and serifs appeared.

        2) Roman Uncials

• By the 4th century, letters became more rounded for faster writing.

        3) English Half Uncials (8th C.)

• Evolved into a more slanted and condensed form in England.

        4) Carolingian Minuscule

• Introduced capitals at the start of sentences, spaces between words, and punctuation.
• Influenced Humanistic writing of the 15th century and became the basis of lower-case roman type.

        5) Black Letter (12-15 C. CE)

• Characterized by tight spacing and condensed lettering, dominated by evenly spaced verticals.
• Reduced material costs in book production.

        6) The Italian Renaissance

• Rediscovered and rationalized letterforms (Antica) through renaissance analysis applied to art and architecture.

4. Evolution of Middle Eastern Alphabets

• The Phoenician alphabet marked a significant turning point by using letters to represent sounds, influenced by Egyptian Hieroglyphics and Hieratic Scripts.

5. Evolution of the Chinese Script

• Developed from Oracle bone script to Seal Script, Clerical Script, and then to Traditional and Simplified scripts.

6. Writing Systems in the Indian Subcontinent

        1) Indus Valley Civilization (IVC) Script (3500-2000 BCE)

• The oldest undeciphered script, possibly logo-syllabic.

        2) Brahmi Script (450-350 BCE)

• The earliest post-Indus writing system in India, influencing all modern Indian scripts and many Southeast and East Asian scripts.

7. Handwriting in Malaysia

        1) Jawi Script

• An Arabic-based alphabet introduced along with Islam.
• Significant in modern Malaysia for literary works.
• Despite a lack of extensive pre-Jawi inscriptions, Jawi remains integral to Malay literature.

8. Programmers and Type Design

• Software giants like Google are producing more vernacular and "multi-script" typefaces (a term coined by Muthu Nedumaran) to support communication in various scripts, accommodating both vernacular and Latin scripts.

Week 4: Lecture 4- Designing Type

Why design another typeface?

• Type design carries a social responsibility so one must continue to improve its legibility.
• Type design is a form of artistic expression

1. Adrian Frutiger (Swiss graphic designer)

• Renowned Swiss graphic designer known for typeface design.
• Contributions: Advanced typography into digital era, created Univers and Frutiger typefaces.
• Frutiger Typeface: Designed in 1968 for Charles de Gaulle Airport.
• Purpose: Clean, legible typeface for signage visible at various distances and lighting conditions.
• Considerations: Tested letterforms for recognition in poor light and motion.
• Devanagari Font Design: Simplified sacred characters for modern typesetting in Varanasi, India.
• Recognition: Honored for respectful approach by religious dignitaries.
• Legacy: Inspires type designers globally, leaves lasting impact on typography.

2. Matthew Carter (British type designer)

• Son of Harry Carter, renowned British type designer.
• Training: Learned punchcutting under Paul Rädisch at Enschedé, worked at Crosfield and Mergenthaler Linotype.
• Font Creation: Developed fonts to address specific technical challenges, especially for early computers.
• Verdana (1996): Created for Microsoft, optimized for legibility on screens, particularly at small sizes.
• Purpose: Designed to maintain readability on screens due to internet and device popularity.
• Considerations: Influenced by pixel-based design, addresses issues like distinguishing similar characters.
• Bell Centennial: Commissioned by AT&T in 1976 for telephone directories, aimed to improve on existing font, Bell Gothic.

3. Edward Johnston 

• Creator of the influential London "Underground" typeface, later known as "Johnston Sans," in 1916.
• Purpose: Commissioned by London's Underground railway to design a typeface for posters and signage that embodied "bold simplicity" and modernity rooted in tradition.
• Design: Combined classical Roman proportions with humanist warmth, setting the tone for printed text for decades.
• Considerations/Limitations: Aimed to unify signage across different railway companies using the same rails and tunnels. Applied Roman capital letter proportions for historical grounding while maintaining elegance and simplicity.
• Influence: Johnston's typeface influenced the design of Eric Gill's Gill Sans, with Gill acknowledging Johnston's work as foundational to his own.

General Process of Type Design

1. Research

• Understand type history, anatomy, and conventions.
• Familiarize with terminologies like side-bearing, metrics, and hinting.
• Determine the type's purpose and intended applications.
• Examine existing fonts for inspiration, reference, and context.

2. Sketching

• Some designers use traditional tools (brushes/pens, ink, paper) and scan sketches for digitization.
• Others sketch digitally using tools like Wacom directly in font design software.
• Both methods have pros and cons based on control and workflow preferences.

3. Digitization

• Use professional software like FontLab or Glyphs App for digitization.
• Some designers initially create letterforms in Adobe Illustrator before importing into font design software, though purists may frown upon this.
• Attention to both overall form and counter form is crucial for readability.

4. Testing

• Testing is integral to the design process for refinement and correction.
• Prototyping and feedback are key components of testing.
• Readability and legibility are especially critical for text typefaces, while display typefaces prioritize expressive form.

5. Deployment

• Deployment marks the completion of the typeface, but revisions may still be necessary.
• Rigorous testing helps identify and mitigate any remaining issues post-deployment.

Typeface Construction

• Using grids (with circular forms) can make an easier construction of letterforms and is a possible method to build/create/design the letterform.

Construction and Considerations

• Classify alphabet characters into groups based on form and construction, distinguishing between capitals and lowercase letters.
• Various forms and constructions must be considered when designing a typeface.
• Visual corrections include adjusting curved forms beyond baseline and cap line and ensuring uniform white space between letters through 'fitting' the type.

 Context & Creativity

• Typeface creation often arises from intrinsic or extrinsic needs.
• Intrinsic motivation involves a designer's personal interest or identification of a gap/problem to solve.
• Extrinsic motivation includes commissioning or assignment tasks for designing a typeface.
• Successful design requires investment in the idea, understanding of requirements/limitations, and consideration of stakeholders.
• Typeface design is a laborious process driven by passion, as the rewards may not match the effort expended.

[back to top]

---

EXERCISES 1 - TYPOGRAPHIC SYSTEMS

In this exercise, we are required to create 8 square posters by following the 8 typographic systems (Axial, Radial, Dilatational, Random, Grid, Modular, Transitional and Bilateral). 

Required:

1. The exercise task is to be done using Adobe InDesign only. 
2. The artboard size must be 200 x 200 mm. 
3. Besides black color, only one other color can be used.
4. Graphical elements (line, dot, etc.) can be used but limitedly.

Process:

Figure 5.1 Sketches

Figure 5.2 Process

Layout:

Figure 5.3 Axial Layout

Figure 5.4 Radial Layout

Figure 5.5 Dilatational Layout

Figure 5.6 Random Layout

Figure 5.7 Grid Layout

Figure 5.8 Modular Layout

Figure 5.9 Transitional Layout

Figure 5.10 Bilateral Layout

Final Outcome:

1. Axial

Figure 5.11 Final Outcome-Axial

2. Radial

Figure 5.12 Final Outcome-Radial

3. Dilatational

Figure 5.13 Final Outcome-Dilatational

4. Random

Figure 5.14 Final Outcome-Random

5. Grid

Figure 5.15 Final Outcome-Grid

6. Modular

Figure 5.16 Final Outcome-Modular

7. Transitional

Figure 5.17 Final Outcome-Transitional

8. Bilateral

Figure 5.18 Final Outcome-Bilateral

Figure 5.19 Final Outcome.pdf

Figure 5.20 Final Outcome with grid.pdf

[back to top]

---

EXERCISES 2 - TYPE & PLAY

In this exercise, we are required to select an image of a man-made object or structures, or something from nature that does not contain to many different elements. We will need to analyze, dissect and identify potential letterforms from the image we selected. 

Image Searching:

I search for image related to nature from Microsoft Edge, and I saw some butterfly pictures, the patterns of the butterfly's wings have attracted me. Therefore, I decided to use butterfly image to proceed my work.

Figure 6.1 Image 1

Figure 6.2 Image 2

Figure 6.3 Image 3

Image Selected:

Figure 6.4 Image selected

Extracted Letterforms from Image Selected:

First, I use the pen tool in Adobe Illustrator to trace out the letterforms that I can found from the butterfly's wings. From this image, I have formed 5 letterforms which is W, Y, A, M, and V.

I copy down the letterforms I trace out and started to explore and ultimately digitized it. I have adjusted the angle and stroke of the extracted letterforms. And before I proceed the final letterforms, I use the font Comic Sans MS Bold as my reference font to finalize my letterforms.

Figure 6.5 Extracted Letterforms Process

Final Letterforms Outcome:

Figure 6.6 Final Letterforms Outcome

Figure 6.7 Final Letterforms Outcome.pdf

Poster:

For poster, I search for image related to butterfly from Microsoft Edge, and I have found some butterfly images. For the first version, I chose some edited butterflies images with special effects and color styles. But after I get feedback from Mr. Vinod, Mr. Vinod told me that I should not use this kind images. He suggested me to change the image I used before to some image that capture butterfly's wings clearly since my letterforms are trace out from butterfly's wings.

Failure Version:

Figure 7.1 Poster Failure Version

Then, I searched for images again and listened to the teacher's advice. The images I searched this time were all realistic images, and they all highlighted the wing patterns.

Figure 7.2 Reselected images

Then I start to redo my poster again.

Figure 7.3 Poster Process 1

Figure 7.4 Poster Process 2

Final Poster Outcome:

Figure 7.5 Final Poster Outcome

Figure 7.6 Final Poster Outcome.pdf

[back to top]

---

FEEDBACK

Week 1:

Module Briefing. Watch the lectures video and setup a Eportfolio for task 1. Start to work on exercise 1.

Week 2:

Public holiday. Online consultation.

Week 3:

Learn the eight typographic systems from the lectures that given by Mr. Vinod and begin exercise 1 using InDesign.

Week 4:

The extracted letterforms look good, Mr. Vinod more like the second & third extracted letterforms, but it's okay with the final letterform too.

Week 5:

Change the image that I use for poster. Mr. Vinod say that I should use some image that capture butterfly's wings clearly since my letterforms are trace out from butterfly's wings.

[back to top]

---

REFLECTION

Experience:

I gained a lot from these exercises. Although it's quite difficult to learn various typographic systems in a short period of time, it also gave me a deeper understanding and mastery of typography. The second exercise is to find shapes similar to letters from images to create fonts. I think this exercise is very interesting and allows me to calm down and observe things that I wouldn't normally observe.

Observation:

I have observed the importance of balance when designing typography. Using grids and guides can help us better distribute the entire typography, so that the images will not appear disharmonious. The second exercise made me observe that in addition to adding my own ideas when making a coherent design, I also need to be guided by the original concept.

Findings:

From these exercises, I discovered that art actually comes from life, and every corner of our lives is filled with many artistic elements. This exercise deepened my understanding of typography and made me understand the importance of font design for typography.

[back to top]

---

FURTHER READING

Figure 8.1 "The Vignelli Canon" by Massimo Vignelli

We are required to do further reading for Advanced Typography. I chose to do further reading for this book, "The Vignelli Canon" written by Massimo Vignelli.

This book is nice for young designers who was lack of basic typographic. Massimo Vignelli have shared his professional knowledge that might be useful in this book.

In this book, Massimo Vignelli presents his concepts and methods of design in two parts: The Intangibles and The Tangibles.

PART 1: THE INTANGIBLES

Semantics
Massimo Vignelli stresses that semantics in design involve creating something with a clear and meaningful purpose that communicates effectively to both the sender and the receiver.

• Semantics is the search of the meaning of whatever we have to design.
• An essential part of the designer’s being, a crucial component of the natural process of design, and the obvious point of departure for designing.
• Semantics indicate the most appropriate form for that particular subject that we can interpret or transform according to our intentions.

Syntactics
Massimo Vignelli emphasizes the significance of syntactics as a fundamental aspect of design that contributes to the overall effectiveness of visual communication.

• The discipline that controls the proper use of grammar in the construction of phrases and the articulation of a language, Design.
• The syntax of design is provided by many components in the nature of the project.
• Grids are one of the several tools helping designers to achieve syntactical consistency in graphic design.

Pragmatics
Massimo Vignelli's perspective on pragmatics underscores the importance of designing with a deep understanding of how the design will be used and how it can improve the user's experience.

• The final look of anything is the by-product of the clarity (or lack of it) during its design phase.
• It is important to understand the starting point and all assumptions of any project to fully comprehend the final result and measure its efficiency Clarity of intent will translate into clarity of result and that is of paramount importance in Design. 

Discipline
Massimo Vignelli's message is that discipline in design is the key to producing work that transcends trends and stands the test of time, resulting in designs that are both beautiful and functional.

• Vignelli's message is that discipline in design is the key to producing work that transcends trends and stands the test of time, resulting in designs that are both beautiful and functional. The attention to details requires discipline.
• Every detail is important because the end result is the sum of all the details involved in the creative process no matter what we are doing.

[back to top]