ADVANCED TYPOGRAPHY TASK 1

on
ADVANCED TYPOGRAPHY
|| Leong Hui Xuan 0365793
|| 22/04/2025- 13/05/2025 (Week 1 - Week 4)
|| Bachelor of Design in Creative Media 
|| Task 1
Table of Content
LECTURES

Lecture_01
Effective typographic design prioritizes clear communication, hierarchy, legibility, and contrast. These systems are like "shape grammars" for architects, providing a framework for decision-making.

Figure 1.0, Typography system, week 1 (22/04/2025) 

8 Typographic System:
  • Axial: Elements organized around a single axis (straight or curved)
  • Radial: Elements extend from a central point.
  • Dilatational: Elements expand from a central point in a circular manner.
  • Random: Elements appear without a specific pattern, yet maintain a structured method.
  • Grid: A common system using grids to structure information.
  • Transitional: Information layered in bands.
  • Modular: Standardized units that can be rearranged.
  • Bilateral: Text arranged symmetrically around a central axis.

Lecture_02
Typography Composition
  • Refers to the arrangement of textual information within a space, whether print or digital.
Principles of Typography Composition:
  • Emphasis
  • Isolation
  • Repetition
  • Symmetry and Asymmetry 
  • Alignmnet
  • Perspective
Rule of Thirds:
  • A guideline suggesting that a space can be divided into three columns and three rows for placing important elements.
Other models/system:
  • Enviromental Grid: Organizes information around ecisting structures, blending visual stimuli and context.
  • Form and Movement：Explores information arrangement over multiple pages to create a sense of mevement, emphasizing visual connections.


Lecture_03
Contet and Creativity 

Historical Context
  • Crucial for deeper insights into handwriting and typography.
Important of Handwriting:
  • Significant in typography as early mechanically produced letter forms imitated handwriting, establishing standards for form, spacing and conventions.
Evolution of the Latin Alphabet:
  • The Latin alphabet's origins trace back to around 1750 BCE, evolving from proto-Sinatic letter forms and hieoglypics.
  • The pheonician alphabet marked a significant turning point, transitioning from pictorical representations to sound-based writing.
Cuneiform and Egyptian Hieroglyphics:
  • Cuneiform is one of the earliest writing systems, developed around 3000 BCE, using a reed stylus pressed into clay.
  • Egyptian hieroglyphics, used between 2613 and 2610 BCE, combined rebus and phonetic characters, influencing future alphabetic systems.
Greek and Roman Influence:
  • The Greek alphabet evoved from the Phoenician system, adding vowels and developing a more organized writing style.
  • Roman letters became more rounded and humanistic by the 4th century, leading to faster writing.
Carolingian Minuscule:
  • The Carolingian minuscule, estabilished under Charlemagne, standardized weiting conventions and influenced lowercase Roman type.
Cultural and Historical Acknowledgment:
  • The influence of Egyptian civilization on Greek writing is often overlooked, despite its significant contributions to advancements in various fields.
  • The ecolution of writing systes in the Middle East and Asia highlights the importance of historical context in understanding modern typography.

Lecture_04
Designing Type

Designer and their Contributions
  • Adrian Frutiger: Known for the Frutiger typerface, designed in 1968 for Charles de Gaulle Airport, focusing on legibility from various distances.
  • Matthew Carter: Created Verdana for Microsoft, aimed at enhancing legibility on screens.
  • Edward Johnston: Developed the Johnston Sans typerface for the London Underground, which combined modern simplicity with traditional elements.
Design Process
  1. Research: Understanding type history and anatomy is crucial.
  2. Sketching :  Designers often start with sketches, either traditionally or digitally, to refine their concepts.
  3. Digitalisation: Professional software like FontLab and Glyphs is used to create and refine typerface.
  4. Testing: Rigorous testing is essential to ensure legibility and functionality in various contexts.
Typeface Construction
Roman Capital letters are constructed using a grid system like the square as the base structure, a circle within the square that touches all four sides and a centered rectangle that is three-quarters the size of the square.

Construction and Considerations 

Visual Corrections: Adjustments may be necessary for optical balance, such as overshoots for curved forms and uniform spacing between letters.




INSTRUCTION




PROCESS WORK

Typographic Systems - (week 1-2)
In this exercise, we were required to create 8 typography layout with the 8 typography systems based on the content given in Adobe InDesign.

Content:

The Design School,
Taylor’s University

The ABCs of Bauhaus Design Theory 

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
Sketches

Figure 1.1, Typography system Sketches, week 1 (22/04/2025) 

Before working in Adobe InDesign, I came out with some idea sketches first.

Figure 1.2, 8 Typography system Digitalize , week 1 (25/04/2025) 

Then, I started digitalized in Adobe InDesign with some changes and add new system ideas.

After having consultation and feedback from Mr Vinod, I realized that I have doing wrong in some system. I then edit and redo it withe the feedback given and experiments with different elements.


Figure 1.3, 8 Typography system after Feedback , week 2 (29/04/2025) 

I used red as the main colour to relate to the Taylor's University logo. Since the text is already black, I used red and grey to experiment with different elements to create attractive visual effects.
Final Outcome of 8 Typography System

Pdf with guideline:
Figure 1.4, 8 Typography system Pdf with Guideline , week 2 (30/04/2025) 

Pdf without guideline:
Figure 1.5, 8 Typography system Pdf without Guideline , week 2 (30/04/2025) 

PNG for each System:

Figure 1.6, Axial Typography system, week 2 (30/04/2025) 

Figure 1.7, Random Typography system, week 2 (30/04/2025) 

Figure 1.8, Dilatational Typography system, week 2 (30/04/2025) 

Figure 1.9, Modular Typography system, week 2 (30/04/2025) 

Figure 1.10, Transitional Typography system, week 2 (30/04/2025) 

Figure 1.11, Radial Typography system, week 2 (30/04/2025) 

Figure 1.12, Bilateral Typography system, week 2 (30/04/2025) 

Figure 1.13, Grid Typography system, week 2 (30/04/2025) 





Type & Play (Part 1) - (week 3)
For this part, we need to find an image of nature/ man-made objects/ structures. Starting with the image, we break it down and explore it to discover possible letterforms hidden within and at least 5 letters. Through multiple rounds of refinement, these initial rough shapes evolve into more polished and expressive designs that still carry traces of their original source.

Process:

Figure 2.0, Original picture 1, week 3 (06/05/2025) 
Figure 2.1, Letter Trace from cucumber, week 3 (06/05/2025) 

I trace the photo through Pen Tool, and I found 5 letters which are G, R, E, M and N.

Figure 2.2, Reference Font, week 3 (06/05/2025) 

The bowl, shoulder and the finial of this fonts is similar to the style of the letter that I traced from the cucumber image.
Figure 2.3, Font Refinements, week 3 (06/05/2025) 
I refined the letters from irregular, rough, and unbalanced forms into more polished, balanced, and formally structured shapes.


I used cucumber slice as my chosen photo at the first, but after consultation with Mr Vinod, he said I can only either use the shape of the seeds or the shape/outline of the cucumber slice to explore the letterforms.

Then, I decided to change my photo to a dry soil cracked photo.

Figure 2.4, Original picture 2, week 3 (09/05/2025) 

Figure 2.5,Black and White mode, week 3 (09/05/2025) 

To more easily trace the image, I edit it into black and white with high contrast image.

Figure 2.6, Image Trace, week 3 (09/05/2025) 

Then, I used the Image Trace Tool to trace the cracks.

Figure 2.7, Explored Letterforms, week 3 (09/05/2025) 

The letters that I have explored are Y, L, O, T, A.

Figure 2.8, Reference Font, week 3 (09/05/2025) 

Since the letterform that I trace out have a round tail, I use this fonts as the reference font.

Figure 2.9, Font Refinements, week 3 (09/05/2025) 

I refined the letters from a crooked and unbalanced stroke to more formally structurea and balanced stroke.



Type & Play (Part 2) - (week 3-4)

The second part, we are ask for used the images that which we trace letterforms or find a related one as the poster picture. Then, used the letterforms that trace in part1 combined to a word and put it on the photo. The poster required, 1024 px x 1024 px size.

Poster 1:
Figure 2.10, Image for poster 1, week 3 (10/05/2025) 

I decided to use a similar photo as the poster.

Figure 2.11, crop the photo for poster 1, week 3 (10/05/2025) 

I used the little plant in the middle as the focal point and crop the image to 1024 x 1024 px.

Figure 2.12, Edit the curves for poster 1, week 3 (10/05/2025) 

I edit the image to more contrast and high saturation to make the poster look more vitality.

Figure 2.13, Adjustment for poster 1, week 3 (10/05/2025) 

I then adjust the color, brightness and experiment the composition of the letter "LOYALTY"


Figure 2.14, Final for poster 1, week 3 (10/05/2025) 

On the other side, I feel that the poster photo and th eword "LOYALTY" is not very connected, so I try a nother photo for the poster.

Poster 2:
Figure 2.15, Photo for poster 2, week 3 (10/05/2025) 

This photo combines cracks and human figures, relating to the original photo I used to trace the letters and the meaning of the word "loyalty".
But the photo seems created by A.I, so I'm not sure that can be used or not.

Figure 2.16, Adjust the curves  for poster 2, week 3 (10/05/2025) 

After crop the photo to 1024x 1024 px, I used the head part as the focal point. Then, I adjusted the curve to make the photo more saturation for the gold color part, and more contrast.

Figure 2.17,  Adjust brightness for poster 2, week 3 (10/05/2025) 

I adjusted the brightness for the poster befor placing the word and after to see the contrast.

Figure 2.18,  Adjust the colour of the word for poster 2, week 3 (10/05/2025) 

After decided the word composition, I started edit with thecolour. I use a gradient colour from white to black at the front and the back of the word to create a 3D effect.

Figure 2.19,  Adjust the size of the word for poster 2, week 3 (10/05/2025) 

Then, I make the word to curve a bit, to show like the word is surrounded the figure.

Figure 2.20,  Add text  for poster 2, week 3 (10/05/2025) 

After the I done the title, I add some text on the botttom to make it more like a movie poster. Then, I found that the paragraph is hard to read, so I change the placement of the text.

Figure 2.21,  change text layout for poster 2, week 3 (10/05/2025) 

I later devided the paragraph into 3 section, the directed, cinematography and editing, and the sound design and background music composed at the bottom of the poster.
Figure 2.22, Add the " IMAX " Logo for poster 2, week 3 (10/05/2025) 

To make the poster more realistic, I added the "IMAX" Logo on the right top of the poster.


Exercise 2 Final Outcome compilation

Figure 3.0,  Image and Extraction, week 3 (10/05/2025) 

Figure 3.1, Overall Refine Process, week 3 (10/05/2025) 



Figure 3.2, Extracted letterforms, week 3 (10/05/2025) 

Figure 3.3, Reference Font, week 3 (10/05/2025) 

Figure 3.4, Final Letterform, week 3 (10/05/2025) 
Figure 3.5,Original Extraction and  Final Letterform comparison, week 3 (10/05/2025) 
Figure 3.6, Type & Play Process PDF, week 3 (10/05/2025) 

Figure 2.23,  Finalized poster , week 4 (13/05/2025) 
Figure 2.24,  Finalized poster PDF, week 4 (13/05/2025) 




FEEDBACK 

Week 1
General Feedback: Each design need to put their system name. 

Week 2
General Feedback: For the body text, left align will be better and the graphic element is add after the layout done. Always avoid 45' degree line when doing Typography. 
Specifiv Feedback: Transition need to be work more and random need to be more chaotic. 

Week 3
General Feedback: The letterfroms that we refined need to be more structure and formally but still need to remain its characteristic.
Specifiv Feedback: Mr Vinod suggest me either use the shape of the cucumber slice or the seeds to explore the letterforms. After feedback, I decided to change my photo from cucumber slices to cracks on the dry soil photo, and used the craks to explored the letterforms. 

Week 4
General Feedback: The text and the background need te be contrast, if the title is creative, then the information should be more formal to make the viewer focus on the title.
Specifiv Feedback: Goodjob for the poster. Start thinking for the Task 2(A) about the wordmark.





REFELCTION 

Expereinces:

In this Task 1, according to our understanding, we need to create 8 typography systems. This task is similar to what we learnt in the typography module in Semester 1, except that in this task we need to layout and design according to different typography systems. Then, we need to explore at least 5 letterforms through a natural or man-made photo and make it into a 1024 px x 1024 px square poster. 

Observation:

This task really pushed me to think more deeply about typography. Working with the 8 typographic systems made me realise the freedom that structure can actually grant to explore, and learning to work with these systems made me more aware of visual balance, hierarchy and alignment. I also found that experimenting with colour or elements too early can distract from the core structure, something I realised only after feedback from Mr Vinod. 

Similarly, in the Type & Play exercise, it made me realise how important it is to choose source material wisely during the design process and to have a good understanding of what works and what doesn't.

Findings:

Through these observations, I discovered that good typographic work is rooted in careful conception and understanding the form and function. Feedback helped me recognise the shortcomings of my typography and guided me to improve structure and clarity. In the second part, I realised the importance of visual narrative. By placing the plant poster with a poster of a figure and broken cracks, I was able to create a stronger emotional connection with the word "LOYALTY". 

The hardest part for me was the exploration of the letter, which we needed to find and explore the letter in the photo. I spent a lot of time tracing the letter and refined it until it was similar to the reference font. But more broadly, I learnt that whether it is fonts, typography or concepts, being flexible and open to changing ideas can lead to better results.




FUTEHR READING  

Figure 4.0,  "Finding Type"- A Novel Typographic Exercise from Mr Vinod, week 3 (10/05/2025) 

"Finding Type" is an exercise designed to enhance typographic skills by extracting letterforms from images. 

1. Finding an Image
  • Select an image with strong, consistent characteristics.
2. Deconstructing the Image
  • Outline the image or its constituent shapes.
  • Focus on the lines, textures, and forms.
3. Identifying Letterforms
  • Within the deconstructed shapes, locate forms resembling letters.
4. Extracting Letterforms
  • Isolate the identified letter
5. Identifying a Reference Font
  • Choose an existing typerface as a reference point.
6. Refining Letterforms
  • Introduce uniformity in dimensions and stroke contrast.
  • Simplify complex areas to enhance legibility and coherence.



























Comments

Post a Comment