Advanced Typography: Task 1 Exercise

 21.04.2025 - 06.05.2025 (WEEK 1-3)

FEILYCIA JOY KURNIAWAN / 0373400 

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

Advanced Typography: Task 1 Exercise  



LECTURES

WEEK 1 - Typographic system

According to Kimberly Elam, there are 8 major variations with an infinite number of permutation, and those are : axial, radial, dilatational, random, grid, modular, transitional, bilateral. 

  • Typographical organization is complex, because the elements are dependent on communication in order to function, if there is no communication, there is no point for it to be there. 
  • Has a set of rules that is unique and provides a sense of purpose, takes away intuition from a teaching POV and provides a solid framework for learners to be guided in their exploration.  
> Axial System 
Elements are placed to the left / right of a single axis.

> Radial System 
Elements are extended from a point of focus.

> Dilatational System
Elements expands from a central point in a circular manner, can be multiple rings of circles with information on the sides.

> Random System
Elements appear to have no specific pattern, people who are very organized tend to have a hard time adapting into this system. Even though it is random, there is method of chaos.

> Grid System 
A system of vertical and horizontal divisions, there are different sizes and weight to create emphasis and hierarchy.

> Transitional System
Layer branding and an informal system, the layouts can be combined of 2 different systems.

> Modular System 
A series of non-objective elements that are constructed in as a standardised units. Modulars should be the fixed in the size so it allows you to move the portions of the page.

 > Bilateral System 
All elements are arranged symmetrically on a single axis.

Fig. 2.1. Typographic System, Week 1 (21/04/2025)

Many designers are more focused on the grid system and are unaware of the potential of the other system has. There are also more system outside of the ones that Kimberly Elam had mentioned. 

WEEK 2 - Typographic Composition


Principles of Design Composition 
emphasis, isolation, repetition, a/symmetry, alignment, perspective seems ambiguous when it comes to translating it into typographic compositions, not that it is impossible but it is easier to translate into other forms. 

  • Emphasis 
  • Rule of Thirds
  • Environmental grid : system based on the exploration of an existing structure/a number of structures combined.
  • Form and movement : system based on the exploration of an existing grid system. The placement of a form on a page, over many pages creates movement (screen/paper does not matter).
Fig. 2.2. Typographic Composition, Week 2 (28/05/2025)

WEEK 3 - Context and Creativity


Why is handwriting important?
Handwriting is the first mechanically produced letterform were designed to directly imitate handwriting and then become the standard for form, spacing and conversation mechanical type would try to mimic. 

Fig. 2.3. Evolution of the Latin Alphabet, Week 3 (05/05/2025)

  • Cuneiform (3000 BCE): the earliest system of actual writing 
  • Hieroglyphics (2613-2160 BCE): fused with the art to relied carving. A mixture of both rebus and phonetic characters. Can be used in 3 ways: as ideograms, as determinatives, as phonograms to represent sounds that "spell out" individual words. 
  • Early Greek (5th C.BCE): built on the Egyptian logo-consonantal system.
  • Roman Uncials (4th CE): Letter were becoming more rounded, the curved form allowed for less strokes and could be written faster. 
  • English Half Uncials (8th CE): evolved into a more slanted and condensed form. 
  • Emperor Charlemagne (8 CE): Handwriting broke down into diverse regional styles.
  • Carolingian Minuscule: was used for all legal and literary works to unify communication between various regions of the expanding European empire. 
  • Black Letter (12-15 C.CE): means gothic, condensing line spacing and reducing the amount of costly materials in book production. 
  • The Italian Renaissance: Humanist scholars in Italy were slowly reviving the culture of antiquity. 
  • Moveable Type (11-14 C): Printing had already been practiced in China, Korea and Japan. This type was introduces in the 1000-1100 CE.
Fig. 2.4. Evolution of Letters, Week 3 (05/05/2025)

  • Evolution of Middle Eastern Alphabets: marks a turning point in written language.
  • Evolution of the Chinese Script: from Oracle bone > seal script > clerical script, Traditional > simplified scripts.
  • Brahmi script: the earliest writing system developed in India after the Indus script.
Southeast Asia's Type Evolution:
  • Pallava / Pallawa (in Malay): basis for writing system across Southeast Asia.
  • Pra-nagari: used in India for writing Sanskrit. 
  • Kawi: comes from Sanskrit and used to contact with other kingdoms. The basis of other scripts in Indonesia and Philippines. 
  • Incung: original writing system in Kampung Kerinci
  • Jawi: arabic-based alphabet and was introduced along with Islam.

INSTRUCTION

<iframe src="https://drive.google.com/file/d/1bw_piZP0pNPP62UgXN5tuZZFDDqHSsIZ/preview" width="640" height="480" allow="autoplay"></iframe>


>Task 1 : Exercise 1 | Typographic System 

1. Axial

Fig. 3.1. Axial System Trial Spread, Week 2 (23/04/2025)

Firstly, I sketched out my ideas and then transfer it into Indesign. I wanted to make a simple but bent lines. After a little bit of experimenting, I got 4 layouts.

2. Radial

Fig. 3.2. Radial System Trial Spread, Week 1 (23/04/2025)

For me, this system is the one I had most fun with. After sketching out the ideas, I got one digital layout. But after hearing the feedbacks, I realized that I was not allowed to put the title inside the circle. So I changed the placements of the elements and turn down the intensity of the filled circle with just the outline. 

3. Bilateral

Fig. 3.3. Bilateral System Trial Spread, Week 1 (23/04/2025)

At first I was having trouble understanding what was the difference between bilateral, grids, and modular, but I eventually figured it out. Essentially, the bilateral system should symmetrical on both sides. 

4. Dilatational 

Fig. 3.4. Dilatational System Trial Spread, Week 1 (23/04/2025)

I had a few troubles making the dilatational system layout. I find that using the type on path tool needs a little bit of practice to get used to. Here, I wasn't sure where I was going. But after hearing the feedbacks I decided to break the elements so it will be more readable. 

5. Transitional 

Fig. 3.5. Transitional System Trial Spread, Week 1 (23/04/2025)

I also had some troubles understanding how to illustrate this system. At first, I thought the text should be wavy or should have a wave like texture (bottom left Fig 3.5.). And after Week 2 feedbacks, I figure it was "creating movements' in the text. 

6. Modular 

Fig. 3.6. Modular System Trial Spread, Week 1 (23/04/2025)

At first I tried to do a magazine-like layout (2 top right, Fig.3.6.) but after digitized it, I wasn't satisfied, so I tried a more loose layout and played with the graphics (2 bottom right, Fig. 3.6.)

7. Grid 

Fig. 3.7. Grid System Trial Spread, Week 1 (23/04/2025)

On my first attempt (right, Fig. 3.7.) Mr. Vinod said it needs to focus more on the typographic elements and not the graphics, the margins is also ignored in this work. 
Then I tried a more simpler layout (left, Fig. 3.7.) to focus more on the typography and to make it less distracting. 

8. Random

Fig. 3.8. Random System Trial Spread, Week 1 (23/04/2025)

Mr. Vinod commented that it should be more chaotic, and mine's still looks a little bit too organized.

OUTCOME 1 (before feedback)

Fig. 3.9. All Systems Before Feedback , Week 2 (29/04/2025)

OUTCOME 2 (after feedback)

Fig. 3.10. All Systems After Feedback , Week 2 (29/04/2025)


FINAL OUTCOME OF TYPOGRAPHIC SYSTEM

Fig. 3.11. Transitional System Final JPEG , Week 3 (06/05/2025)

Fig. 3.12. Random System Final JPEG , Week 3 (06/05/2025)


Fig. 3.13. Modular System Final JPEG , Week 3 (06/05/2025)


Fig. 3.14. Radial System Final JPEG , Week 3 (06/05/2025)


Fig. 3.15 Bilateral System Final JPEG , Week 3 (06/05/2025)


Fig. 3.16. Axial System Final JPEG , Week 3 (06/05/2025)


Fig. 3.17. Grid System Final JPEG , Week 3 (06/05/2025)


Fig. 3.18. Dilatational System Final JPEG , Week 3 (06/05/2025)


Fig. 3.19. All systems with grid, PDF, Week 3 (06/05/2025)

<iframe src="https://drive.google.com/file/d/1kNE--qZAb7wn3QOOh-wBd-MCK_51M8FE/preview" width="640" height="480" allow="autoplay"></iframe>

Fig. 3.20. All systems without grid, PDF, Week 3 (06/05/2025)

<iframe src="https://drive.google.com/file/d/1c7-QbaeT-USmzFCrV5ntiPojnC8wzJa9/preview" width="640" height="480" allow="autoplay"></iframe>


>Task 1 : Exercise 2 | Type & Play


1. Choose an image to extract the letters

Fig. 3.20. Chosen Image, Week 3 (04/5/2025)

2. Identify and trace the letters in the image

3. Extract the letterforms 

4. Choose a reference font ( I chose "Impact" as my reference font)

Fig. 3.21. Extracted Letterforms, Week 3 (04/5/2025)

After consultation, Mr. Vinod gave me feedbacks to apply the hole textures inside the letters. For this, I used the holes in the reference image and use the shape builder tool to achieve the coral look.

FINAL OUTCOME OF PLAY & TYPE
Fig. 3.22. Refined Letterforms, Week 3 (07/5/2025)



Fig. 3.23. Letterforms, Week 3 (07/5/2025)


Fig. 3.24. Original Image & Letters Tracing, Week 3 (07/5/2025)

Fig. 3.25. Extracted Letterforms, Week 3 (07/5/2025)

Fig. 3.26. Reference Font (Impact), Week 3 (07/5/2025)

Fig. 3.27. Final Letterforms, Week 3 (07/5/2025)


Fig. 3.28. Final Comparison, before(top) after (bottom), Week 3 (07/5/2025)


Fig. 3.29. Final Individual Letterforms, PDF, Week 3 (07/05/2025)

<iframe src="https://drive.google.com/file/d/1nVbB6sT162o5zMSTvhRAbhXheGDt15Le/preview" width="640" height="480" allow="autoplay"></iframe>


EXERCISE 2 PART 2 

We were asked to create a movie like poster and applying our fonts in it. 

Fig. 3.30. Original Image 1 (background), Week 3 (07/5/2025)

Fig. 3.31. Original Image 2, Week 3 (07/5/2025)


Fig. 3.31. Poster edit (Photoshop), Week 3 (10/05/2025)

FINAL OUTCOME OF MOVIE POSTER 
Exercise 2 Part 2


Fig. 3.32. Poster JPG , Week 3 (10/05/2025)

Fig. 3.33. Poster PDF , Week 3 (10/05/2025)



FEEDBACK 

WEEK 1

General Feedback - We were given a short brief on the materials we are going to be covering, rules and advised, and what to do in this class if you want to pass

WEEK 2

General Feedback - We went through our progress and gained some feedbacks.

Specific Feedback - In my personal work, I decided to change 6/8 out of my works. The point is we need to make the text to be the center of attention and not rely on the graphical elements.

WEEK 3

General Feedback - Went trough our works and gained some feedbacks.

Specific Feedback - I need to make the textures of my letters better. Take the holes and implement it into the characters.

WEEK 4

General Feedback - Went trough the posters and gave feedbacks. Also briefed about the upcoming task.

Specific Feedback - He said good job to my poster and that i can proceed with the blog.


REFLECTIONS 

Experience - During these first 4 weeks learning about advanced typography, I've learnt to utilize the typography aspect itself and not rely on graphical elements. Working on these 2 exercises and this blog make me to have a better time management. It was tough, especially the first 2 weeks, but I learn to manage my priorities.

Observations - Feedbacks during class are very helpful. At first, when Mr. Vinod critiqued my work I felt worried that my works is not up to his standards. But before week 2's class ended, he told the class to not too worried about the grades you're  getting at the end only. Try to learn during the process and be confident with your work as long as it fulfills the criteria.

Findings - I find that the typography elements is not as boring as I thought it would be. In fact I find it pretty hard to deconstruct and reconstruct the typographic element into something new. But here I tried to explore more and do my best in every task. 


FURTHER READING

Fig. 7.1 Typographic System by Kimberly Elam
 
Typographic System by Kimberly Elam 
     
       4. Random System (68-76)

Introduction 

The random system involved elements that are arranged without a fixed aim, pattern, direction, rule, method or purpose. This system often started by scattering elements in the compositional field with free abandon. However, the alignments and composition may feel intentional. And surprisingly, the randomness of the placements often makes a dynamic and spontaneous outcome, that is visually interesting but a little bit hard to read. 


Random traits - even though there are no rules for this system, the goal of the experiment is to achieve a visually pleasing result with an experiment. Random elements are often:
  • overlapped
  • cropped
  • angled
  • textured
  • not horizontal
  • not aligned
  • not patterned

Fig. 7.2. Random Traits


The Ba-Tsu 1994, there are no alignments and the visual relationship that can be seen are disrupted. The individual letter form moves and tilts randomly in this piece. 
" I follow the instincts of my senses or my imagination" quote Makoto Saito. He defines tradition by approaching each project with fresh artistic expression. 

Fig. 7.3. Ba-Tsu 1994, Makoto Saito

Thumbnail Variations
The direction indicated a sense of order and intention. Multiple angles indicated a sense of randomness and the more dramatic and varied the angles, the stronger the random sense is. 

Fig. 7.4. Initial Phase 

Initial Phase - designers discover that leaving the line of text on a horizonal base line or only tilting it slightly does not fully communicate randomness. 

Fig, 7.5. Intermediate Phase

Intermediate Phase - the angles become more dramatic as the designer grows more comfortable with overlapping lines, this can reduces legibility. 

Fig. 7.6. Advanced Phase

Advanced Phase - designer pushes the sense of randomness by using repetition, breaking the lines to individual words, and even to compose of individual characters. 


Fig. 7.7. Thumbnail Variations

Random systems
  • Type only
Fig. 7.8. Matt Greiner


With the random system composition, readability of the message are often weakened. Which does not go well with the utility as a method of communication. The aim of working with the random system is experimentation, and during the process there are differing levels of readability. The smaller composition are early, more legible works and the larger composition are later, less legible works. 

  • Nonobjective Elements 
Fig. Melissa Pena

Fig. 7.9. Jon Vautour


Through diversity objects and shape can enhance the random composition. At times, a nonobjective element can modify a word or line and improve communication in a chaotic environment. 

  • Repetition 
Fig. 7.10. Chad Sawyer (top), Wendy Ellen Gingerich (bottom)

Repetition is one of the random traits. Excessive repetition is to create an interesting textural composition may leads to loss of communication. Another strategy that preserves communication, is to employ in the composition opposite on the bottom, is the enlarged repetition of the message, also can enhance with color change or with the help of uppercase text. 












Comments

Popular Posts