Advanced Typography - Task 1/Exercises

April 14, 2024

Advanced Typography - Task 1/Exercises

24.04.2024 - 15.05.2024 / Week 1 - Week 4

Siang Huey Yee / 0369549

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

Task 1: Exercise 1 & Exercise 2 - Typographic Systems & Type & Play

OUTLINE

LECTURES

BACK TO OUTLINE

Week 0

Lecture Video 1: AdTypo-1 ~ Typographic System

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

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

Figure 1.1a Axial System (Source: type 365)

Figure 1.1b Axial System (Sample from student)

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

Figure 1.2a Radial System (Source: type 365)

Figure 1.2b Radial System - with multiple point of focus (Sample from student)

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

Figure 1.3a Dilatational System (Source: type 365)

Figure 1.3b Dilatational System (Sample from student)

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

Figure 1.4a Random System

Figure 1.4b Random System (Sample from students)

Grid System: A system of vertical and horizontal divisions.

Figure 1.5a Grid System

Figure 1.5b Grid System (Sample from student)

Transitional System: An informal system of layered banding.

Figure 1.6a Transitional System (Source: type 365)

Figure 1.6b Transitional System (Sample from students)

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

Figure 1.7a Modular System

Figure 1.7b Modular System (Sample from students)

Bilateral System: All text is arranged symmetrically on a single axis (normally being used for invitation cards or other formal invites).

Figure 1.8a Bilateral System

Figure 1.8b Bilateral System (Sample from students)

Week 1

Class Summary (Week 1- 24/4/2024)

During the physical class session of Week 1, Mr. Vinod gave a short briefing regarding the Module Information Booklet and Rules that he advised us to follow in order to complete this module.
After the short briefing, Mr. Vinod asked us to watch Lecture Video 1 in class for those who haven't watched it yet.
Then, Mr. Vinod asked us to complete Task 1 Exercise 1, which involves the 8 Typographic Systems, and each system requires at least 2 sketches by next week. We are required to choose the final preferred design for each system and export it to PDF.

Week 2

Class Summary (Week 2- 1/5/2024)

Although it's a public holiday, Mr. Vinod still held a short online Zoom meeting to provide feedback on our Task 1 Exercise 1 - Typographic Systems.
Mr. Vinod also gave a brief overview of the next exercise, Task 1 Exercise 2 - Type & Play.

Lecture Video 2: AdTypo-2 ~ Typographic Composition

Typographic Composition

Principle of Design Composition

Emphasis

Figure 2.1 Principle of Design Composition - Emphasis

Isolation

Repetition

Balance (Symmetry and Asymmetry)

Alignment

Perspective

Rhythm

Contrast

The Rule Of Third

is a photographic guide to composition
divided into 3 columns and 3 rows
intersecting lines are used as guide to place points of intersect

Figure 2.2a Rule of Thirds 1

Figure 2.2b Rule of Thirds 2

Typographic Systems

From the 8 systems, the most pragmatic and the most used system is the Grid System (or Raster System), which is derived from the gridded compositional structure of Letter Press printing

Figure 2.3 Typographic Systems - Grid System

Post-modernist era in Typographic Systems - Chaos, Randomness, Asymmetry

Legibility and Readability were relegated
Proponents: David Carson, Paula Scher, Jonathan Barnbrook

Figure 2.4 Example of post-modernist era in Typographic Systems (Left to Right: Paula Scher, Jonathan Barnbrook, David Carson)

Other models / Systems

Environmental Grid

based on the exploration of an existing structure or numerous structures combined

Figure 2.5 Example of Environmental Grid (From Book: Typographic Form and Communication, pp 211)

Form and Movement

based on the exploration of an existing Grid Systems
the placement of a form (irrespective of what it is) on a page, over many pages creates movement

Figure 2.6a Example of Form and Movement 1

Figure 2.6b Example of Form and Movement 2

Week 3

Class Summary (Week 3- 8/5/2024)

Mr. Vinod provided a feedback session on Exercise 2 - Type & Play after we uploaded our progress on the Facebook Group.
He asked us to refine both Exercise 1 and Exercise 2 before Week 4.

Lecture Video 3: AdTypo-3 ~ Context & Creativity

Context and Creativity

The first mechanically produced letterforms were designed to directly imitate handwriting. Handwriting would become the basis or standard for form, spacing and conventions mechanical type would try and mimic.

Figure 3.1 Evolution of Latin Alphabet

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

the earliest system of actual writing
was used in a number of languages between the 34C. B. C. E. through the 1st century C. E.

Figure 3.2 Cuneiform

Hieroglyphics (2613-2160 B. C. E.):

Egyptian writing system
fused with art of relief carving
the system was a mixture of both rebus and phonetic characters - the first link to a future alphabetic system
Ideograms - to represent the things they actually depict
As determinatives to show that the signs preceding are meant as phonograms and to indicate the general idea of the word
Phonograms - to represent sounds that "spell out" individual words

Figure 3.3 Hieroglyphics

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

built on the Egyptian logo-consonantal system
the Phoenicians developed a phonetic alphabet consisting of 22 letters
drawn freehand, not constructed with compasses and rule, and they had no serifs
In time the strokes of these letter grew thicker, the aperture lessened, and serifs appeared

Figure 3.4 Early Greek

Roman Uncials:

By the 4th century, Roman letters were becoming more rounded
the curved form allowed for less strokes and could be written faster

Figure 3.5 Roman Uncials

English Half Uncials (8th C.):

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

Figure 3.6 English Half Uncials

Carolingian Minuscule:

Capitals at the start of a sentence, spaces between words and punctuation
was used for all legal and literary works to unify communication between the various regions of the expanding European empire
it was this style that became the pattern for Humanistic writing of the fifteenth century; this latter, in turn was the basis of our lower-case roman type

Figure 3.7 Carolingian Minuscule

Figure 3.8 Carolingian Minuscule

Black Letter (12-15 C. CE):

characterized 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

Figure 3.9 Black Letter

Figure 3.10 Black Letter

Movable Type (11 C. - 14 C.) :

printing (wood block) had already been practiced in China, Korea and Japan
the Koreans establish a foundry to cast movable type in bronze - allowed the dismantling and resetting of text

Figure 3.11 Movable Type

Evolution of Middle Eastern Alphabets:

the Phoenician letter marks a turning point in written language, use of sound represented in letters, the script itself has been possibly influenced by the Egyptian Hieroglyphics and Hieratic Scripts

Figure 3.12 Middle Eastern Alphabets

Evolution of the Chinese script:

from the Oracle bone to Seal Scripts to Clerical Script
Traditional and Simplified scripts

Figure 3.13 Evolution of the Chinese Script

Indus Script Seals:

The oldest writing found in the 'Indian' subcontinent the Indus Valley Civilization (IVC) script (3500-2000 BCE)

Figure 3.14 Example of Indus Script Seals

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

Figure 3.15 Brahmi Script

Southeast Asia Scripts:

Pallava (or Pallawa in Malay)

they were a few , but the most important would be Pallava
a South Indian script originally used for writing Sanskrit and Tamil
was highly influential, becoming the basis for writing systems across Southeast Asia

Figure 3.16 Pallava

Pra-nagari

early form of Nagari script
used in India for writing Sanskrit

Figure 3.17 Pra-nagari

Kawi

Indonesia's most important historical script: Kawi
The word Kawi comes from the Sanskrit term kavya meaning poet
used for contact with other kingdoms
become the basis of other scripts in both Indonesia and the Philippines

Figure 3.18 Kawi

Jawi :

the Arabic-based alphabet
allowed it to spread among the upper and middle class in the trading ports

Figure 3.19 Jawi

Programmers and Type Design:

more vernacular scripts are. being produced by software giants (Google)
more and more vernacular and "mult-script" typefaces are being produced to cater to situations where the written matter is communicated in the vernacular script or vernacular and Latin scripts

Figure 3.20 Programmers and Type Design

Week 4

Class Summary (Week 4- 15/5/2024)

Mr. Vinod conducted a feedback session on Task 1 Exercise 2 - Type & Play for the Film Poster we created from our extracted letterforms after we uploaded our progress to the Facebook Group.
He asked us to refine both Exercise 1 and Exercise 2, ensuring that we complete both of these exercises from Task 1.
Mr. Vinod also provided a briefing on the next task, Task 2 - Key Artwork.

Lecture Video 4: AdTypo-4 ~ Designing Type

Designing Type

Two reasons for designing a typeface:

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

Frutiger typeface (1968):

'Adrian Frutiger' - a renowned twentieth century Swiss graphic designer, his valued contribution to typography includes the typefaces; Univers and Frutiger
Frutiger - a sans serif typeface designed by the Swiss type designer Adrian Frutiger in 1968 specifically for the newly built Charles and Gaulle International Airport in France
Purpose - "The goal of this new typeface was create a clean, distinctive and legible typeface that is easy to see from both close up and far away. Extremely functional."
Considerations/Limitations - letterforms needed to be recognized even in poor light conditions or when the reader was moving quickly past the sign

Figure 4.1 Univers and Frutiger (Left: Univers by Adobe Illustrator, InDesign (2015); Right: Airport Signage using Frutiger)

Figure 4.2 Example of Frutiger typeface 1

Figure 4.3 Example of Frutiger typeface 2

Verdana typeface (1996):

designed by Matthew Carter, who is son of the Harry Carter in 1996
many of Carter's fonts were created to address specific technical challenges, for example those posed by early computers
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 -

exhibit characteristics derived from the pixel rather than the pen, the brush or the chisel
commonly confused characters: i, j, l

Figure 4.4 Georgia (Top/Right) and Verdana (Bottom/Left)

Figure 4.5 Example of Verdana typeface 1

Figure 4.6 Example of Verdana typeface 2

Johnston Sans typeface (1916):

Edward Johnston is the creator of this hugely influential London typeface, original named "Underground" typeface
He was asked to created a typeface with "bold simplicity" that was truly modern yet rooted in tradition
completed in 1916, combined classical Roman proportions with humanist warmth
Purpose -

London's Underground railway ordered a new typeface for its posters and signage from the calligrapher Edward Johnston
He handed over details and examples of letter shapes that would set the tone for printed text until the present day

Considerations/Limitations -

"Johnston's remit was to unite the London Underground Group, the different companies all using the same rails and tunnels"
"All the advertising, all the signage was all completely different - there was this cacophony of letters"
Johnston applied the proportions of Roman capital letters to his typeface, so it was rooted in history, rooted in traditional calligraphy
but it has an elegance and simplicity that absolutely fitted the modern age

Figure 4.7 London Underground Exit Sign

Figure 4.8 Digitised version of the Johnston Sans typeface

Figure 4.9 Johnston Sans typeface

General Process of Type Design:

Research

understand type history, type anatomy, and type conventions
important to determine the type's purpose or what it would be used for and what different applications it will be used in, such as whether the typeface is for school buses or airport signages, etc.
examine existing fonts that are presently being used for inspiration/ideas/reference/context/usage pattern/etc.

Figure 4.10 Research

2. Sketching

Two methods:

sketch typeface using traditional tool set (brushes/ pens, ink and paper) and scan them for digitization
sketch typeface using digital tool sets (such as Wacom) which directly into a font design software

Figure 4.11 Sketching

3. Digitization

Professional Software that are used in the digitization of typefaces: FontLab and Glyphs
some designers also use Adobe Illustrator to design or craft letterforms
Attention should not only be given to the whole form at this stage but also to the counter form as the readability of the typeface are heavily dependent on it

4. Testing

important component in the design thinking process
is part of the process of refining and correcting aspects of the typeface
Prototyping is also part of the testing process and leads to important feedback
depending on the typeface category (display type/text type) the readability and legibility of the typeface becomes an important consideration

Figure 4.12 Prototype Stencil (Stenz) - Testing (developed and designed Vinod J. Nair)

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 so that the teething issue remain minor

Figure 4.13 Prototype Number Plate Typeface (Car license registration) - Deploy (Myno & Nomy designed by Vinod J. Nair, 2018)

Typeface 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
using grids (with circular forms) can facilitate the construction of a letterforms and is a possible method to build/create/design your letterforms

Figure 4.14 Construction grid for the Roman Capital (8x8 cells)

Construction and Considerations:

classifications according to form and construction
different forms and constructions must be taken into account when designing a new type
an important visual correction is the extrusion of curved (and protruding) forms past the baseline and cap line
also applies to vertical alignment between curved and straight forms
Fitting the type - a visual correction is also needed for the distance between letters, the letters must be altered to a uniform 'visual' white space (the white space between the letters should appear the same

Figure 4.15 Classification according to form and construction

Figure 4.16 Fitting the type

The consideration when creating a typeface cannot be covered in its entirety in a single lecture or in a couple of slides

Figure 4.17 Letter Fountain page

Figure 4.18 Considerations

INSTRUCTIONS

BACK TO OUTLINE

Module Information Booklet

Task 1: Exercise 1- Typographic Systems

BACK TO OUTLINE

For this Exercise 1, we are required to explore the 8 Typographic Systems mentioned below and use the content provided in the MIB. Additionally, there are 3 topics to choose from, of which we are required to select only one to proceed with the exercise.

Axial System
Radial System
Dilatational System
Random System
Grid System
Modular System
Transitional System
Bilateral System

Topics:

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

Requirements:

This exercise task are required to be done in Adobe InDesign.
Size 200 x 200 mm.
In addition to black, you can use one other colour.
Graphical elements (line, dot, etc.) can be used but limitedly.

1) Digitisation (Adobe InDesign)

I have chosen the third topic among 3 topics which is Russian Constructivism and Graphic Design.

Axial System

The figures below showed my progress in attempting the Axial System in Adobe InDesign.

Figure 1.1a Axial System Attempts Progress, Week 1 (24/04/2024)

My Attempts:

Figure 1.1b Attempt #1 (Axial System), Week 1 (24/04/2024)

Figure 1.1c Attempt #2 (Axial System), Week 1 (24/04/2024)

Radial System

The figures below showed my progress in attempting the Radial System in Adobe InDesign.

Figure 1.2a Radial System Attempts Progress, Week 1 (24/04/2024)

My Attempts:

Figure 1.2b Attempt #1 (Radial System), Week 1 (24/04/2024)

Figure 1.2c Attempt #2 (Radial System), Week 1 (24/04/2024)

Dilatational System

The figures below showed my progress in attempting the Dilatational System in Adobe InDesign.

Figure 1.3a Dilatational System Attempts Progress, Week 1 (24/04/2024)

My Attempts:

Figure 1.3b Attempt #1 (Dilatational System), Week 1 (24/04/2024)

Figure 1.3c Attempt #2 (Dilatational System), Week 1 (24/04/2024)

Random System

The figures below showed my progress in attempting the Random System in Adobe InDesign.

Figure 1.4a Random System Attempts Progress, Week 1 (24/04/2024)

My Attempts:

Figure 1.4b Attempt #1 (Random System), Week 1 (24/04/2024)

Figure 1.4c Attempt #2 (Random System), Week 1 (24/04/2024)

Grid System

The figures below showed my progress in attempting the Grid System in Adobe InDesign.

Figure 1.5a Grid System Attempts Progress, Week 1 (24/04/2024)

My Attempts:

Figure 1.5b Attempt #1 (Grid System), Week 1 (24/04/2024)

Figure 1.5c Attempt #2 (Grid System), Week 1 (24/04/2024)

Modular System

The figures below showed my progress in attempting the Modular System in Adobe InDesign.

Figure 1.6a Modular System Attempts Progress, Week 1 (24/04/2024)

My Attempts:

Figure 1.6b Attempt #1 (Modular System), Week 1 (24/04/2024)

Figure 1.6c Attempt #2 (Modular System), Week 1 (24/04/2024)

Transitional System

The figures below showed my progress in attempting the Transitional System in Adobe InDesign.

Figure 1.7a Transitional System Attempts Progress, Week 1 (24/04/2024)

My Attempts:

Figure 1.7b Attempt #1 (Transitional System), Week 1 (24/04/2024)

Figure 1.7c Attempt #2 (Transitional System), Week 1 (24/04/2024)

Figure 1.7d Attempt #3 (Transitional System), Week 1 (24/04/2024)

Bilateral System

The figures below showed my progress in attempting the Bilateral System in Adobe InDesign.

Figure 1.8a Bilateral System Attempts Progress, Week 1 (24/04/2024)

My Attempts:

Figure 1.8b Attempt #1 (Bilateral System), Week 1 (24/04/2024)

Figure 1.8c Attempt #2 (Bilateral System), Week 1 (24/04/2024)

Final Submission - Typographic Systems

Figure 1.9 Final Combination of 8 Typographic Systems (Uploaded on Facebook)

Figure 1.10 Axial System, Week 2 (01/05/2024)

Figure 1.11 Radial System, Week 2 (01/05/2024)

Figure 1.12 Dilatational System, Week 2 (01/05/2024)

Figure 1.13 Random System, Week 2 (01/05/2024)

Figure 1.14 Grid System, Week 2 (01/05/2024)

Figure 1.15 Modular System, Week 2 (01/05/2024)

Figure 1.16 Transitional System, Week 2 (01/05/2024)

Figure 1.17 Bilateral System, Week 2 (01/05/2024)

Figure 1.18 Typographic Systems (With Grid) - PDF, Week 3 (8/05/2024)

Figure 1.19 Typographic Systems (Without Grid) - PDF, Week 3 (8/05/2024)

Task 1: Exercise 2- Type & Play

BACK TO OUTLINE

This task required students to choose an image of a man-made object, structure, or natural element. They will analyze, dissect, and identify potential letterforms within the image, then digitize them. Through iteration, the forms will evolve from crude to refined representations, reflecting their origins.

After creating the letterforms, students will integrate them with the image used to extract the letters. The goal is to strengthen the interaction between the letterforms and the visual. The text should form a symbiotic relationship with the image.

1) Original Image

Figure 2.1 Original Image - Leaf, Week 2 (01/05/2024)

2) Sketch

Figure 2.2 Sketch - Extracted Letterforms, Week 2 (01/05/2024)

3) Digitisation (Adobe Illustrator)

Figure 2.3 Extracted Letterforms (Progress 1), Week 2 (01/05/2024)

Figure 2.4 Angle Adjustments (Progress 2), Week 2 (01/05/2024)

Figure 2.5 Adjusting Stroke Height (Progress 3), Week 2 (01/05/2024)

Figure 2.6 Refined Letterforms (Progress 4), Week 2 (01/05/2024)

Figure 2.7 Final Type Design (Progress 5), Week 2 (01/05/2024)

Figure 2.8 Final Type Design (Entire Process), Week 2 (01/05/2024)

After receiving feedback from my lecturer, Mr. Vinod, I realized I had approached this task incorrectly. Mr. Vinod pointed out that my work did not reflect the origin of the image, which was the leaf. Consequently, I made modifications to my type design.

4) Modification

Figure 2.9 Extracted Letterforms (Modified Version), Week 3 (08/05/2024)

Figure 2.10 Adjustments and Refinement Letterforms (Modified Version), Week 3 (08/05/2024)

Figure 2.11 Final Type Design Overall Progress, Week 3 (08/05/2024)

Figure 2.12 Final Type Design, Week 3 (08/05/2024)

5) Poster

Figure 2.13 My Poster Attempt 1, Week 4 (15/05/2024)

During the Week 4 feedback session, following feedback from my lecturer, Mr. Vinod suggested that I increase the font size of the movie poster's title "LEAF" to make it bigger and clearer. Additionally, he encouraged me to experiment with a few more types of alignment for the contents of the poster.

Therefore, I have create another few attempts of the alignment of the poster.

Figure 2.14 My Poster Attempt 2, Week 4 (15/05/2024)

Figure 2.15 My Poster Attempt 3, Week 4 (15/05/2024)

Figure 2.16 My Poster Attempt 4, Week 4 (15/05/2024)

Figure 2.17 My Poster Attempt 5, Week 4 (15/05/2024)

Final Poster

Figure 2.18 Final Poster - JPEG, Week 4 (15/05/2024)

Figure 2.19 Final Type Design and Final Poster - PDF, Week 4 (15/05/2024)

FEEDBACK

BACK TO OUTLINE

Week 2: Exercise 1- Typographic Systems

Specific Feedback: -

General Feedback:

Mr. Vinod has advised against enlarging the size of the number because it wasn't the most important information among all the information provided.

Week 3: Exercise 2- Type & Play

Specific Feedback:

Mr. Vinod has advised me to redo my type and play exercise. The font I designed did not meet the requirements because it did not represent the original image, which is a leaf. Therefore, I have been asked to make modifications to my font design.

General Feedback:

Mr. Vinod has asked us to update our further reading in the e-portfolio.

Week 4: Exercise 2- Type & Play (Poster)

Specific Feedback:

Mr. Vinod advised me to increase the font size to make it stand out and clearer. He recommended that I experiment with different alignments for the content of the poster and choose a final design that is better suited as the final poster.

General Feedback:

Mr. Vinod has asked us to ensure that our typography integrates well with the background image of the poster, and the images are required to be related to the extracted letterforms used in our poster.

REFLECTIONS

BACK TO OUTLINE

Experience

While completing Task 1, I gained new knowledge about typographic systems, discovering eight typographic systems including Axial, Radial, Dilatational, Random, Grid, Modular, Transitional, and Bilateral systems. I encountered challenges during Exercise 1, where I was initially confused about the difference between the grid system and modular system, leading to some incorrect layout designs of typographic systems. Additionally, I faced challenges in ensuring my design was unique, as I am avoiding commonalities with classmates' work. Furthermore, I learned to create typefaces by extracting letterforms from an image, selecting a leaf as my reference image and designing letterforms based on its veins. I enjoyed Exercise 2, though encountered difficulties in extracting letterforms initially, resulting in a refined type that did not effectively convey the image of a leaf. After receiving feedback from my lecturer, Mr. Vinod, I revised my typeface by incorporating leaf veins into the letters to better represent a leaf.

Observations

Through Task 1, I also observed that emphasizing text involves more than just enlarging the size or changing the colour; we should also consider alignment, balance, and other factors to make the text more readable and focused for the readers. Moreover, in Exercise 2, I learned to observe the representation of an image. Our lecturer also have mentioned in class that simply extracting letterforms from the outline, such as leaf veins or flower petals, may not sufficiently evoke the original form of the item. Therefore, we should explore further to create letterforms that better represent the selected item from our chosen image. I improved the resemblance of my leaf by adding leaf veins to the letterforms instead of just outlining the veins.

Findings

Throughout Task 1 exercises, I discovered that I have gained a deeper understanding of typography. Learning about typographic systems has inspired me to approach layout design with more creativity, avoiding simple and boring alignments of text. Additionally, through the Type and Play exercise, I realized that I pay attention to smaller details when refining letterforms for the final poster, such as leading, balance, and alignment. I also focus more on integrating letterforms and images for the final poster, learning to create a poster with better harmonization and combination.