Advanced Typography - Task 1: Exercises

Advanced Typography - Exercises

21.4. 2026 -

week1-week14

HIYORI HYAKUICHI

Advanced Typography / Bachelor of Design (Honours) in Creative Media

Taylor's University

TABLE OF CONTENTS

1. INSTRUCTION

2. LECTURE

3. PROCESS WORK

4. FEEDBACK

5. REFLECTION

6. FURTHER READING

1. INSTRUCTION

2. LECTURE

Lecture1 : AdTypo_1_Typographic Systems

Typographic Systems

“Typography organization is complex because the elements are dependent on communication in order to function. Additional criteria such as hierarchy, oder of reading, legibility, and contrast also come into play.

The typographic systems are akin to what architects term shape grammars. The typographic systems are similar that the systems has a set of rules that is unique and provides a sense of purpose that focuses and directs the decision making.” (Elam, 2007)

Typographic 8 Systems

・Axial System

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

(Fig 1.1 AdTypo_1_Typographic Systems_Axial System 15/04/2026)

・Radial System

All elements are extended from a point of focus.

(Fig 1.2 AdTypo_1_Typographic Systems_Radial System 15/04/2026)

・Dilatational System

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

(Fig 1.3 AdTypo_1_Typographic Systems_Dilatational System 15/04/2026)

・Random System

Elements appear to have no specific pattern or relationship.

(Fig 1.4 AdTypo_1_Typographic Systems_Random System 15/04/2026)

・Grid System

A system of vertical and horizontal divisions.

(Fig 1.5 AdTypo_1_Typographic Systems_Grid System 15/04/2026)

・Transitional System

An informal system of layered bandimg.

(Fig 1.6 AdTypo_1_Typographic Systems_Transitional System 15/04/2026)

・Modular System

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

(Fig 1.7 AdTypo_1_Typographic Systems_Modular System 15/04/2026)

・Bilateral System

All text is arranged symmetrically on a single axis.

(Fig 1.8 AdTypo_1_Typographic Systems_Bilateral System 15/04/2026)

Lecture2 : AdTypo_2_Typographic Composition

Advanced Typography: Typographic Composition

Design composition is based on principles such as emphasis, isolation, repetition, symmetry and asymmetry, alignment, and perspective. However, these concepts can be somewhat abstract and difficult to apply to typographic layouts. They often seem more suitable for visual imagery than for the arrangement of text and information. Nevertheless, some of these principles can be effectively incorporated into typography and used to create stronger, more engaging designs.

Emphasis

A method of creating a visual hierarchy by determining which part of a design is the most important.

(Fig 2.1 AdTypo_2_Typographic Composition_Emphasis 28/04/2026)

The Rule of Thirds

The Rule of Thirds is a photographic guide to composition, it basically suggest that a frame(space) can be divided into 3 columns and 3 rows. The intersecting lines are used as guide to place the points of interest, within the given space.

(Fig 2.2 AdTypo_2_Typographic Composition_The Rule of Thirds 28/04/2026)

Typographic system

A system that uses consistent rules for arranging and sizing text to create a clear and readable layout.

Grid system

The most commonly used system, which organizes text and graphic elements according to a structured grid of horizontal and vertical guidelines.

(Fig 2.3 AdTypo_2_Typographic Composition_Grid system 28/04/2026)

Post modern typography

A design system characterized by freedom, experimentation, and randomness. It is often used to create strong visual impact and express emotions.

(Fig 2.4 AdTypo_2_Typographic Composition_Post modern typography 28/04/2026)

Other models / System

Environmental Grid

The Environmental Grid is a design method that extracts key straight and curved lines from existing buildings or structures to form the basis of a composition. Designers use these lines to organize information, often combining them with non-representational elements to create unique textures and visual effects.

The main feature of this approach is that it gives the design a sense of environmental context. In other words, by reflecting the characteristics of the place or situation related to the message, it allows for the creation of a more meaningful composition.

(Fig 2.5 AdTypo_2_Typographic Composition_The Environmental Grid 28/04/2026)

From and Movement

This system is based on the exploration of an existing Grid Systems. I developed this system to get students to explore; the multitude of options the grid offer; to dispel the seriousness surrounding the application of the grid system; and to see the turning of pages in a book as a slowed-down animation in the form that constitutes the placement of image, text and color. The placement of a form (irrespective of what it is) on a page, over many pages creates movement. Whether the page is paper or screen is irrelevant.

(Fig 2.6 AdTypo_2_Typographic Composition_From and Movement 28/04/2026)

lecture3 : AdTypo_3_Context & Creativity

Advanced typography: Context & Creativity

Handwriting
The importance of handwriting in typography studies lies in the fact that early mechanically produced typefaces were designed to imitate handwritten letterforms. Handwriting therefore became the foundation and standard for letter shape, spacing, and basic conventions that later type systems attempted to replicate.

In addition, the form of handwritten letters is influenced by the tools used, such as sharpened bones, charcoal, plant stems, brushes, quills, and steel pens. The materials on which writing was done—such as clay, papyrus, palm leaves, animal skins, and paper—also affected the shape and characteristics of the letterforms.

(Fig 3.1 AdTypo_3_Context & Creativity_Evolution of the Latin Alphabet 05/05/2026)

Letters evolved throughout history, gradually changing over time, and eventually became the modern alphabet we use today.

(Fig 3.2 AdTypo_3_Context & Creativity_Evolution of writing 05/05/2026)

Evolution of Middle Eastern Alphabets

It is also important to note that the Phoenician alphabet marked a turning point in written language by representing sounds with letters.

However, this writing system itself may have been influenced by Egyptian hieroglyphs and hieratic script.

(Fig 3.3 AdTypo_3_Context & Creativity_Evolution of Middle Eastern Alphabets 05/05/2026)

Evolution of the Chinese script

From the Oracle bone to Seal Script to Clerical Script, Traditional and Simplified scripts.

(Fig 3.4 AdTypo_3_Context & Creativity_Evolution of the Chinese script 05/05/2026)

The Indus script, one of the oldest writing systems in India, evolved through various periods and had a significant influence on writing system across Asia.

(Fig 3.5 AdTypo_3_Context & Creativity_Indus Valley Civilization (IVC) script 05/05/2026)

(Fig 3.6 AdTypo_3_Context & Creativity_The Brahmi script (450-350 BCE) 05/05/2026)

(Fig 3.7 AdTypo_3_Context & Creativity_Southeast Asian Scripts 05/05/2026)

Jawi and Damak are found in modern Malaysian literature. These two also provide a basic overview of the complex history of writing systems in Southeast Asia.

(Fig 3.8 AdTypo_3_Context & Creativity_Jawi and Demak 05/05/2026)

Handwriting is important in the study of typography because early mechanically produced typefaces were directly designed to imitate handwriting. Handwriting became the foundation and standard for form, spacing, and writing conventions that mechanical type tried to replicate.

In Asia, written cultural traditions were not always fully preserved, and with the adoption of Western printing technologies, reproducing older writing systems in print required a great deal of knowledge, time, effort, and cost.

However, in recent years, with advances in computer technology, various writing systems are once again being widely used in digital environments.

(Fig 3.9 AdTypo_3_Context & Creativity_ Typeface by Ek Type 05/05/2026)

These are designed to meet situations where information is communicated in vernacular scripts or in both vernacular and Latin scripts.

In modern typography, by paying attention to and studying historical writing systems, we can help preserve them.

3. PROCESS WORK

Advanced Typography - Typographic Systems (Exercise 1)

Requirements : Software : Adobe InDesign

Size : 200mm x 200mm

Export format : JPEG, 300 ppi

Color : black and one color

Others : Lines, points, simple shapes, etc.

All major design structures (8 types):

Axial
Radial
Dilatational
Random
Grid
Modular
Transitional
Bilateral

(Fig.1.1 Design structures 21.4.2026)

Typography is complex because it is based on communication, and factors such as hierarchy, reading order, legibility, and contrast are important.
Additionally, systems provide direction for design through their own set of rules, and these constraints serve as guidelines that support growth.

The characters and sentences used :

All ripped up: Punk influences on graphic design.

The Design School,Taylor’s University.

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

Initial Design :

1. Axial System

(Fig.1.2 Axial System1. 21.4.2026)

(Fig.1.3 Axial System2. 21.4.2026)

Font used :

Univers LT Std (55 Roman, 75 Black)

The central axis was positioned on the left side, and the letters were arranged along that axis. The characters that I wanted to emphasize were made bolder. Inspired by the punk aesthetic, I also incorporated triangular and jagged shapes into the design.

2. Radial System

(Fig.1.4 Radial System1. 21.4.2026)

(Fig.1.5 Radial System2. 21.4.2026)

Font used :

Univers LT Std (67 Bold Condensed Oblique, 75 Black Oblique)

The design was created around a central circle, with the letters arranged to give a slight sense of depth and three-dimensionality. The letters were set to be smaller near the circle and gradually become larger as they spread outward.

3. Dilatational System

(Fig.1.6 Dilatational System1. 21.4.2026)

(Fig.1.7 Dilatational System2. 21.4.2026)

Font used :

Univers LT Std (45 Light, 55 Oblique, 75 Black Oblique)

The design was created based on the concept of expanding outward from a central circular shape.

4. Random System

(Fig.1.8 Random System1. 21.4.2026)

(Fig.1.9 Random System2. 21.4.2026)

Font used :

Univers LT Std(45 Light, 75 Black, 75 Black Oblique)

The design was created with a random composition in mind, with the colors, shapes, and sizes intentionally varied and arranged irregularly.

5. Grid System

(Fig.1.10 Grid System1. 21.4.2026)

(Fig.1.11 Grid System2. 21.4.2026)

Font used :

Univers LT Std(45 Light, 75 Black, 85 Extra Black)

In this section, a rectangular frame was created, and the text was adjusted to fit within it.

Additionally, the color was changed to make the frame more visible.

6. Modular System

(Fig.1.12 Modular System1. 21.4.2026)

(Fig.1.13 Modular System2. 21.4.2026)

Font used :

Univers LT Std(75 Black)

All the text was unified in the same font to improve readability.

7. Transitional System

(Fig.1.14 Transitional System1. 21.4.2026)

(Fig.1.15 Transitional System2. 21.4.2026)

Font used :

Univers LT Std(45 Light, 55 Roman, 55 Oblique, 75 Black)

The text was designed to gradually transform from a circular arrangement into a different shape.

8. Bilateral System

(Fig.1.16 Bilateral System1. 21.4.2026)

(Fig.1.17 Bilatera System2. 21.4.2026)

Font used :

Univers LT Std (45 Light, 75 Black, 75 Black Oblique, 85 Extra Black)

The design was created with a balanced composition centered on both vertical and horizontal axes.

(Fig.1.18 Design structures-8 types. 21.4.2026)

In Week 2, I received feedback from the lecturer regarding the use of color and shapes. I was advised to use brighter colors and to avoid overly stimulating or aggressive shapes.

After Editing

Overall, the colors were adjusted to brighter tones, and the more aggressive or stimulating shapes were replaced.

1. Axial

(Fig.2.1 Axial System. 29.4.2026)

2. Radial

(Fig.2.2 Radial System. 29.4.2026)

3. Dilatational

(Fig.2.3 Dilatational System. 29.4.2026)

4. Random

(Fig.2.4 Random System. 29.4.2026)

5. Grid

(Fig.2.5 Grid System. 29.4.2026)

6. Modular

(Fig.2.6 Modular System. 29.4.2026)

7. Transitional

(Fig.2.7 Transitional System. 29.4.2026)

8. Bilateral

(Fig.2.8 Bilateral System. 29.4.2026)

(Fig.2.9 Final Design 1.5.2026 )

(Fig.2.10 Final Design (PDF) 2.5.2026)

(Fig.2.10 Final Design (PDF) 2.5.2026)

Advanced Typography - Type and Play (Exercise 2) : Part1

Image : keyboard

Reason : These are everyday objects that I regularly use in my daily life. In this section, I focused on the gaps between the keys of a keyboard to develop a font design.

(Fig 3.1 Original Image 03/05/2026)

(Fig 3.2 Extracted Characters 03/05/2026)

Here, I identify letterforms from the selected photographs.
From the selected photograph, I found the word "BOARD" from a keyboard.

• Font used : Gill Sans Nova (Bold)

(Fig 3.3 Development Process, Adobe InDesign and Illustrator 03/05/2026)

(Fig 3.4 Font Revision, Adobe InDesign 03/05/2026)

(Fig 3.5 Work Progress 05/05/2026)

Based on the selected typeface, I modified and developed the letterforms through four stages:

・Initial Exploration

・Adding Structure & Baseline

・Refinement & Adding Structure

・Final Refinement & Adding Structure

At each stage, the letters were modified and improved to achieve a more consistent and well-structured typeface.

At this stage, I also received feedback from Mr. Vinod, who pointed out that the outer and inner curves of the letterforms were not properly aligned.

(Fig 3.6 Before Font 05/05/2026)

(Fig 3.7 After Font 05/05/2026)

Advanced Typography - Type and Play (Exercise 2) : Part2

In Part 2, I will use the typeface created in Part 1 to design a movie poster.

Reference materials used

(Fig 4.1 Movie Poster Reference 07/05/2026)

Design process :

Poster size : 1024px x 1024px

File format: JPG
Resolution: 300 PPI

Software used:
• Adobe Illustrator
• Adobe Photoshop
• Adobe InDesign

Materials used:
• Computer
• Error screen
• Filter (to simulate low image quality)

(Fig 4.2 Materials used 07/05/2026)

The concept of the movie poster is based on computer glitches, digital errors, and system bugs.

(Fig 4.3 First Design process, Adobe Photoshop 08/05/2026)

(Fig 4.4 First Design process2, Adobe Photoshop 08/05/2026)

(Fig 4.5 First Design process3, Adobe Photoshop and Illustrator 08/05/2026)

(Fig 4.6 First Design process4, Adobe Photoshop and Illustrator 08/05/2026)

(Fig 4.7 First Design process5, Adobe Photoshop 08/05/2026)

I mainly added images, applied filters, and adjusted contrast.

I also modified the typography by lowering its texture and resolution and adjusting its color tone to match the overall atmosphere. In addition, I used visual hierarchy to guide the viewer’s eye by changing the size and placement of the text accordingly.

(Fig 4.8 Final Design, Adobe Photoshop 10/05/2026)

In this week, Mr. Vinod gave feedback that the color palette and materials were good, but the poster did not look like a movie poster due to the lack of credits.

Therefore, I added credits such as the names of people involved in the film, collaborating companies, and logos.

(Fig 4.9 Final Poster Design (JPEG), Adobe Photoshop, Illustrator and InDesign 10/05/2026)

4. FEEDBACK

Week 4:

General Feedback

・Explanation of Task 2

・Prepare a mind map and two mood boards by next week

・E-portfolio: Complete Exercise Task 1

Specific Feedback

・ The photo materials and elements are good.

・Add more creator and contributor names like in movie posters.

・Add the logo marks of collaborating companies.

Week 3:

General Feedback

・Use details and composition to communicate the theme and message of the design more effectively.

・Avoid making the lettering too similar to the reference; do not imitate it too closely.

Specific Feedback

・The outer and inner curves and widths do not match, so they should be adjusted to make them look more consistent and natural.

Week 2:

General Feedback

・Use alignment instead of manual positioning for layout adjustments.

・Pay attention to spacing (white space) and visual flow.

Specific Feedback

・I revised the design to be more minimal and avoided using intense or aggressive shapes.

Week 1:

General Feedback

・The lecturer explained the rules of the typography class and the assignments.

Specific Feedback

・No specific feedback

5. REFLECTION

In Task 1 and Task 2, we learned to carefully observe typography in detail, including the 8 typographic systems, composition, spacing, and visual hierarchy such as eye movement and flow.

In Task 2, we were also required to develop not only text-based designs but also editing skills using Photoshop, such as image manipulation and colour adjustments.

We learned that typography is not just about visual appearance; by considering composition and making subtle adjustments, we can communicate content more effectively to the viewer and create stronger designs.

Through these assignments, we also improved our skills by using Adobe InDesign, Photoshop, and Illustrator.

6. FURTHER READING

(Fig 5.1 Further Reading_Typographic Design Form Communication 6ed-Rob Carter 10/05/2026)

In this further reading, I mainly learned about the history of typography, legibility, grid systems, composition, communication, and its development from the past to the present.

It also helped me to review and better understand the content of Task 1 and Task 2.

I learned again that typography is not an art, but a system for designing communication; that letters are not just shapes, but structures for conveying meaning; and that history, technology, and design are all interconnected.

Search This Blog

Hiyori Hyakuichi (0373128)