Advanced Typography: Task 1 Exercises

22/4/2025 - 13/5/2025 Week 1 - Week4

Komugi Uchibori / 0363900

Advanced typography/Bachelor of Design (Hons) in Creative Media

Task 1 Exercises

---

TABLE OF CONTENT

1. LECTURE
2. INSTRUCTION
3. TASK 1
4. Task 1 Complition
5. FEEDBACK
6. REFLECTION
7. FURTHER READING

---

LECTURE

Week 1 - Typographic systems

Fig.1-1 Typpographic systems

• Typographic systems

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

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

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

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

Grid: A system of vertical and horizontal division.

Transitional: An informal system of layered banding. Banding means segregating information within bands.

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

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

Week 2 - Typographic Composition

• Typographic Composition

Fig.1-2 Typographic Composition

Emphasis: One of the easily usable principles for typography

The Rule of Thirds: Generally no one would ever use this, but when you make the decision on placement of important information within a given space, it's good.

The grid system: the versatility of the system and its modular nature tend to allow an infinite number of adaptations.

Environmental Grid: an extraction of crucial lines, both curved and straight, is formed. Then organize information around this superstructure, including non-objective elements to create a unique and exciting mixture of texture and visual stimuli.

Form and movement: This offers the multitude of options the grid offers 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 level of complexity increases as new elements are introduced in an incremental fashion: adding color, image, and then dummy text.

Fig.1-3 Typographic systems

Typographic systems: The postmodernist era in typographical systems where chaos, randomness, and asymmetry were explored. Legibility and readability were relegated to the back seat.

Week 3 - Handwriting

Fig.1-4 Evolution of Latin letterforms

Letterforms were designed to directly imitate handwriting. The shape and line of hand-drawn letterforms are influenced by the tools and materials used to make them like charcoal, sharpened bones, clay and so on.

Fig.1-5 Ancient Egypt Hieroglyphics chart

Hieroglyphics, 2614-2160 B.C.E

The Egyptian writing system is fused with the art of relief carving and mixture o f oth rebus and phonetic characters. 

• Idiograms: to represent the things they actually depict.
• Determinatives: to show the signs preceding are meant as phonograms and to indicate the general idas of the word.
• Phonograms: to depict sound that " spell out" individual words.

Fig.1-6 letterform evolution from Early Greek to Italian Reneassiance

Early Greek, 5th C.  B.C.E.

The Phoneticians developed a Phonetic alphabet consiting 22 letters. They were adopted by the Greeks. Greek was often read in a format known as bounstrouphedon or "as the ox plows." One row ould read left to right and then switch from right to left. In times the stroke of these letter frew thicker, the aperture lessened and serifs appeared.

Roman Uncials

By the 4th century, Roman letters were becoming more rounded, the curved letterform allowed for less strokes.

English Half Uncials, 8th C

In England the uncial evolved into more slanted and condensed form.

Emperor Charlemagne, 8 C. CE
After the fall of the Roman Empire, the end of the central advanced culture resulted in general genera illiteracy and a breakdown of handwriting into diverse regional styles.

Carolingian Minuscule
During Charlemagne's patronage, book production increased and language was standardized, including pronunciation and spelling as well as writing conventions. Also a new script emerged, the Carolingian minuscule.

Black letter, 12-15 C. CE
Gothic was the culminating artistic expression of the Middle Ages. The pointed arch replaced the round arch of the Romans; the almond shape, or mandorla, was preferred. Gothic writing forms reflected this aesthetic. Black letter is characterized by tight spacing and condensed lettering.

The Italian Renaissance
The Renaissance embrace of ancient Greek and Roman culture spurred a creative wave through Italian art, architecture, literature, and letterform design. Humanists named the newly rediscovered letterforms Antica. 

Fig.1-7 Movable Type

Movable Type, 11-14 C.
Painting had already been practiced in China, Korea, and Japan. China had attempted to use movable type for printing but was unsuccessful. In the late 14th century, the Koreans established a foundry to cast movable type in bronze with the creation of their new script, Hangul. This event was several decades ago, before the earliest printing in Europe (Gutenberg's Bible in 1439).

Fig.1-8 Evolution in middle eastern alphabet and script in china

While the Phoenician letter marks a turning poin in written language, the script itself has been infuluenced by the Egyptian Hieroglyphics and Hieratic Scripts. We should reflect more deeply on ourselves when exploring history and culture.

Fig.1-9  Indus Valley Civilization script

The oldest writing found in the Indian subcontinent the Indus Valley Civilization script is as yet undeciphered and seems to have been somewhat logo-syllabic in nature.

Also, The Brahmi script (450-350 BCE) is the earliest writing system developed in India after the Indus script. All moderen Indian scrippts and several hundred writing scripts found in Southeast and EastAsia are derived from Brahmi.

Fig.1-10 the Kedukan Bukit inscription from Sumatra

The oldest writing systems present in Southeas Asia were Indian scriipts and the most imporatant would be Pallava. this was influential, becoming the basis for writing systems across Southeast Asia.

Fig.1-11 Laguna Copperplate inscription written in Kawi

Ancient kingdom in the Malay Peninsula would have been using both Indian scripts and Kawi to write old Malay language.

Fig.1-12 Histrical writing systems in Indonesia

Indonesia has a lot of historical writing systems, such as Incung, batak, Bugis, and Javanese.

Fig.1-13 The record of sale written in Batak

Jawi, the Arabic-based alphabet was introduced along with Islam. Hindu societies in South and Southeast Asia were hierarchical, and the lower classes were generally illiterate. But, missionary like traders taught Jawi to people who could not read or write, and it eventually spread to the upper and middle classes in the port cities.

In Malaysia, Jawi is used in literary works and since there are few pre-Jawi documents, it plays an important role. That's whiy some tend to claim that Jawi is "tulisan asal Melayu."

• Programmers and Type Design

Fig.1-14 Baloo, affable diplay typeface by Ek Type

More vernacular scripts are being produced by software giants (Google) in their enproiment a greate many Asian programmers and desiners.

Local movement and individuals

In Malaysia, murasu.com by programmer and typographer Muthu Nedumaran who cracked the different types of the writing systems is famous.

Huruf, a local groupof grphic designers interested in localized lettering of larin and vernacular letters painted or  inscribed on walls adn signages are amongst the more prominen organizations digitizing and revitalizing typefaces in Malaysia.

Elk type and Indian Type Foundry are organizations that did ground breaking work with the development of vernacular typefaces in India. 

Week 4 - Desining Type

Type design is a form of artistic expression and carries a social responsibility so it must continuet to improve its legibility.

Fig.1-15 Univers & Frutiger

Adrian Frutiger: Swiss graphic designer who contributed to typography like "Universe and Frutiger."

• Purpose: clean, distinctive and legible typeface that is easy to see from both close up and far away, extremely functional.
• Consideration/limitations: need to be recognized even in poor light consideration or when the reader was moving quickly past the sign.

He had designed a new Devanagari font for modern typesetting and printing processes at the request of the Indian Design Institute. His goal was to simplify the sacred characters without compromising their ancient calligraphic expression.

Fig.1-16 Georgia & Verdana

Matthew Carter: contemporary British type designer who created Verdana for Microsoft. 

• Purpose: the font was tuned to be extremely legible even at very small sizes on the screen due in part to the popularity of the internet and electronic devices.
• Considerations/limitations: The Verdana fonts exhibit characteristics derived from the pixel rather than the pen, the brush or  the chisel. Commonly confused characters, such as the lowercase i, j, and l.

He also had designed Bell Centennial to solve multiple technical and visual problem related to exisiting phonebook typography, Bell Gothic.

FIg.1-17 Jonston Sans

Edward Johnson: the creator of the London "Underground" typeface, which would later come to be known as Johnston Sans.

• Purpose: London's Underground railway ordered a new typeface for its poster from him, and he handed over the details and examples of letter shapes that would set the tone for printed text until the present day.
• Considerations/limitations: to unify the inconsistent designs of advertising and signage across the London Underground. He created a typeface based on the proportions of Roman capital letters, combining historical tradition with a simple, elegant design suited to the modern age.

• General Process of Type Design

1. Research

We should understand tyoe history, anatomy, conventions and terminolodgy. It is important to determine the type's purpose or what it would be used for, what different applications it will be used in such as wheter the typeface is for school busses or airport signature, etc. Also, Examining existing fonts that are presently being used for inspiration/ideas/reference/context/usage pattern/etc.

2. Sketching

Some designers sketch their typeface using the traditional tool set and then scan them for the purpose of digitization. Some use digital tool sets directly into a font design software (much quicker, persistent, and consistent) but this can sometimes impede the natural movement of hand strokes.

3. Digitization

There are professional software that are used in the digitization of typefaces: FontLab and Glyphs App. Some also use Adobe Illustrator to design or craft the letterforms and then introduce it into the specialized font apps. Attention should not only be given to the whole form at this stage but also to the counter form. The readability of the typeface is heavily dependent on it.

4. Testing 

The results of the testing is part of the process of refining and correcting aspects of the typeface. Prototyping is also part of the testing progess and ads to important feedback. Depending on the typeface category (display type/text typ) the readability and legibility of the the typeface becomes an important consideration. However it is not as crucial if the typeface is a display type, where expression of the form takes a little more precedence.

5. Deploy

Even after deploying a completed typeface there are always teething problems that did not come to the fore during the prototyping and testing phases. Thus, the task of revision doesn't end upon deployment. The rigour of the testing is important in so that the teething issue remain minor.

• Typeface construction 

Fig.1-18 Classification according to form and construction

Roman Capital: The grid consists of a square, and inside it a circle that just touches the lines of the square in four places. Within the square, there is also a rectangle. This rectangle is three quarters the size of the square and is positioned in the centre of the square. Using grids facilitate the construction of a letterforms and design your letterform.

• Construction and considerations 

Depending on their form and construction, the 26 characters of the alphabet can be arranged into groups, whereby a distinction is made between a group for the capitals and a group for lowercase letters. The process called “fitting” is Visual corrections in type design include extending curved shapes slightly beyond the baseline and cap line, and adjusting spacing between letters to create uniform visual white space.

---

INSTRUCTION

• Task 1

Timeframe: Week1 - Week 4

Deadline: 20/05/2025

Aim: To create 8 typographic systems and original letterforms by extracting elements from the picture I chose. What I'm supposed to be doing in the end is creating posters using those systems and letters.

Submission requirement:

1. 8 typographic systems with/without grids
2. Original pictuer & tracing
3. Process of letterform
4. references
5. extracted letterforms
6. Final letterform
7. Poster

---

TASK 1

Typographic Systems

The 8 systems:  Axial, radial, dilatational, random, grid, modular, transitional, and bilateral— are to be explored using the following content:

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 Lecture Theatre 12 

The size should be 200 x 200 mm.

• Research

Fig 2-1 Research on typographic systems (27/4/2025, week 2)

Before starting first attempt, I searched examples on Pinterest. As for the explanation, I read the book recommended by the teacher in Teams.

• The Process

I chose "Russian Constructive and Graphic Design" as a content sentence. 

Fig 2- 1 Typographic systems at first attempt (27/4/2025, week 2)

After showing them to the teacher, I got some advice, and here's the first one and the refined one:

Fig 2-2 Axial system at second attempt (29/4/2025, week 2)

Advice: This is not single axial line so redesign.

Fig 2-3 Radial system at second attempt (29/4/2025, week 2)

Advice: The systm in this work is combined with Dilatioanl system.

Fig 2-4 Dilational system at second attempt (30/4/2025, week 2)

Advice: Complete the circle.

Fig 2-5 Transitonal system at second attempt (30/4/2025, week 2)

Advice: This is also combined with another system and there's few transtion.

Fig 2-6 Birateral system at second attempt (1/5/2025, week 2)

Advice: This is wrong so redesign.

Fig.2-7 Random sytem at second attempt  (9/5/2025, week 3)

Advice: This is wrong so redesign.

• Final work

Fig 2-8 Final 8 systems at second attempt (9/5/2025, week 3)

Fig 2-9 Final work of Axial System (9/5/2025, week 3)

Fig 2-9 Final work of Radial System (9/5/2025, week 3)

Fig 2-9 Final work of Dilational System (9/5/2025, week 3)

Fig 2-9 Final work of Random System (9/5/2025, week 3)

Fig 2-9 Final work of Grid System (9/5/2025, week 3)

Fig 2-9 Final work of Transitional System (9/5/2025, week 3)

Fig 2-9 Final work of Modular System (9/5/2025, week 3)

Fig 2-9 Final work of Bilateral System (9/5/2025, week 3)

Fig 2-10 All 8 systems without guides in PDF (9/5/2025, week 3)

Fig 2-11 All 8 systems with guides in PDF (9/5/2025, week 3)

 Type & Play

Selecting one image, analyze, dissect, and identify potential letterforms. The forms would be explored and digitized. After that we are supposed to combine the letterforms with an image that is the basis of the extracted letters. 

• The Process

Fig 3-1 Original picture (3/5/2025, week 2)

Fig.3-2 tracing process  (3/5/2025, week 2)

Fig.3-3 Final tracing (3/5/2025, week 2)

Fig.3-4 Paint extracted letters (3/5/2025, week 2)

I chose the picture, which is a glass of blue drink with butterfly-like shaped ice. I traced it using Illustrator. I extracted "icuLpyxvom." To start with refining letters, I watched the lecture on typography to check how to do it.

Fig.3-5 Reference and Extracter letters (4/5/2025, week 2)

Then I decided to use "copyu" and arranged the letter to a word named "copy cup" for a poster. I refer these letters to ITC Garamond Std - Bold Narrow.

Fig.3-6 Refuned letterform at first attempt (4/5/2025, week 2)

Here are the refined letters at the first attempt. Basically, the x-height and width of the letters are adjusted to reference typography to balance well. However, the shape and line are changed a bit not to lose the characteristic of the original.

Fig.3-7 The outcome at first attempt  (5/5/2025, week 3)

I tried one more attemp for this type & play. I got advice from the teacher that I should focus on specific elements like the ice or bubble and extract the the shape not detail. 

Fig.3-8 Paint extracted letters (4/5/2025, week 3)

Fig.3-8 Reference and Extracter letters (6/5/2025, week 3)

Based on this advice, I re-extracted the new shapes, representing the letters "CUITM."

At this rate, I changed the reference to Gill Sans Std - Bold.

Fig.3-9 Refined letters (8/5/2025, week 3)

I created a few refined letters based on the reference. For the first one, I adjusted the extracted text slightly to refine its organic shape, aligning the letters with the baseline and ascender . However, the characters still aren't characteristic while maintaining readability.

So I focused on improving readability by bringing the letters closer to the reference. As for the last one, the extracted features have been reduced and become a form that close to the reference. 

Fig.3-10 Final outcome  (10/5/2025, week 3)

I chose the second one and refined a bit again and then completed.

• Final work

Fig.3-10 Final outcome of Type & Play  (10/5/2025, week 3)

Poster

• The process

Fig.4-1 Editting image (11/5/2025, week 3)

I used the original picture of Type & Play for the poster, editing its direction and color by adjustment layer in Photoshop. I made the picture high contrast and bluish compared to the original.

Fig.4-2 Staff credit and Tagline (11/5/2025, week 3)

I used Space Mono for staff credit and Tagline.

Fig.4-3 Movie-related logo (11/5/2025, week 3)

I added these two logos to make the poster look more like a real movie poster.

Fig.4-4 Adding noise (11/5/2025, week 3)

After placing every elements, I added noise effect for the background and CUITM to enhance visual image and to math with each other. I adjusted the poster and completed the task.

Fig.4-4 Poster at first attempt (11/5/2025, week 3)

I got the advice to bring the title to the middle, top middle, or bottom middle in order to enhance the importance and to make the credit bigger, to read easily. Then I refined it.

• Final work

Fig.4-5 Final Poster  (13/5/2025, week 4)

Fig.4-6 Final Poster  PDF  (13/5/2025, week 4)

Task 1 Complition

• 8 typographic systems

Fig 5-1 Final 8 systems at second attempt (9/5/2025, week 3)

  

Fig 5-2 Final work of Axial System (9/5/2025, week 3)

Fig 5-3 Final work of Radial System (9/5/2025, week 3) 

Fig 5-4 Final work of Dilational System (9/5/2025, week 3)

Fig 5-5 Final work of Random System (9/5/2025, week 3)

Fig 5-6 Final work of Grid System (9/5/2025, week 3)

Fig 5-7 Final work of Transitional System (9/5/2025, week 3)

Fig 5-8 Final work of Modular System (9/5/2025, week 3)

Fig 5-9 Final work of Bilateral System (9/5/2025, week 3)

Fig 5 -10 All 8 systems without guides in PDF  (9/5/2025, week 3)

Fig 5-11 All 8 systems with guides in PDF (9/5/2025, week 3)

• Type & Play

Fig. 5-12 Original pictuer & tracing (4/5/2025, week 3)

Fig.5-13 Process of letter forming (8/5/2025, week 3)

Fig.5-14 Reference: Gill Sans Std - Bold  (8/5/2025, week 3)

Fig.5-15 Extracted letter  (8/5/2025, week 3)

Fig.5-16 Final letter  (10/5/2025, week 3)

Fig.5-17 Extracted and Final letter  (10/5/2025, week 3)

Fig.5-18 Type & Play in PDF (10/5/2025, week 3)

• Poster

Fig. 5-19 Final Poster (13/5/2025, week 4) 

Fig.5-20 Final Poster  PDF (13/5/2025, week 4) 

---

FEEDBACK

Week 1 - Absence with valid reasons

Week 2 - I got advice following: 1. Cleaning and completing the main circles to express the system "Dilational." 2. Radial, axial, transitional, and bilateral are incorrect ways, so study and do it again. After receiving advice, I finished Axial One and got ok. However, the radial system is still wrong. In addition to this, the teacher explained how to make letters on the curve bigger without despairing letters at the end when I asked. I learned I have to adjust the direction and the length of the line to do that.

Week 3 - We got feedback on type and play by posting on Facebook. My specific advice is to decide which elements is more important in the original pictures. For example, If you focus on the butterfly shape at 80% and the bubble shape at 20%, which works. However, if the ratio was half and half, that wouldn't work. Based on this advice, I review the tracing picture and extract it again. Also, I was advised to ignore the detail but to focus on shape itself.

Week 4 - My personal advice given by the teacher is to bring the title to the middle, top middle, or bottom middle in order to enhance the importance. The credit size is too small so make it bigger. After placing the text and title in the right place, decide on the others elements like background. By doing so good visual poster would be created.

---

REFLECTION

Experience

Using 8 systems, especially random, radial, and dilational, was difficult for me. Radial and dilational are similar to each other because both focus on the circle as a base. However, I came to understand by looking at many examples. As for the random, I read the book by Kimberly Elam, followed the instructions, and created. As the process goes, I could enjoy experimenting with composition. Creating letters was enjoyable because I could see the evolution from the extracted shapes to the final outcome close to the reference. In this task, I enjoyed creating the poster the most because combining the letter created by myself and the picture I used looks like the actual movie poster.

Observation
I noticed that 8 systems are very simple, but they have the potential to make compositions better depending on how you apply them. At first attempt, my works are kind of boring and ambiguous about the systems, but as I try and see examples, I could improve them by focusing on how to apply the important elements of the systems, space, kerning, and so on. Each of these elements may seem small on their own, but I learned that when combined, they can greatly impact the overall quality of a work.

I also learned recent film industry and other fields, there is a growing demand for original typography. The Type & Play assignment is practical and challenging but, I’m glad that I learned how to maintain legibility while highlighting unique characteristics.

Finding
I have a habit of overthinking when I don't understand something, but I realized the importance of just starting to work with my hands and improving the design after looking at examples or reading. Even if I don't know exactly how to apply a method, trying it out helps me improve. I also learned that it is essential to balance uniqueness with legibility when creating my original letters. Basic systems are simple, depending on how they are applied, the outcome can be much more attractive. I want to keep challenging myself and pushing forward.

---

FURTHER READING

Fig.5-1 Typographic Systems by Kimberly Elam (2007)

Fig.5-2 Random system (p72)

I was not sure how random system work, so I read this section and summarized points when creating this system. This system consists of elements that are arranged without specific aim, pattern,n, initiative, and such. Random elements are often

• overlapped 
• cropped
• angled
• textured 
• not horizontal 
• not aligned
• not patterned

Initial phase: leaving the lines of text on a horizontal baseline or only slightly angled.

Intermediate phase: Experimenting with multiple angle and overlapping lines, which reduce legibility. Also focusing on composition and position of white space.

Advanced phase: Pushing the sense of randomness to illegibility by repeating and breaking the line into individual words and into compositions of individual characters.

The line of text become important in terms of the shapes and negative space they create.

Note: texture refers to the visual density, rhythm, and overall visual impression of a block of text.

Fig.5-3 Finding Type: A Novel Typographic Exercise

According to Mr.Vinod, custom typefaces tend to be used in movies and games for branding purposes, making them a new area of focus these days. Here is the reference in the article to create customized letters:

• Finding an image
• Deconstructing an image
• Identifying letterforms
• Extracting letterforms
• Identify a reference
• Refining letterforms: Introduce consistency in height, width and contrast. Deliberate on retaining or removing characteristics. Decide what areas require simplification.