Advanced Typography: Task 1 Exercises

on

21.04.25 -  14.05.25 (Week 1-4)

Celine Christabelle Patricia / 0374872 

Advanced Typography / Bachelors of Design (Hons) in Creative Media / The Design School

Task 1 - Exercise

Table Contents

  1. Lectures
  2. Instructions
  3. Task
  4. Feedback
  5. Reflection
  6. Further reading

Lectures

Lecture 1: AdTypo_1

Typographic systems

"All design is based on a structural system"

"Typographical organization is complex because the elements are dependent on communication in order to function."

"The typographic systems are akin to what architects term shape grammars. It provides a sense of purpose that focuses and directs the decision making." 

(Elam, 2007)

There are eight major variations with an infinite number of permutations which are:

• Axial: Elements are organized to the left or right of a single axis (line).

• Radial: Elements are extended from a point of focus. 

• Dilatational: 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. 

• Modular: A series of non-objective elements that are constructed in as a standardized unit (same size). 

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

Fig 1.1 - Typographic systems (1)

Fig 1.1 - Typographic systems (2)

back to top

Lecture 2: AdTypo_2

Typographic Compositions

Principles of Design Composition:
  • Emphasis
  • Isolation
  • Repetition
  • Symmetry & Asymmetry
  • Alignment 
  • Perspective
Rule of Thirds:

Fig 2.1 - Rule of Thirds in typography
However, rule of thirds is quite rare in Typography, mostly in photographs. 

Fig 2.2 - Grid System 

Grid system (Raster Systems) is the most used system among the 8 systems learnt before.  It seems to be old or rigid, however, it allows infinite number of adaptation. However, grid systems tends to be "neat", which the post-modernist era are against with. By so, the exploration of chaos, randomness, radial system started to take place. 

Other systems
  • Environmental Grid
    • Use photo as reference, analysis and simplified into shapes, lines or dots, make it into key feature,
  • Form and Movement
    • Based on an exploration of the grid system, placement creates movement
    • Create different layout, replace elements with either text, image or graphic elements. 
Fig 2.3 - Other systems

back to top

Lecture 3: AdTypo_3

Context and Creativity

Context: Historical Context

Handwriting: The first mechanically produced letterforms were designed to imitate handwriting. 

Fig 3.1 - Evolution of Latin Alphabet

System of writing from years
  • Cuneiform 3000 BCE
    • The earliest system of writing
    • Result of pressing blunt end of reed stylus into a wet clay, evolved from pictographs
    • written from left to right
  • Hieroglyphics 2613 - 2610 BCE
    • used in 3 different ways
    • ideograms, to represent things they depict; determinatives, to show phonograms and give the general idea of the word; phonograms, represent sounds
  • Early Greek 5th C BCE
    • Phonetic alphabet consists of 22 letters
    • Ox Flow: the direction of reading is not fixed, can be left to right and vice versa (letters can be flipped)
  • Roman Uncials 4th C
    • Letters become more rounded
  • English Half Uncials 8th C
    • more slanted and condensed
  • Carolingian Minuscule 8 C CE  (Charlemagne)
    • Used for legal purposes, writing already standardized
    • basis of lower case roman type
  • Black Letter 12 - 15 C CE
    • Gothic: artistic expression, refers to rude/barbaric cultures north of the Italian Alps
    • Tight spacing, condensed to reduce cost
  • Movable Type 11 - 14 C
    • printing on woods, book etc in China, Korea and Japan
    • China attempted first but failed because of the huge amount of characters and insufficient material used (Clay), though Korean succeeded using bronze
Fig 3.2 - Letter evolutions

Eastern handwriting developments
  • Evolution of Middle Eastern
    • The Phoenician letter marks a turning point
  • Evolution of Chinese Script
    • From Oracle bone to Seal Script to Clerical script (There is Traditional and Simplified HanZi)
  • IVC Script
    • Logo and symbolic, similar to Indian script
  • Brahmi Script (450 - 350 BCE)
    • Earliest writing system developed in India
    • Influenced by temporary Semitic scripts (some cultural exchange happen)
  • Pallava Script
    • Oldest writing found in Southeast Asia, an Indian Script
    •  Pra-Nagari
  • Kawi
    • Sanskrit term kavya, meaning poet
    • Incung
      • from South Sumatra, grouping of the scripts known as Rencong ancient Gujerati, 
      • Incung is from Kerinci
    • Rejang, Batak, Bugis, Javanese
  • Jawi
    • Arabic based alphabets, introduced along with Islam
Fig 3.3 - Eastern Letter evolutions

Type Design
  • Programmers and Type Design
    • More vernacular scripts produced by software giants
    • More multi script typefaces - produce vernacular languages
      • Mutu Nedumaran
      • Huruf 
      • Ek Type
      • Indian Type Foundry

Lecture 4: AdTypo_4_Designing Type

Designing type
  • Adrian Frutiger
    • Designer for the Univers typeface
    • Purpose: to create a font that can be read close and far
    • First typeface that experience digitizing 
    • There is an Arabic typeface as well
  • Matthew Carter (Royal Designer)
    • Designer for Verdana, Georgia, Bell Centennial
    • Verdana
      • Purpose: extreme legible on tiny size
      • Limitations: may confused between i j l
    • Bell Centennial
      • Was designed with Ink trap
  • Robert Johnston
    • Designer of Johnston Sans
    • Asked to create bold simplicity typeface rooted in tradition
    • Abandon serif from original font.
    • Similar to Gill Sans
      • Gill is Johnston's student**
General process
  • Research
    • Understand type history, anatomy, conventions, and terminologies
    • Determine purpose
    • Study existing font (find references)
  • Sketching
    • Hand drawn 
    • Digital
  • Digitalisation 
    • Softwares used:
      • FontLab
      • Glyphs
      • Adobe Illustrator
    • Counter-form also important for readability (negative space)
  • Testing
    • Refine and correct, prototype, getting feedback.
    • Display type
    • Focus on expressions more than the legibility
  • Deploy
    • Keep on testing
  • Type Construction
    • Roman capital: Using grids with circular form
    • Consideration
      • grouping the characters from different shapes and forms, according to its characteristics
  • Design Type
    • Intrinsic - driven by interest
    • Extrinsic - commissioned or asked to design in certain purpose. 

Class Sessions

Week 1
Introduction towards Advance Typography, explanation of the MIB and task 1 exercise 1

Week 2
Feedback session of exercise 1, explanation of the MIB and task 1 exercise 2

Week 3
Feedback session of exercise 2 part 1, continue to make movie poster

Week 4
Feedback session of exercise 2 part 2, explanation of task 2

back to top
Instructions

back to top

Task 1 - Exercise

Exercise 1 - Typographic Systems

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

Research 

I read the Typographic Systems by Kimberly Elam briefly to understand better about the systems. Then,  I continue searching for references from the book, Pinterest, and Behance. For more, research please refer to the Further Reading.

I chose All Ripped Up: Punk Influences on Design as my header for this exercise. Hence, punk means a loud, fast-moving, and aggressive form of rock music, popular in the late 1970s. The word aggressive means something strong and vibrant. From my research below (refer to Fig 1.1.1) I decided to use the color magenta because it looks playful and strong.

Fig 1.1.1 - Research about "Punk"


Fig 1.1.2 - Research of typographic systems 
Fig 1.1.3 - Research of typographic systems

Progress

I made 2 design results for every systems. 

Fig 2.1.0 - Design Attempts
I felt that some of the designs are too cramped or less impact on the text because of the graphical elements, so I decided to revise these results and fix it to create more balance, by changing the graphical elements or the positions and size of the words, as well as background color which would possibly make the texts more visible and more towards the focal point. 

Design Samples: 

Fig 2.1.1 - Axial system

Design 1

  • Header:
    • Gill Sans Bold, Gill Sans Italic
    • 36pt
  • Text
    • Gill Sans SemiBold
    • 16pt, 12pt

Design 2

  • Header:
    • Gill Sans Bold
    • 73pt "PUNK" , 45pt
  • Text
    • Gill Sans Regular
    • 16pt, 12pt 

Fig 2.1.2 - Radial System

Design 1

  • Header:
    • ITC New Baskerville Std Bold
    • 65pt "PUNK", 36pt, 
  • Text
    • Gill Sans Semibold
    • 16pt, 12pt

Design 2

  • Header:
    • Futura Condensed Medium, Futura Condensed ExtraBold, Futura Medium
    • 33pt, 47pt "PUNK"
  • Text
    • Futura
    • 18pt, 12pt

Fig 2.1.3 - Dilatational System

Design 1

  • Header:
    • ITC New Baskerville Std Bold
    • 42pt "All Ripped Up", 40pt "PUNK", 32pt "Influences on Design"
  • Text
    • ITC New Baskerville Std Roman
    • 15pt
    • Gill Sans Regular
    • 12pt

Design 2

  • Header:
    • ITC New Baskerville Std Bold
    • 60pt, 46pt
  • Text
    • Gill Sans
    • 12pt


Fig 2.1.4 - Random system

Design 1

  • Header:
    • Bodoni 72 Bold, Futura Bold, Bembo Std Bold, ITC New Baskerville Bold
    • 90pt "PUNK", 38pt, 37pt 36pt
  • Text
    • Gill Sans Bold, Bodoni 72 Bold, Bodoni 72 Book Italic, Futura Bold
    • 17pt, 14pt 

Design 2

  • Header:
    • Bodoni 72 Bold, Gill Sans Bold, Gill Sans Regular,
    • 48pt, 32pt, 29pt
  • Text
    • Bodoni 72 Bold, Futura Bold, Bembo Std Bold, ITC New Baskerville Bold, Gill Sans Semibold
    • 12pt, 21pt, 18pt


Fig 2.1.5 - Modular system

Design 1

  • Header:
    • ITC New Baskerville Bold
    • 76pt, 36pt
  • Text
    • Bodoni 72 Bold, Bodoni 72 Book Italic
    • 30pt, 25pt, 16pt, 12pt, 

Design 2

  • Header:
    • ITC New Baskerville Bold
    • 76pt, 36pt
  • Text
    • Bodoni 72 Bold, Bodoni 72 Book Italic
    • 30pt, 25pt, 16pt, 12pt, 

Fig 2.1.6 - Grid system

Design 1

  • Header:
    • Bodoni 72 Bold
    • 27pt, 36pt
  • Text
    • Bodoni 72 Book
    • 30pt, 12pt

Design 2

  • Header:
    • Bodoni 72 Bold
    • 27pt, 36pt
  • Text
    • Bodoni 72 Book
    • 16pt, 12pt

Fig 2.1.7 - Transitional system

Design 1

  • Header:
    • Gils Sans UltraBold, Gill Sans Regular, Gill Sans Bold
    • 65pt, 36pt, 33pt
  • Text
    • Gils Sans SemiBold,
    • 12pt, 22pt

Design 2

  • Header:
    • Gils Sans SemiBold, Gils Sans Regular,
    • 34pt, 25pt
  • Text
    • Gill Sans Regular, Gill Sans SemiBold
    • 12pt

Fig 2.1.8 - Bilateral system

Design 1

  • Header:
    • Futura Bold
    • 36pt
  • Text
    • Futura Medium
    • 12pt, 16pt, 20pt

Design 2

  • Header:
    • ITC New Baskerville Bold
    • 60pt, 27pt
  • Text
    • Bodoni 72 
    • 14pt
Fig 2.2.0 - Chosen Designs

Overall the design of the 8 systems is okay. However, for the axial system, should avoid an extreme angle. The radial system would be preferable to use only the outline of the circle so it does not distract the overall design. The random system is on the right path, but it could be more random, more chaos.

Final

Fig 3.1.0 - Typographic Systems Final, Week 2, jpeg (30/04/25)


Fig 3.1.1 - Typographic Systems Final, Axial, Week 2, jpeg (30/04/25)

Fig 3.1.2 - Typographic Systems Final, Radial, Week 2, jpeg (30/04/25)

Fig 3.1.3 - Typographic Systems Final, Grid, Week 2, jpeg (30/04/25)

Fig 3.1.4 - Typographic Systems Final,  Bilateral, Week 2, jpeg (30/04/25)

Fig 3.1.5 - Typographic Systems Final, Dilatational, Week 2, jpeg (30/04/25)

Fig 3.1.6 - Typographic Systems Final, Random, Week 2, jpeg (30/04/25)

Fig 3.1.7 - Typographic Systems Final, Modular, Week 2, jpeg (30/04/25)

Fig 3.1.8 - Typographic Systems Final, Transitional, Week 2, jpeg (30/04/25)

 
  Fig 3.2.0 - Typographic Systems Final, Week 2, pdf (30/04/25)

Fig 3.3.0 - Typographic Systems Final, Week 2, pdf (grid) (30/04/25)

back to top

Exercise 2 - Type and Play

Exercise 2: Part 1

Finding type – Students will be asked to select an image of a man-made object (chair, glass, etc.) or structures (buildings), or something from nature (Human, landscape, leaf, plant, bush, clouds, hill, river, etc). Ensure that the image does not contain many different elements

Research 

Before starting the project, I start the article given by Mr Vinod, Finding Type: A Novel Typographic Exercise. 
I start analyzing the works in that are shown in the article to get the visualization on how to do this task

Fig 4.1 - Reference picture to be choose.
I decided to choose the mirror picture as my reference for this task. 

Progress
Fig 5.1 - Deconstructing Image

I tried to deconstruct the image by using image trace, however it wasn't possible, so I decided to make it in BNW mode and bring a higher contrast so the outlines will be more visible. Afterwards, I start observing the image and identify the letterforms I could find within the outlines. At the end, I found the letter G, L, O, B, and E, which could also make the word "GLOBE".

Fig 5.2 - Tracing the letterforms

Fig 5.3 - Reference typeface

I used ITC Baskerville as the reference for my type. I noticed that the type has a flow and curly characteristics, which suits Serif fonts because the have visibly different line-weights. 

Fig 5.4 - Progression
Fig 5.5 - Attempt 1
Received some feedbacks from Mr.Vinod, where there are too much curly edges on each letter. Additionally, the winged edges on the mirror could be added as well to give more clarity on the mirror's characteristics.

Fig 5.6 - Attempt 2

For this part, I felt the letterform is too thick, it doesn't really represent the elegant look of the mirror, it looks cute instead, so I decided to make more adjustments, by changing the Serif referenced font from Bold to Roman, then make the letterforms has thinner line-weights.

Fig 5.7 - Attempt 3
back to top
Exercise 2: Part 2  

Fig 5.8 - Poster Attempt 1

The title could be placed in the middle because there is too much empty space. The information under is too thin and not readable.

Fig 5.9 - Poster Attempt 2

The informations under is still not too readable, need more re-adjustments. The title lack of emphasis
Fig 5.10 - Poster Attempt 3

Final Results

Fig 6.1.1 - Extraction, Week 4 (14/05/25)
Fig 6.1.2 - Refining Process, Week 4 (14/05/25)


Fig 6.1.3 - Extracted Letterform, Week 4 (14/05/25)

Fig 6.1.4 - Referenced Font, ITC Baskerville, Week 4 (14/05/25)

Fig 6.1.5 - Final Letterform, Week 4 (14/05/25)


Fig 6.1.6 - Original and Final Letterform, Week 4 (14/05/25)
Fig 6.1.7 - Progress of Exercise 2 Part 1 Compiled, Week 4 (14/05/25)


Fig 6.2.0 - Final Poster, Week 4 (14/05/25)


Fig 6.2.1 - Final Poster PDF, Week 4 (14/05/25)

Feedback

Week 2
General feedback: 
Don’t let graphics overwhelm information, make sure that your design has margin, avoid having lines near the baseline of the text. 
Specific feedback: 
Overall the design of the 8 systems is okay, for axial avoid an extreme angle, radial make the corner circle just and outline, the random system is on the right path, but it could be more random.

Week 3
General feedback: 
Remain consistency in every of the letterform
Specific feedback: 
Don't add too much curls on the end, add more of the "wingy" detail

Week 4
General feedback: 
Always remember to put margin before starting to do the task
Specific feedback:
Make the word "Globe" in the center, preventing too much empty space, make sure the informations under are readable

back to top

Reflection
 
Experience
On this task exercise, i felt really overwhelmed, especially on the second exercise. I had a hard time making the movie poster on how to highlight the title without making too much distractions. When making exercise 2 part one, making a letterform isn’t new to me, but making a letterform from an object turned out really challenging. I had to observe every detail and transform it into a word. The process was quite fun, but I was not impressed with my result. After receiving feedback from my lecturer, I do feel that the letterforms improved. However, I still don’t really like it so I ask opinions from my friends about what they think. That method really helped me through because I learnt other perspectives and preference to improve my design. It was quite stressful, but I managed it pretty well, I realized typography is not something I master, but I also can see my growth on doing this task. 

Moreover, task 1 exercise 1 was also as challenging, but I still find it more enjoyable. I learnt about many type of design systems and that was actually interesting. When making the design systems, I find it challenging to make the random system, because it needs to be chaos, and it took me quite a while to define “chaos” in the design. I also had difficulty making the dilatational system, because it has a flowy characteristic, and I had a hard time to keep with the flow. 

Observation
Even so, during the feedback sessions during class, I observe my classmates works that are shared as well as listened to the feedbacks from Mr. Vinod. It was really helpful. One thing I learned so much is about margins and hierarchy of design. 

Findings
I don’t just do, I read as well. The further readings I read had given me more knowledge on the task I am doing. Even though it did not turn out perfect or the “best” among all, but without those reading I am pretty sure it would turn out way worse.
Further Reading
Fig 3.1- Typographic Systems by Kimberly Elam

Book Content

I read this book to gain more understanding about these typographic systems before doing the task exercises. In order to execute the task properly, by reading this book, I will be given a deeper understanding on how to properly use these systems.


Fig 3.2 - Page 22 onwards- The Axial System

Page Content

Axial system is one of the simplest systems. When it comes to learning it, understanding the axial system must be started with organizing the message of line space and line breaks. After so, designers began to add word spacings and leading. Later on, designers will start doing experiments on shapes and unusual aligns. The Axis type is very flexible as there are a lot of types. 

Fig 3.3.1  - Page 40 onwards - Radial System
Fig 3.3.2 - Square Focal Point - Radial System


Page Content

Each line in the radial system is anchored towards a focal point, as if its in the center of the circle. Initially, radial components occupy a huge amount of space because each line is seen as an individual element. Afterwards, experimentation begins with curved lines and arrange the spaces between lines. As further the radial system develops, designers focus on grouping lines of text and creating a hierarchy. As it is hard to see clear hierarchy in this system, changes in size and color can affect its hierarchy. Radial isn't always about circles, it can be about right angles, a square focal point; obtuse angles ,120° angle.  

Fig 3.3 - Page 58 onwards - Dilatational System

Page Content

Designers must be aware of the content in dilatational system, as upside down letters might affect readability. Dilatational systems tends to be experimental. The work begins to focus on grouping lines of the texts and organization. Experiments done by designers will investigate multiple dilatational groups and relationships between groups. The use of alignment can help simplify this system.

Fig 3.4 - Page 76 onwards - Random system

Page Content

Designers quickly discover that leaving the lines of text on a horizontal baseline or only slightly angled does not fully communicate randomness. As the work progressed, designers will start begin with using multiple angles, adding elements, and overlapping lines. The angles will eventually become more dramatic as there are more overlapping lines, which reduces legibility. Afterwards, designer will push the sense of randomness to illegibility through repetition, breaking the lines to individual words.

Finding Type: A Novel Typographic Exercise


Page Content

In this article, there are a lot of reference about how to do the next task, which is about Type and Play. According to the article, here are the steps we should do:

  1. Finding an image.
    • Look for an image that is strong and has a character
  2. Deconstructing an image.
    • Observation is needed, outline image or outline the identified shape
  3. Identifying letterforms.
    • from the descontructed image, look for letterforms
  4. Extracting letterforms.
    • Extract it after looking for several letters
  5. Identify a reference.
    • have a reference typeface as a standard for this letter
  6. Refining letterforms.
    • Introduce consistency in height, width and contrast.
    • Deliberate on retaining or removing characteristics.
    • Decide the areas require simplification.


Comments

Post a Comment