Advanced Typography

1/4/25 - 6/4/25 (Week 1 - Week 3)

Kimberly Miaw Jya Nee | 0366836

Bachelor of Design (Honours) in Creative Media | Taylor's University

Task 1: Exercises - Typographic Systems & Type & Play (20%)

[Table of Contents]

1. Lectures

2. Instructions

3. Task

Exercise 1: Typographic Systems

Exercise 2: Type & Play

4. Feedback

5. Reflection

6. Further Readings

7. Quick Links

[Lectures]

AdTypo_1_Typographic Systems

Advance Typography: Typographic Systems

All design is based on a structural system
8 major variations with an infinite number of permutations

Axial System: elements are on the left/ right/single axis
Radial System: elements are extended from a point of focus
Dilatational System: elements expand from 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 (basically segregating information within certain bands)
Modular System: a series of non-objective elements that are constructed in as a standardised units
Bilateral System: all text is arranged symmetrically on a single axis

Typographical organisation is complete because the elements are dependent on communication in order to function (+ hierarchy, order of reading, legibility, contrast)
Typographic systems are akin to what architects term "shape grammars"

Conclusion:

An understanding of the systems organization process allows the designer to break free from "the rigid horizontal and vertical grid systems of letter press" (Elam, 2007). It allows designers to use more fluid means to create typographic messages.

AdTypo_2_Typographic Composition

Advance Typography: Typographic Composition

Arrangement of textual information in a given space

Principles of Design Composition

Emphasis: Can be translated easily as a layout
Repetition / Perspective: Notions that are not that conducive (easily usable) when it comes to typographic composition

Rule of Thirds

Photographic guide to composition
Frame (space) can be divided to 3 column 3 rows
Intersecting lines are used as guide to place the points of interest, within the given space.
Realistically no one would ever use rule of thirds when there are other more favourable options.

Most Used System:

Grid System (Raster System in German)

Derived from the guided compositional structure of Letter Press printing
Further enhanced by what is now termed as the Swiss (Modernist) style of Typography
May seem old / rigid, but the versatility of the system and its modular nature tends to allow an infinite number of adaptations (to some degree)

Other Models / Systems

Environmental Grid

Based on the exploration of an existing / numerous structures combined
An extraction of crucial lines both curved and straight are formed
The designer then organises the information around this super-structure (includes non-objective elements)

Form & Movement

Based on the exploration of an existing Grid Systems
To explore; the multitudes of options the grid offer; to dispel the seriousness surrounding the application of the grid system; and to see the turning pages in a book as a slowed- down animation in the form that constitutes the placement of image, text and colour.
The placement of a form (irrespective of what it is) on a page over many pages creates movement (paper/screen)

How is it Helpful in Typographical Composition?

Develops a unique layout, composition , creates excitement (as long theres a sequence to the viewing of the particular pages)
Any shape is possible
Care must be taken to reduce how the decorative the elements are
Complexity increases as new elements are introduced

AdTypo_3_Context&Creativity

Advance Typography: Context & Creativity

Handwriting

First mechanical letterforms imitated handwriting
Set standards for form, spacing, conventions in type
Shapes influenced by writing tools/materials
Writing surface also affects form

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

Earliest actual writing system
Used 34th C. B.C.E. to 1st C. C.E.
Written left to right
Wedge shapes made by reed stylus on wet clay

Hieroglyphics (2613–2160 B.C.E.)

Egyptian system fused with relief carving
Mix of rebus + phonetic characters

Used in 3 ways:

Ideograms – depict actual things
Determinatives – clarify meaning/sound
Phonograms – represent sounds

Early Letterforms

Early Greek (5th C. B.C.E.)
Roman Uncials (TH C.)
English Half Uncials (8th C.)
Black Letter (12–15th C.)

Movable Type (11–14th C.)

Woodblock printing in China, Korea, Japan since 750 (Dharani Sutra)
Diamond Sutra (868): earliest printed book + illustration
Late 14th C.: Korea cast movable type in bronze
Korea succeeded with Han’gul where China didn’t
Movable type innovation began 1000–1100 C.E. in East Asia
Korea's bronze foundry predated Gutenberg (1439)

Greek vs. Egypt / Near East

19th C. British colonial bias elevated Greece/Rome
Downplayed African, Egyptian, and Asian influence
E.g., Indology built on colonial views (e.g., Aryan theory)
Similar issues: Classicism, Egyptology, Africanism, Orientalism

Phoenicia

Present-day Syria, Lebanon, Israel

Southeast Asian Scripts

Oldest were Indian: especially Pallava (Sanskrit, Tamil)
Pallava influenced SE Asian writing systems
Also used: Pra-nagari (early Nagari for Sanskrit)

Nusantara & Kawi

Not all borrowed: Kawi script was indigenous to Java
“Kawi” from kavya (poet)
Kawi = widespread contact script in Indonesia & Philippines
Malay Peninsula used Indian scripts & Kawi for Old Malay

Jawi in Malaysia

Jawi used in famous Malay literature (hikayat, charm books)
Malaysia lacks large pre-Jawi inscriptions
Leads to false idea that Jawi is "original" script
All writing systems have influences—none are fully original

Why Study Handwriting?

Basis of early type design
Mimicked in form/spacing of mechanical type
Asia neglected its heritage due to Western tech adoption
Old texts hard to print without resources

Modern Script Revival

Rise of Eastern coders = indigenous scripts on digital devices
Mobile and computers now support more local writing systems

Conclusion

Creativity + originality are linked
Designers should explore their own history, culture, community
Don’t blindly adopt irrelevant styles
Start with local surroundings + shared histories for inspiration

[Instructions]

[Task]

Exercise 1: Typographic Systems

For our first exercise, we were required to understand the 8 systems of

visual organization and apply it using the content and theme given.

Extra notes:

Use Adobe Indesign
Size: 200 x 200 mm
Only black + one other colour
Graphical elements (line, dot, etc.) can be used but limitedly

Explore the 8 systems 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

Process Work

Research

Fig. 1. Inspiration / Reference from Typographic Systems Book

Before I began exploring the 8 systems, I went through Typographic Systems by Kimberly Elam. I came across many good examples in the book, and each system is accompanied by detailed explanations.

Fig. 2. 8 Typographic Systems (Week 2)

Above is a compilation of the 8 typographic systems I have designed. I chose The ABCs of Bauhaus Design Theory as my theme because I resonated with Bauhaus's approach, as I prefer minimal, geometric designs. Though, it’s not easy to create a Bauhaus-inspired design.

1. Axial

Fonts Used: Univers LT Std

Fig. 3. Axial System (Week 2)

2. Radial

Fonts Used: Serifa Std

Fig. 4. Radial System (Week 2)

3. Dilatational

Fonts Used: ITC New Baskerville Std

Fig. 5. Dilatational System (Week 2)

4. Random

Fonts Used: Gill Sans

Fig. 6. Random System (Week 2)

5. Grid

Fonts Used: Univers LT Std

Fig. 7. Grid System (Week 2)

6. Modular

Fonts Used: Futura Std

Fig. 8. Modular System (Week 2)

7. Transitional

Fonts Used: Adobe Caslon Pro

Fig. 9. Transitional System (Week 2)

8. Bilateral

Fonts Used: ITC Garamond Std

Fig. 10. Bilateral System (Week 2)

Final Compilation for Exercise 1

Fig. 11. Final Compilation of Exercise 1 With Grids - PDF (Week 2)

Fig. 12. Final Compilation of Exercise 1 Without Grids - PDF (Week 2)

Exercise 2: Type & Play - Finding Type

For the second exercise, we were required to analyse, dissect and identify potential letterforms within the image we have chosen. Then, we would have to refine the letters that would better reflect its original characteristics.

Process Work

Since we can choose between images from nature or manmade objects, I made a list of potential options to explore.

Nature

Hydrangeas
Beehive
Spiderweb
Corals
Red cabbage (cross section)
Cells in microscopic view
Butterfly / dragonfly (insect) wings
Vines / moss
Seaweed
Ferns
Coriander

Manmade

Rattan weaving
Kitchen grater / microplane
Lace
Pencil shavings

Ultimately, I decided to go with cicada wings because I find their texture unique, similar to dragonfly wings, but with larger and more pronounced details.

Fig. 13. Cicada Wings (Week 3: 5/5/25)

These are the first versions of the letters I extracted based on the vein outlines of the cicada wings. I also selected a reference font to guide the design of my letterforms.

Fig. 14. CICADA - First Version (Week 3: 6/5/25)

I wanted the letters to subtly reflect the texture of insect wings, so I used the reference font as a base and rounded certain corners. This gave the letterforms a structured appearance while still retaining gentle, curving details. I was especially fond of the letter "C" in this version as it reminded me of insect legs with the way its tail curved.

Fig. 15. CICADA - First Version Final Letterforms (Week 3: 6/5/25)

Mr Vinod gave feedback on our letterforms during Week 3's tutorial. He suggested that I use the texture of the wings themselves to form the letters, rather than relying on their outlines. This approach would result in thicker letterforms with intricate line details inside. He also advised me to first understand the basic structure of each letter, create the forms, and then apply the textures in a way that reflects the characteristics of the original image.

Fig. 16. CICADAS - Second Version (Week 3: 11/5/25)

For this new version of my letterforms, I applied the same corner-rounding adjustments from version #1. While some of the rounded edges are quite subtle, I think these small details significantly affect the overall appearance of the letters. This time, I used the semibold italic version of the font and hollowed out the letterforms to add internal detailing.

Fig. 17. CICADAS - Second Version Final Letterforms (Week 3: 11/5/25)

Once we completed our letterforms, we have to create a movie poster using the letterforms, with a background image that is the basis of the extracted letters. This is to enhance / support the interplay between the letterforms and our selected image.

*Note: Size of poster is 1024px x 1024px (Export JPG 300ppi)

I decided to use this close-up image of a cicada that I found on Cosmos as the background for my movie poster. Original photograph by Lyndon French (@_lyndonfrench_ on Instagram).

Fig. 18. Photograph by @_lyndonfrench_ on Instagram (Week 3: 5/5/25)

I began creating the movie poster in Illustrator. First, I added logos such as Dolby Atmos, IMAX, and Universal Studios to make it look more realistic. Then, I wrote a billing block at the bottom of the poster. I also included a short tagline for the "movie" and credited myself as the filmmaker.

Fig. 19. Process of Creating the Movie Poster (Week 4: 12/5/25)

For the final touches, I added effects to the letterforms to roughen the edges and enhance the overall texture of the word. I also added shadows behind the white letterforms to make them stand out more against the light background. The same effect was applied to the tagline and billing block text.

Final Compilation for Exercise 2

Fig. 20. Final Compilation of Exercise 2 Process - PDF (Week 4: 12/5/25)

Fig. 21. Final Movie Poster - JPEG (Week 4: 12/5/25)

Fig. 22. Final Movie Poster - PDF (Week 4: 12/5/25)

[Feedback]

Week 1 (22/4/25)

General Feedback:

Module + Task 1 briefing by Mr. Vinod. In class, we begin Exercise 1 of Task 1.

Specific Feedback:

This week, I mainly set up the blog post, updating it with lecture notes and I have also began doing a part of Exercise 1.

Week 2 (29/4/25)

General Feedback:

During class, Mr. Vinod gave feedbacks on Exercise 1 and briefed on Exercise 2, which is also the final exercise for Task 1.

Specific Feedback:

I need to quickly finish up the rest of Exercise 1 and also complete Exercise 2 by the end of week.

Week 3 (6/5/25)

General Feedback:

Exercise 2 feedback by Mr. Vinod. He commented that I should make the letters by using the texture of the wings itself, instead of the outlines. It will look like a thick letter, with line details inside. Understand the structure, create the letters, then add the textures to match it to the characteristics of the original image.

We also began doing the final step of this exercise which is to create a movie poster using the letters we have created.

Specific Feedback:

In class, I re-did my letters according to Mr. Vinod's feedback. Finish up the entire Task 1 by next class.

Week 4 (13/5/25)

General Feedback:

[Task 1 Blog Submission on Week 5] Mr. Vinod gave feedbacks on final Finding Type process and mock movie poster in class.

Specific Feedback:

I'm still not satisfied with my letterform this week so I did not post it in the Facebook group for feedback. I continued to refine my letters this week.

[Reflection]

Experience

Overall, I found these two exercises quite enjoyable. I went through a lot of trial and error during the first exercise while working with the eight systems. Reading Typographic Systems by Kimberly Elam really helped clarify what each system was about, especially after feeling stuck for a while. The second exercise was interesting. I liked having the freedom to choose our own image to dissect. While I'm not fully satisfied with the final outcome of my letterform, I honestly don’t have a clear idea on how to improve it further, so this version feels like the best I can do for now.

Observation

The eight typographic systems improved my understanding of typographic composition. I learned that text can be arranged in a way that forms a complete design. This approach makes the text visually engaging. Small changes within a composition can significantly affect how it looks and feels, so attention to detail is crucial.

Findings

I’ve realized that structured systems can still allow room for creativity. Each system offers its own logic, and working within those constraints actually helped spark new design ideas. I also discovered how important visual rhythm and hierarchy are in guiding the reader’s attention.

[Further Readings]

Typographic Systems by Kimberly Elam

Fig. 23. Typographic Systems Book Cover by Kimberly Elam

Overall, I found this book extremely helpful while working on the first exercise. It explains each typographic system in detail and provides plenty of examples showing how the systems are used in practice. I also appreciated how it breaks down the design process into different stages: starting, intermediate, and advanced. This progression helped me understand how a system can evolve into something more dynamic and less repetitive.

In the introduction, Kimberly Elam writes:

"Student designers at first find the systems strange and awkward because they rarely see them in print or screen communications. However, as work develops, an understanding of the system emerges that enables the creative potential of the system to be realized."

I found myself relating to this. At first, I struggled to come up with ideas for arranging the text. I wanted to experiment with unconventional layouts but quickly realized that it wasn't as easy as I thought. Eventually, I understood that the key is to explore, try out different compositions, colours, typefaces, and fonts. You can even combine elements from different systems to create something new.

[Quick Links]

Advanced Typography: Task 2
Advanced Typography: Task 3
Advanced Typography: Final Compilation & Reflection

Thank You