Advanced Typography - Task 1: Exercises 1 & 2 - Typographic Systems and Type & Play

⭐ 22/4/2024 - 20/5/2024 (Week 1 - Week 4)

🎀 Yan Zhi Xuan | 0369425 

💜 Advanced Typography  | Bachelor of Design (Hons) in Creative Media | Taylor's University

📚 Task 1: Exercises 1 & 2 - Typographic Systems and Type & Play

---

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Task 1: Exercise 1 - Typographic Systems

4. Task 1: Exercise 2 - Type & Play                      

5. Feedback

6. Reflections

7. Further Reading

8. Reference List & Bibliography

---

1. LECTURES

WEEK 1 (22/4/2024) - LECTURE 1

Advanced Typography: Typographic Systems

Student designers often initially find the grid system awkward, but understanding its organization process allows them to realize its creative potential in terms of permutations and combined uses. Typographic systems allow designers to break free from rigid grid systems and use more fluid means to create typographic messages. 

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

• Axial System: All elements are organised to the left or right of a single axis.

• Radial System: All elements are extended from a point of focus.

• Dilatational System: All elements expand from a central point in a circular fashion.

• Random System: Elements appear to have no specific pattern or relationship. 

• Grid System: A system of vertical and horizontal divisions.

• Transitional System: An informal system of layered banding. 

• Modular System: A series of non-objective elements that are constructed as a standardised unit. 

• Bilateral System: All text is arranged symmetrically on a single axis.

Fig. 1.1 Typographic Systems.

WEEK 2 (29/4/2024) - LECTURE 2

Advanced Typography: Typographic Composition

1. Principles of Design Composition: Emphasis, isolation, repetition, balance (symmetry/asymmetry), alignment, perspective, rhythm, contrast.

2. The Rule of Thirds: A composition guide for photographers. The points of interest are positioned inside the allotted space using the intersecting lines as a guide.

3. Environmental Grid: Based on an investigation of an existing structure or a combination of multiple structures.

4. Form and Movement: Based on the exploration of an existing Grid System. There is movement when a form is positioned over many pages. The forms could be text, colour, or graphics. 

Fig. 1.2 Typographic Systems.

WEEK 3 (6/5/2024) - LECTURE 3

Advanced Typography: Context and Creativity

The first mechanically produced letterforms were designed to directly imitate handwriting. The base or standard for form, spacing, and traditions that mechanical type would attempt to imitate would be handwriting.

Cuneiform c. 3000 B.C.E.: The earliest system of actual writing, written from left to right and evolved from pictograms.

Hieroglyphs: The writing system ancient Egyptians used for inscriptions mostly on walls of temples and tombs, as well as statues, coffins, and sarcophagi.

• Ideograms represent things they depict.

• As determinatives to indicate general word ideas.

• As phonograms to represent sounds that spell out individual words.

Letterforms through the Ages

1. Early Greek (5th C. B.C.E.): Drawn freehand, not constructed with compasses and rules, and they had no serifs. In time the strokes of these letters grew thicker, the aperture lessened, and serifs appeared.

2. Roman Uncials: By the 4th century Roman letters were becoming more rounded, the curved form allowed for fewer strokes and could be written faster. 

3. English Half Uncials (8th C.): In England, the uncial evolved into a more slanted and condensed form. 

4. Carolingian Minuscule: Capitals at the start of a sentence, spaces between words and punctuation. It was this style that became the pattern for the Humanistic writing of the fifteenth century; this latter, in turn, was the basis of our lower-case Roman type. 

5. Black Letter (12-15 C. CE): Characterised by tight spacing and condensed lettering. Evenly spaced verticals dominated the letterform. Condensing line spacing and letter spacing reduced the amount of costly materials in book production. 

6. The Italian Renaissance: Newly rediscovered letterforms Antica. The Renaissance analysis of form that was being applied to art and architecture was directed toward letterforms — resulting in a more perfect or rationalised letter.

‘Indian’ subcontinent the Indus Valley Civilization (IVC) script (3500-2000 BCE): The oldest writing was found, is as yet undeciphered and seems to have been somewhat logo-syllabic in nature.

Brahmi script (450–350 BCE): The earliest writing system developed in India after the Indus script. It is one of the most influential writing systems; all modern Indian scripts and several hundred scripts found in Southeast and East Asia are derived from Brahmi.

Fig. 1.3 Different Typographic Systems, Letterforms and Scripts.

WEEK 4 (13/5/2024) - LECTURE 4 

Advanced Typography: Designing Type

Type Design Process 

1. Research: Gain knowledge of type history, anatomy, conventions, and terminologies, determine type purpose and applications, and study existing fonts for inspiration, ideas, reference, context, and usage pattern.

2. Sketching: Traditional/ digital.

3. Digitisation Professional Software: FontLab and Glyphs App. Some designers also use Adobe Illustrator then only the specialised font apps. This however is frowned upon by the purist. 

4. Testing: Testing and prototyping are crucial in refining and correcting typefaces, with readability and legibility being important depending on the typeface category (display type/text type), but less so for display types.

5. Deploy: Despite deploying a completed typeface, teething issues may arise post-deployment, necessitating ongoing revision and rigorous testing to minimize these issues.

Typeface Construction

• Construction grid for Roman capitals (8 x 8 cells): One possible way to build, produce, or design your letterform is to use grids (with circular forms) to make the process easier.

Construction and Considerations

When designing a new type, consider different forms and constructions, including visual corrections like overshoot and vertical alignment between curved and straight forms.

• Fitting the type: The text requires a visual correction for letter distance and uniform white space, ensuring the same appearance between the letters.

• Ink Traps: commonly utilized for fast, fast, and less precise printing on cheap absorbent paper, as they allowed excess ink to remain visible at the corners.

Fig. 1.4 Designing Type: Typeface Construction, Construction and Considerations.

WEEK 5 (20/5/2024) - LECTURE 5

Advanced Typography: Perception and Organisation

Form: The typographic composition's overall appearance and feel represent concepts in a visually balanced manner, ensuring harmony in function and expression.

A typeface's form is transformed from a letter to a form due to manipulations such as distortion, texture, enlargement, and extrusion into a space.

Fig. 1.5 Contrast.

Fig. 1.6 Gestalt theory for organisation.

Return to the Table of Contents

---

2. INSTRUCTIONS

Doc. 2.1 Module Information Booklet of Advanced Typography.

Task 1: Exercise 1 - Typographic Systems

• Explore 8 systems (Axial, Radial, Dilatational, Random, Grid, Modular, Transitional and Bilateral) in InDesign.

• Size: 200 x 200 mm 

• Colours: Black and additional colour 

• Minor graphical elements

Task 1: Exercise 2 - Type & Play

• Examine and identify possible letterforms in a selected photograph of an object (natural/ artificial).

• Uppercase or Lowercase only 

• Choose a reference typeface from the 10 typefaces

Return to the Table of Contents

---

3. TASK 1: EXERCISE 1 - TYPOGRAPHIC SYSTEMS

Work Progress in InDesign

I started creating the margins and columns according to different typographic systems. After that, I preferred to experiment immediately in InDesign with the different layouts. It was easy for me to make variations in compositions so I didn't do any layout sketches.

Fig. 3.1 Axial System - Work Progress, Week 1 (22/4/2024).

Margins: 10 mm, 10 mm, 10 mm, 10 mm

Columns:  2, 5 mm

Guides: (Row) 3, 5 mm

Fig. 3.2 Radial System - Work Progress, Week 1 (22/4/2024).

Margins: 10 mm, 10 mm, 10 mm, 10 mm

Columns:  1, 5 mm

Guides: (Row) 3, 0 mm; (Column) 3, 0 mm

Fig. 3.3 Dilatational System - Work Progress, Week 1 (22/4/2024).

Margins: 10 mm, 10 mm, 10 mm, 10 mm

Columns:  1, 5 mm

Guides: (Row) 3, 5 mm

Fig. 3.4 Random System - Work Progress, Week 1 (22/4/2024).

Margins: 10 mm, 10 mm, 10 mm, 10 mm

Columns:  3, 5 mm

Fig. 3.5 Grid System - Work Progress, Week 1 (22/4/2024).

Margins: 10 mm, 10 mm, 10 mm, 10 mm

Columns:  1, 5 mm

Guides: (Row) 3, 0 mm; (Column) 3, 0 mm

Fig. 3.6 Modular System - Work Progress, Week 1 (22/4/2024).

Margins: 10 mm, 10 mm, 10 mm, 10 mm

Columns:  4, 5 mm

Guides: (Row) 6, 5 mm

Fig. 3.7 Transitional System - Work Progress, Week 1 (22/4/2024).

Margins: 10 mm, 10 mm, 10 mm, 10 mm

Columns:  1, 5 mm

Fig. 3.8 Bilateral System - Work Progress, Week 1 (22/4/2024).

Margins: 10 mm, 10 mm, 10 mm, 10 mm

Columns:  1, 0 mm

First Attempt

These are my first attempts at 8 typographic system layouts. I think there was still room for improvement.

Fig. 3.9 First Attempt Outcome, Week 1 (22/4/2024).

Further Refinement

Fig. 3.10 Axial System - Further Refinement, Week 2 (29/4/2024).

Fonts used: 

Heading:  Futura Std (Roman, Bold)

Subheading: Futura Std (Roman, Bold)

Body: Futura Std (Roman, Bold)

Fig. 3.11 Radial System - Further Refinement, Week 2 (29/4/2024).

Fonts used: 

Heading:  ITC New Baskerville Std (Roman, Bold)

Subheading: ITC New Baskerville Std (Roman)

Body: ITC New Baskerville Std (Roman, Bold)

Fig. 3.12 Dilatational System - Further Refinement, Week 2 (29/4/2024).

Fonts used: 

Heading:  ITC New Baskerville Std (Roman)

Subheading: ITC New Baskerville Std (Roman)

Body: ITC New Baskerville Std (Roman)

Fig. 3.13 Random System - Further Refinement, Week 2 (29/4/2024).

Fonts used: 

Heading: Futura Std  (Book). Bodoni Std (Poster Compressed), Janson Text LT Std (76 Bold Italic)

Subheading: Futura Std (Book), ITC New Baskerville Std (Roman)

Body: Futura Std (Book, Light Oblique)

Fig. 3.14 Grid System - Further Refinement, Week 2 (29/4/2024).

Fonts used: 

Heading: Futura Std  (Book)

Subheading: Futura Std (Book)

Body: Futura Std (Book)

Fig. 3.15 Modular System - Further Refinement, Week 2 (29/4/2024).

Fonts used: 

Heading: Futura Std  (Book)

Subheading: Futura Std (Book)

Body: Futura Std (Book, Light Oblique)

Fig. 3.16 Transitional System - Further Refinement, Week 2 (29/4/2024).

Fonts used: 

Heading: Futura Std  (Book)

Subheading: Futura Std (Book)

Body: Futura Std (Book, Light Oblique)

Fig. 3.17 Bilateral System - Further Refinement, Week 2 (29/4/2024).

Fonts used: 

Heading: Janson Text LT Std (56 Italic)

Subheading: Futura Std (Book)

Body: Futura Std (Book)

Final Outcome (Exercise 1)

Fig. 3.18 Axial System - Final Outcome (JPEG), Week 2 (29/4/2024).

Fig. 3.19 Radial System - Final Outcome (JPEG), Week 2 (22/4/2024).

Fig. 3.20 Dilatational System - Final Outcome (JPEG), Week 2 (29/4/2024).

Fig. 3.21 Random System - Final Outcome (JPEG), Week 2 (29/4/2024).

Fig. 3.22 Grid System - Final Outcome (JPEG), Week 2 (29/4/2024).

Fig. 3.23  Modular System - Final Outcome (JPEG), Week 2 (29/4/2024).

Fig. 3.24  Transitional System- Final Outcome (JPEG), Week 2 (29/4/2024).

Fig. 3.25  Bilateral System - Final Outcome (JPEG), Week 2 (29/4/2024).

Doc 3.1 Final Task 1 - Exercise 1: Typographic Systems (PDF), Week 2 (29/4/2024).

Doc 3.2 Final Task 1 - Exercise 1: Typographic Systems Grids and Guides (PDF), Week 2 (29/4/2024).

Return to the Table of Contents

---

4. TASK 1: EXERCISE 2 - TYPE & PLAY

EXERCISE 2 - PART 1: FINDING TYPE

Chosen Object & Letterform Extraction

Fig. 4.1 Chosen Object: Crumpled Paper, Week 2 (29/4/2024).

The chosen object is a crumpled paper that I found on Pinterest. I analysed the folds of the paper to create a variety of letterforms. They have the potential to become type designs. The variety of folds in paper offers endless possibilities for exploring different letterforms, from sharp creases to gentle curves.

Fig. 4.2 Letterform Extraction, Week 2 (29/4/2024).

Paper folds create organic shapes, adding character and personality to type designs. They also introduce texture and depth, adding visual interest. Experiment with shading and shadowing techniques to emphasize the three-dimensional qualities. The letters that I found were E, L, O, R, T and V.

Fig. 4.3 Traced Letters: E, L, O, R, T and V, Week 2 (29/4/2024).

I used Pen Tool in Adobe Illustrator to trace the letterforms. I paid attention to details such as line thickness. 

Fig. 4.4 Traced Letters: E, L, O, R, T and V, Week 2 (29/4/2024).

From observation, the letters do not have the same thickness or weight of strokes or patterns. During the digitization process, I need to focus on the consistent thickness of the strokes and the overall visual balance.

Reference & Sketches

Fig. 4.5 Traced Letters with Reference: Bembo Std, Week 2 (29/4/2024).

The reference is used to help with the construction/refinement of our typeface. From the 10 typefaces, I chose Bembo Std because it has a roughly similar "E" and my typeface would be a serif.

Fig. 4.6 Sketches, Week 2 (29/4/2024).

I tried my best to combine the characteristics of Bembo Std and the characteristics of my traced letterforms.

Digitalisation & Testing

Fig. 4.7 First Attempt Digitalisation, Week 2 (29/4/2024).

Further Refinement

Fig. 4.8 Overview, Week 2 (29/4/2024).

Fig. 4.9 Variations, Week 2 (29/4/2024).

Fig. 4.10 Original Extraction and Final Letterforms on Baseline, Week 2 (29/4/2024).

Final Outcome (Exercise 2 - Part 1: Finding Type)

Fig. 4.11 Final Type Design (JPEG), Week 2 (29/4/2024).

Doc. 4.1 Final Finding Type (PDF), Week 2 (29/4/2024).

EXERCISE 2 - PART 1: TYPE & IMAGE

First Attempt

I tried to added

Fig. 4.12 First Attempt - Poster Design #1, Week 2 (29/4/2024).

Fig. 4.13 First Attempt - Poster Design #2, Week 2 (29/4/2024).

Fig. 4.14 First Attempt - Poster Design #3, Week 2 (29/4/2024).

Further Refinement

Creating an effective movie poster by balancing the size of elements like logos with the overall theme and maintaining the poster's visual impact and coherence. Colours and fonts play a significant role in readability and conveying the intended mood or tone of the film. A good composition ensures that the viewer's attention is directed to key elements without feeling overwhelmed.

Fig. 4.15 Reducing the gap between the letters, Week 3 (6/5/2024).

I adjusted the colour contrast to make the text stand out without overpowering the design. I also adjusted the gap between letters. I also experimented with font size, weight, and subtle text effects to achieve balance and harmony with the background.

Fig. 4.16 Adding effect to the heading, Week 3 (6/5/2024).

To improve text integration with background posters, I chose a crumpled paper texture image to be applied to the type design that complements the theme.

Final Outcome (Exercise 2 - Part 2: Type & Image)

Fig. 4.17  Final Poster Design (JPEG), Week 3 (6/5/2024).

Fig. 4.18 Final Type & Image - Movie Poster Design  (JPEG), Week 3 (6/5/2024). 

Doc. 4.2 Final Type & Image - Movie Poster Design (PDF), Week 3 (6/5/2024). 

Return to the Table of Contents

---

5. FEEDBACK

WEEK 1 (22/4/2023)

General Feedback: The blog should be organised well, and the provided link must be linked to the Advanced Typography page. 

WEEK 2 (29/4/2023)

General Feedback:  We need to update our work progress on weekly basis so we can submit our tasks on time. We need to be responsible and finish the tasks before the class starts. For the designs, we need to ensure the most important information stands out first, then only add the extra graphics to avoid distracting the audience. For a good informative layout, we need to make sure viewers focus on looking at the important information. 

Specific Feedback:  The radial system design is fine. The dilatational system design is nice and interesting. The random system design is not a random composition. I need to do it again. The grid system design is fine. The modular system design is not a modular composition. I need to watch the lecture video again. The transitional system design is the best one in this class. The bilateral system design has been constructed in two lines. I need to rearrange the text on one line.

WEEK 3 (6/5/2024)

General Feedback: There are areas where further attention could enhance the overall clarity and coherence of the design. We have introduced consistency in height, width, and contrast, there's room to refine the shapes to improve legibility. Additionally, maintaining consistency in stroke weight and spacing will contribute to a more polished look.

Specific Feedback:  I need to ensure that in every phase, the letterforms have a consistent characteristic, weight, and proportion. Consider simplifying complex strokes or curves to ensure that each letter is easily recognizable at various sizes. My efforts are commendable, and with continued refinement, the letterforms will achieve the desired impact.

WEEK 4 (6/5/2024)

General Feedback: A logo that is too large will conflict with the theme, and the poster will lose focus. It is also necessary to choose the right colours and fonts to ensure the readability of the poster and to pay attention to the design of the poster. Optical measurement is necessary to make the poster have a good composition. 

Specific Feedback:  I need to improve the integration of text with the background poster. To improve text integration with background posters, choose a good texture image that can be applied to the type design that complements the theme, adjust colour contrast, and position text strategically. Experiment with font size, weight, and subtle effects, and use optical alignment techniques for optimal design refinement.

Return to the Table of Contents

---

6. REFLECTIONS

EXPERIENCE

Both exercises provided valuable hands-on experience in exploring different aspects of typography and design. Through practical experimentation in InDesign and visual analysis of photographs, I gained a deeper understanding of typographic systems and the relationship between visual forms and letterforms.

I learned the 8 typographic systems to create interesting compositions in Exercise 1. By using InDesign, I can learn to design insights with different typographic systems. The axial system revolves around a central axis, creating balance and symmetry. The radial system arranges text elements in a circular pattern, conveying movement and dynamism. The dilatational system expands or contracts text elements to create a hierarchy. The random system breaks away from traditional conventions, allowing for more experimental layouts. The grid system allows precise alignment and spacing of text elements, while the modular system arranges text elements within predefined modules. The transitional system smooths transitions between different typographic styles, while the bilateral system emphasises symmetry and balance.

In Exercise 2, identifying and examining possible letterforms in a photograph of an object, knowing the relationship between visual forms and typographic letterforms. Besides that, analyzing shapes and contours, potential letterforms that could be extracted and manipulated to create unique typographic compositions.

OBSERVATION

A variety of typographic systems were explored in Exercise 1 to demonstrate the adaptability of typography. Designing with distinct typographic principles in mind is crucial, as each system presents a variety of options for text organisation and presentation. It was a challenge to recognise and extract letterforms from unexpected sources, including objects in photos, in Exercise 2, which promoted creative inquiry. This activity showed how we might use inspiration from our surroundings to inform typographic design ideas. 

 

InDesign offers various typographic systems for creating visually striking designs, such as axial, radial, dilatational, random, grid, modular, transitional, and bilateral. These systems create balance, symmetry, movement, hierarchy, and experimentation. In Exercise 2, by exploring the natural forms and shapes that emerge from the folds, I was tapping into a rich source of inspiration that can lead to truly unique and expressive letterforms.

FINDINGS

I learned the importance of a methodical approach to typography through Exercise 1. Every typographic system has its own set of guidelines that provide a framework for efficiently arranging and structuring text. Through comprehension and utilisation of these frameworks, designers can produce more unified and aesthetically pleasing typographic arrangements. Exercise 2 demonstrated how unusual letterform development techniques can lead to innovative typographic design. Designers can push the limits of typography and find new ways to express themselves by eschewing conventional typographic sources and embracing innovation.

Return to the Table of Contents

---

7. FURTHER READING

WEEK 1 (25/9/2023)

Fig. 7.1 Typographic Systems by Kimberly Elam (2007).

Elam, K. (2007). Typographic Systems. Princeton Architectural Press, New York.

Introduction

Design is based on a structural system, broken down into eight major variations. Understanding visual organization systems allows designers to organize words or images, with typographic organization being complex due to communication, hierarchy, and legibility. Typographic systems, similar to shape grammars, identify styles through rule-based compositional systems. These systems provide a sense of purpose, directing decision-making and creating a visual language. The focus and restraint of these systems encourage creativity in design exploration.

WEEK 2 (29/4/2023)

Fig. 7.2 Random System.

The random system organises the elements randomly without a definite aim, pattern, direction, rule, method or purpose. The random system creates a dynamic composition.

Fig. 7.3 Bilateral System.

The bilateral system is based on mirrored symmetry and is therefore both classic and ubiquitous. Because of its predictability, it is a challenge for designers to work with.

WEEK 3 (6/5/2024) 

Fig. 7.3 Grid System.

Fig. 7.4 Modular System.

Modular System VS Grid System

The modular system focuses on organizing content within predefined modules, allowing for flexibility and creativity within a structured framework. On the other hand, the grid system provides a strict framework based on intersecting lines, promoting consistency and efficiency in design layouts. Depending on the project requirements and design objectives, designers may choose to employ either the modular system, the grid system, or a combination of both to achieve their desired outcomes.

WEEK 4 (6/5/2024)

Fig. 7.5 https://kreatifbeats.com/2023/08/06/finding-type-a-novel-typographic-exercise/

Nair, V. (2023) "Finding Type: A Novel Typographic Exercise." 

1. Finding an image. 

2. Deconstructing an image. 

3. Identifying letterforms. 

4. Extracting letterforms. 

5. Identify a reference. 

6. Refining letterforms. (Introduce consistency in height, width and contrast. Deliberate on retaining or removing characteristics. Decide what areas require simplification.)

Return to the Table of Contents

---

8. REFERENCE LIST & BIBLIOGRAPHY

Elam, K. (2007). "Typographic Systems." New York: Princeton Architectural Press. Google Books. [Online]. Available at: https://books.google.com.my/books?id=ulyLI06Bi2QC&printsec=frontcover&source=gbs_ge_summary_r&cad=0#v=onepage&q&f=false 

[Accessed: 22 April, 2024].

Nair, V. (2023) "Finding Type: A Novel Typographic Exercise." Kreatif Beats. [Online]. https://kreatifbeats.com/2023/08/06/finding-type-a-novel-typographic-exercise/ [Accessed: 29 April, 2024].