Advanced Typography - Task 1: Exercises

 21/4/26 - 12/5/26 (Week 1 - Week 4) 

Ayah Zaher Abdullah Al Harmally / ID No.0381658

Advanced Typography / Bachelors of Design in Creative Media / Taylor's University

---

 

LECTURES

Week 1

Lecture 1: Typographic Systems

Typographic organization is complex because its elements only work through communication. Factors such as hierarchy, reading order, legibility, and contrast shape how typography functions. Typographic systems resemble architects’ shape grammars: each system follows a distinctive set of rules that gives it purpose and guides design decisions (Elam, 2007).
A shape grammar is a sequential set of rules for manipulating shapes to produce a consistent design language.

Eight major typographic systems:

1. Axial system
   

   Elements align along a single vertical, horizontal, or diagonal axis. Content is positioned on either side of this line. The axis can bend for variation, but strict axial layouts follow one continuous line; layouts that shift between multiple axes move toward other systems.

2. Radial system
   

   Elements radiate from a central focal point like spokes on a wheel. Text and visual cues direct attention toward that center. Designs can use multiple centers for greater complexity.

3. Dilatational system

   Elements grow outward in circular layers or concentric rings from a center. Hierarchy is established by ring position (inner rings vs. outer rings), plus size, color, and weight. Information can be grouped by ring to create reading rhythm. 

4. Random system
   

   Elements appear placed without an obvious pattern, creating an intentionally chaotic effect. Although it may initially feel unstructured, successful examples often reveal an underlying logic and train designers to rely on intuitive placement.

5. Grid system

   The most widely used approach: elements align to intersecting horizontal and vertical lines. Hierarchy is created through size and weight. Though sometimes criticized as rigid, grids are extremely versatile—especially for book and editorial design.

6. Transitional system

   Information is organized into layered bands or strips—horizontal or vertical—so headlines, subheads, and body text occupy distinct bands. Varying weight, size, and color increases legibility and visual interest. This system can be combined with grids for more controlled layouts.

7. Modular system

   The page is divided into standardized rectangular or square modules (single or double units) that can be interchanged like puzzle pieces. Units must match sizes to be swapped easily. Tight grid alignment preserves modular consistency, though looser placement is possible if the modular logic remains understandable.

8. Bilateral system

   Text and elements mirror each other across a central axis, producing symmetrical layouts often used for formal pieces (invitations, certificates). While symmetry can feel static, variation—such as contrasting typefaces or added connecting lines—keeps the layout engaging.
   
   
   
   
   
   

Figure 1.1

Examples Of The 8 Typoographic Systems 

---

Week 2 

Lecture 2: Typographic Compositions

Typography covers designing letterforms and arranging large amounts of text within a space. Design composition relies on principles like emphasis, isolation, repetition, symmetry/asymmetry, alignment, and perspective.

Some principles translate to typography more easily than others:
Emphasis is straightforward to apply in type—use size, weight, color, or placement to highlight elements.

Repetition and perspective are harder to apply directly to text layouts, though repetition can work through repeated grids or motifs.

Rule of Thirds

A photographic rule that divides a space into three columns and three rows; intersections mark good spots for points of interest.

Figure 1.2

Rule of Thirds Example

Other Systems inlcude:

Grid system 
The most widely used typographic system, originating from letterpress grids.
Strengths: versatile, modular, and adaptable.
Popularized by Swiss/Modernist designers such as Josef Müller-Brockmann, Jan Tschichold, and Max Bill.

Figure 1.3

Grid System Example

Environmental grid

Derives structure from existing physical or visual frameworks (buildings, maps, patterns).
Designers extract key straight and curved lines and arrange text and imagery around them, mixing objective and non-objective elements for texture and visual interest.

Figure 1.4

Enviromental Grid Example

Form & Movement

Begins with a grid but treats sequential pages like frames in a slow animation.
Placing forms (text, images, color) across pages creates a sense of movement.
Complexity grows as more elements and interactions are introduced.

Figure 1.5

Form and Movement Example

---

 Week 3

Lecture 3: Context & Creativity 

Handwriting & Early Letterforms

Early mechanical letterforms were designed to imitate handwriting. Handwriting set standards for form, spacing, and conventions that type later followed.
The shape of letters reflects the tools used to make them (pen, brush, stylus).
Major historical scripts (high-level timeline).

Cuneiform (c. 3000 BCE): Earliest known writing, made by pressing a wedge stylus into clay.

Figure 2.0

Cuneiform

Egyptian hieroglyphics (c. 2613–2160 BCE): Combines pictorial, rebus, and phonetic signs; can act as ideograms, determinatives, or phonograms.

Figure 2.1

Egyptian Hieroglyphics

Early Greek (5th century BCE): Adopted and adapted Phoenician phonetic script, adding vowels; reading direction varied (e.g., boustrophedon).

Figure 2.2

Early Greek

Roman uncials (4th century): Rounded forms written with a flat brush, later carved in stone—faster to write.

Figure 2.3

Roman Uncials

English half-uncials (8th century): Slanted, condensed development of uncials.
Movable type (11th–14th centuries): Printing and movable type existed earlier in East Asia

 (China, Korea, Japan) before Europe; Koreans cast bronze type and used movable systems.

Figure 2.4

English Half-Uncials

Indus Valley script (c. 3500–2000 BCE): Oldest South Asian writing; undeciphered and likely logo-symbolic.

Figure 2.5

Indus Valley Script

Brahmi (c. 450–350 BCE): Parent script for many South Asian scripts.

Figure 2.6

Brahmi Script

Southeast Asian scripts: Indian scripts (like Pallava) influenced local writing systems.

Figure 2.7

Pallava Script

Kawi: Javanese script based on Nagari, widespread across Indonesia and the Philippines.

Figure 2.8

Kawi Script

Jawi: Arabic-based script introduced with Islam; spread through trade and missionary activity.

Figure 2.9

Jawi Script

Western narratives often emphasize Greek and Roman influence while downplaying African and Near Eastern contributions, due partly to 19th-century Eurocentric bias.

Why handwriting matters for typography

- Mechanical and digital typefaces originate from handwritten letterforms.
- Studying handwriting helps understand letterform logic, spacing, and legibility.
- Recent tech developments have supported the digitization and revival of non-Latin scripts. 

---

 

Week 4

Lecture 4: Designing Type

Why design a typeface: (Xavier Dupré)

- Type carries social responsibility—improving legibility matters.
- Type design is an artistic practice.

Notable type designers and fonts:

Adrian Frutiger: Swiss designer behind Univers and Frutiger; advanced type for digital and signage use.

Frutiger (1968): Designed for Charles de Gaulle Airport—highly legible at distance and in poor light; tested for recognizability even when blurred.

Matthew Carter: Designed Verdana for on-screen legibility at small sizes; shapes reflect pixel constraints.

Edward Johnston: Created Johnston Sans (1916) for the London Underground—combined classical proportions with humanist warmth to create a distinctive, functional system.

General type-design process

• Research: study history, anatomy, conventions, and intended uses.
• Sketching: draft forms by hand or digitally; hand-sketching retains natural stroke qualities.
• Digitisation: use FontLab, Glyphs, or similar; pay attention to counters and negative space.
• Testing: prototype, refine, and check legibility/legibility according to the font’s purpose (display vs. text).
• Deploy: release and fix early issues; thorough testing reduces later problems.

Construction of Typeface

Roman capital construction often uses a square with an inscribed circle and a centered rectangle—grids help build consistent forms.
Letters can be grouped by shared construction traits; design decisions for one letter can inform others.

Optical corrections: curves should slightly overshoot baselines/cap heights (overshoot) to appear optically equal; spacing needs visual adjustment (kerning and tracking).

Conclusion
Most typefaces arise from a need—functional or expressive—and combine practical requirements with artistic choices.

---

 

INSTRUCTIONS

---

 
Ex. 1

Typographic Systems 

Specifications: 

Size: 200 x 200 mm
Minimal Graphical Elements

All the 8 major Typographic systems to be explored with one of the following: 

The Design School,
Taylor’s University

All Ripped Up: Punk Influences on Design
or
The ABCs of Bauhaus Design Theory
or
Russian Constructivism and Graphic Design

Open Public Lectures:

 
June 24, 2021
Lew Pik Svonn, 9AM-10AM
Ezrena Mohd., 10AM-11AM
Suzy Sulaiman, 11AM-12PM

 
June 25, 2021
Lim Whay Yin, 9AM-10AM
Fahmi Reza, 10AM-11AM
Manish Acharia, 11AM-12PM

I chose "Russian Constructivism and Graphic Design" because the bold colours were striking and the geometric forms were intriguing. It felt like a challenging style for me to tackle.

Some works that have inspired me: 

Figure 3.0

Fonts Used: 

- Futura Std

Bold

Bold Condensed Oblique

Heavy

Medium Condensed

Medium

Book

- Adobe Caslon Pro

Bold Italic

Regular

- Gill Sans Std

Ultra Bold

Axial System: 

Axial System 

Draft

Figure 3.1

I was quite pleased with the outcome thus far however, something seemed a bit off; The outline on the orange triangle didn't fit. And "Taylor's University" was not correctly alligned to it. So I made some 

Axial System 

Draft 2

Figure 3.2

Axial System 

Final

Figure 3.3

Radial System: 

This part was quite challenging. I struggled finding the right composition, typeface, having minimal graphical elements and aliging them. 

Radial System 

Drafts

Figure 3.4

Black as the overall leading colour in the image came off as too overpowering. I lowered it by adding an orange geometric shape to balance it out.

Radial System 

Figure 3.5

Random System: 

Wasn't as hard as the Radial system, but it still was a challange as I had to factor in the readability. 

Random System 

Figure 3.6

Diatational System:

Diatational System 

Figure 3.7

Grid System:

Grid System 

Figure 3.8

Transitional System:

Added the geometic shapes to embody the esence of  "Russian Contructivism" By far the easiest system to work on. 

Transitional System 

Figure 3.9

Modular System:

Modular System 

Draft

Figure 4.0

Bilateral System:

Bilateral System 

Draft

Figure 4.1

Bilateral System 

Final

Figure 4.2

---

 

Final Outcome:

JPEG:

Axial Final

Figure 5

Radial Final

Figure 6

Random Final

Figure 7

Diatational Final

Figure 8

 

Grid Final

Figure 9

Transitional Final

Figure 9

Modular Final

Figure 10

Bilateral Final

Figure 11

Final Composition 

Figure 12

PDF:

PDF With Margins:

---

Ex. 2

Type & Play

Week 2

Dissection & Extraction

Figure 13

Refinement of Extraction

Figure 13.1

Further Refinement of Extraction

Figure 13.2

Final letterforms on a baseline

Figure 13.3

Extracted letterforms along final letterforms

Figure 13.4

Poster Design

Figure 13.5

Image, Dissection, Extraction, Refinment and Final

Figure 13.6

Poster Design PDF

Figure 13.7

---

FEEDBACK:

Week 1: 

General Feedback: Set up your blog, have a module brief and the task for week 2 explained.

Specific Feedback: None this week. 

Week 2: 

General Feedback: Feedback on our work. Refine it. Avoid over using graphical elements. Lines should not be bigger than 0.5.

Specific Feedback: None this week. 

Week 3: 

General Feedback: Peserve textures, strengthen their relevance. 

Specific Feedback: Good extraction from the image however as I continued refining, there was loss of extraction. Change the font reference as it doesn't match up with the idea I'm going for. Stylise it more. The letters should represent the full image. Make it look like actual flower petals.

Week 4: 

General Feedback: Do not use Photoshop when creating the movie poster as it'll look pixelated. Try to maintain harmony between the typeface and the image behind by using colour and opacity

Specific feedback: None this week.