Advanced Typography: Exercises 1 & 2

05/04/2023 - 26/04/2023 / Week 1 - Week 4
Wong Khye Qing / 0361000    
Advanced Typography / Bachelor of Design (Hons) in Creative Media
Exercises 


Links:


Lectures
Week 1 - Lecture 1
Advanced Typography: Typographic Systems

There are 8 types of Typographic systems which are: 

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

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

Shape grammar is a set of shape rules that apply in a step-by-step way to generate a set, or language, of designs


Fig. 1.0 Axial system (source: type 365)

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

Fig. 1.1 Radial system (source: type 365)

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

Fig. 1.3 Dilatational system (source: type 365)

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

Fig. 1.4 Random system (source: type 365)

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

Fig. 1.5 Grid system (source: type 365)

Grid System: A system of vertical and horizontal divisions

Fig. 1.6 Transitional system (source: type 365)

Transitional System: An informal system of layered banding.

Fig. 1.7 Modular system (source: type 365)

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

Fig. 1.8 Bilateral system (source: type 365)

Bilateral System: All text is arranged symmetrically on a single axis


Week 2 - Lecture 2
Advanced Typography: Typographic Composition

Fig. 1.9 Principle of Design, emphasis

Principles of Design Composition: Emphasis, isolation, repetition, balance (symmetry and asymmetry), alignment, perspective to name a few.

Fig. 1.10  The Rule of Thirds

The Rule of Thirds: A photographic guide to composition. The intersecting lines are used as a guide to place the points of interest., within the given space.

Fig. 1.11  Environmental grid, Typographic design: Form and communication (2015)

Environmental Grid: Based on the exploration of an existing structure or numerous structures combined.

Fig. 1.12  Form and Movement

Form and Movement: Based on the exploration of an existing Grid Systems. The placement of a form on a page, over many pages creates movement. The forms could represent images, text or color. 


Week 3 - Lecture 3
Advanced Typography: Context & 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.
Fig. 1.13  Cuneiform c. 3000 B.C.E.

The earliest system of actual writing, written from left to right and evolved from pictograms.

Fig. 1.14  Hieroglyphs
  • Ideograms, 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.
  • As phonograms to represent sounds that "spell out" individual words.

Fig. 1.15 Letterforms through the ages

Early Greek (5th C. B.C.E.): Drawn freehand, not constructed with compasses and rules, and they had no serifs. In time the strokes of these letters grew thicker, the aperture lessened, and serifs appeared.

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

English Half Uncials (8th C.): In England, the uncial evolved into a more slanted and condensed form. 

Carolingian Minuscule: Capitals at the start of a sentence, spaces between words and punctuation. It was this style that became the pattern for the Humanistic writing of the fifteenth century; this latter, in turn, was the basis of our lower-case roman type.

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. 

The Italian Renaissance: Newly rediscovered letterforms Antica. The renaissance analysis of form that was being applied to art and architecture was directed toward letterform — resulting in a more perfect or rationalized letter.

Fig. 1.16 ‘Indian’ subcontinent the Indus Valley Civilization (IVC) script

The oldest writing found in the ‘Indian’ subcontinent the Indus Valley Civilization (IVC) script (3500-2000 BCE), is as yet undeciphered and seems to have been somewhat logo-syllabic in nature. 

Fig. 1.16  Brahmi script

India produced the first writing system after the Indus script. All contemporary Indian scripts as well as several hundred other scripts found in Southeast and East Asia are descended from Brahmi, one of the most prominent writing systems.


Week 4 - Lecture 4
Advanced Typography: Designing Type

1. Research
- Be familiar with the terminology, rules, and anatomy of type.
- Ascertain the type's usage, including its intended use and the many applications to which it will be put.
- Research currently used typefaces to get ideas, inspiration, references, context, usage patterns, etc.

2. Sketching
- Traditional (using brushes/ pens, ink and paper)
- Digital sketching (Wacom)

3.  Digitization
Glyphs App and FontLab are professional software programmes. Some designers don't just utilise the specialty font programmes; they also use Adobe Illustrator. The purist, however, disapproves of this.

4. Testing 
Testing outcomes are used to improve and rectify various parts of the font. The testing process includes prototyping, which yields valuable input. The readability and legibility of the typeface become crucial factors depending on the typeface category (display type/text type). If the typeface is a show type, where the expression of the shape is somewhat more important, it is less important. 

5. Deploy
There are always teething issues that were not evident during the prototype and testing stages, even after a font has been deployed. Therefore, revision work doesn't end with deployment. To ensure that the teething problems are kept to a minimum, testing must be rigorous. 

Fig. 1.17  Construction grid for the Roman Capital using 8 x 8 cells.

Grids (with circular shapes) can make letterform building easier, and using them is one way to build, develop, or design your letterform.

Fig. 1.18  Classification 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 (overshoot). This 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.


 
Instructions

 

Week 01 
Typographic Systems 

Task 1: Exercise 1 - Typographic Systems

We were tasked to complete eight typographic system with the multiple using the given information. The system includes, Axial, Radial, Dilatational, Random, Grid, Modular, Transitional and Bilateral systems. We were also told to use the Font families that were provided by Mr. Vinod and apply to the information. 

We must also follow the below requirements when creating the working file:
- Size 200 x 200 mm
- Colors: Black, an additional color

In between the Process...
Fig. 2.0 Sketches, Week 1 (07/04/2023)

I have done a few systems without sketches, but I started to struggle after a few systems, which is why I brainstormed for some ideas later on and sketched them out so that my ideas could retain on the paper. 
Sketches really helped me in brainstorming for ideas, although it not all the ideas were able to be get through along the process, but I still think that this is one of the crucial part of noting down a sudden idea in the mind. 


Week 01 
In class practical


Fig. 2.1 First attempt and amendment, Week 1 (05/04/2023)

We were tasked to create the Axial system in the class with a given time. I have managed to finish my first attempt on the system. This was eventually given feedbacks by Mr. Vinod about the design and improvements that could be done. I was advised to be aware of the leading for the contents so that it will not be too clutter. I have made amendments towards the design and adjusted on the font weights as well as the leadings in between the contents. 

Week 01 Attempts
Fig. 3.0 First Axial System attempts, Week 1 (06-07/04/2023)

Axial System
On the left was the attempt from the class. Meanwhile second one in the center, I tried making axial curve around the side of the canvas as it will bring motion to the graphics.
The third one on the right was made by shearing the letters to form an illusion of a cube shape while still obeying the Axial System. 

Left: ITC Garamond Std (Bold), Gill Sans Std (Italic, Bold, Regular)
Center: ITC Garamond Std (Bold, Book), Gill Sans Std (Book, Light, Light Italic)
Right: Univers LT Std (Bold Condensed), Gill Sans Std (Bold, Italic, Regular)




Fig. 3.1 First Radial System attempts, Week 1 (07/04/2023)

Radial System
I tried adding my chosen color to this system so that there will be a contrast. I also tried making the information for the time slots to be in a single line instead of a few lines to make an interesting layout. I curved the time slots information so that it could fit into the whole canvas instead of a straight line. 
For the second one on the right, I have tried using zig zag lines to make an interesting distorted lines, The headings were highlighted with red so that it could boost the visual aspect of the design. 

ITC Garamond Std (Bold Condensed), Gill Sans Std (Light), Serifa Std (Light, Light Italic)

Fig. 3.2 First Dilatational System attempt, Week 1 (07/04/2023)

Dilatational System
I tried working on the basic first so that I could have a grasp on how the system works. I tried adding text on circle paths and made it look like some curvy waves. I was also mindful of the hierarchy of the placement of the contents. 

Gill Sans Std (Light Italic), Serifa Std (Black) Futura Std (Heavy, Book)

Fig. 3.3 First Random System attempt, Week 1 (08/04/2023)

Random System
I was not really confident on this system, so I had made my first attempt with basic random arrangement so that I could slowly understand the information in the chaos of a Random System. Regardless, I have also made an attempt to use different fonts on the Heading to show some randomness in the title. 

Gill Sans Std (Light Italic, Extra Bold), Serifa Std (Light, Regular, Black) Futura Std (Heavy, Book), Bembo Std (Extra Bold Italic)



Fig. 3.4 First Grid System attempts, Week 1 (08/04/2023)

Grid System
I have created grids to make sure that I could make it as a guide for my contents. On the left, I have tried to make the text to align to the left and right with Extra bold font weight to make it look striking. On the right, I have tried to use the rectangle shape to show and positive and negative effect for the title. 

Left: Futura Std (Extra Bold, Heavy, Medium), Gill Sans Std (Regular, Light Italic)
Right: ITC Garamond Std (Ultra, Book, Book Italic), Futura Std (Bold Oblique)

Fig. 3.5 First Modular System attempt, Week 1 (08-09/04/2023)

Modular System
This system is almost a similar system towards Grid, which is why grids were also used for the canvas. It consist of 6 modules being used. 

Left: Janson Text LT Std (Bold), ITC Garamond Std (Book Italic), Gill Sans Std (Regular)
Fig. 3.6 First Transitional System attempt, Week 1 (09/04/2023)

Transitional System
I tried to blend in the contents with lighter opacity texts behind the main texts to make a faint transition.

Janson Text LT Std (Bold Italic, Bold), Gill Sans Std (Light Italic, Italic)



Fig. 3.7 First Bilateral System attempts, Week 1 (09/04/2023)

Bilateral System
The one on the left was a straightforward design, I have tried to change the colors of the contents so that there would be a clearer hierarchy of contents for viewing. The one on the right features the time slot on top and below the canvas that is symmetry.   

Left: Bembo Std (Extra Bold, Bold, Regular), ITC Garamond Std (Book Italic)
Right: Futura Std (Extra Bold, Medium, Heavy), Univers LT Std (Oblique, Light Oblique)


Week 02 
Improvements & Next Attempts

Fig. 3.8 Axial - amendments, Week 2 (12/04/2023)

Mr. Vinod has advised that I change the font weight of the time slots from Light to Regular as the texts were distorted which might affect the readability.  

Fig. 3.9 Rotational - amendments, Week 2 (12/04/2023)

The text color for "All Ripped Up" was changed from black to white to improve the readability. Meanwhile, the font weights for the time slots information were changed from Light Italic to Italic as the words were distorted to a zig zag pattern. 
Fig. 3.10 Dilatational - second attempt, Week 2 (10/04/2023)

I wanted to make a dilatational that is not just revolve around the a flat surface, which is why I distorted the contents so that they will look like they revolve around but in a more 3-dimensional way. Regular font was also inputted for the time slot information for better readability. 

Fig. 3.11 Random - second attempt, Week 2 (14/04/2023)

Random was a hard system to design. I met with challenges such as having hard time changing the properties for the texts as a lot of texts were cluttered together. Which is why I tried splitting the contents into a few layers to deal with so that it will be easier to manage. 
I tried to make the contents of it looks like it was going to explode out. I have also distorted the some words as well as trying to combining different fonts to words to make them feel random. The title was put in red color in order to be a contrast to the chaos behind. 

Fig. 3.12 Grid - amendments, Week 2 (12/04/2023)

The previous design has a distracted rectangle which was changed into an outline rectangle which looks less distracting. Light Oblique of the information were changed into Book Oblique to make it have better readability. 

Fig. 3.13 Modular - second attempt, Week 2 (11/04/2023)

I have tried using a dark background and making the the contents in a combination or rectangle and circle to have more variety shapes. The boxes were underlined to form a visual hierarchy.
Fig. 3.14 Transitional - second attempt, Week 2 (10/04/2023)

I have tried an easier approach for the Transitional system so that it will look simple and easy to digest.


Final design - Task 1: Typographic Systems

Fig. 4.0 Axial System Final Design - JPG, Week 2 (14/04/2023)

Fig. 4.1 Radial System Final Design - JPG, Week 2 (14/04/2023)
Fig. 3.2 Dilatational System Final Design - JPG, Week 2 (14/04/2023)

Fig. 4.3 Random System Final Design - JPG, Week 2 (14/04/2023)

Fig. 4.4 Grid System Final Design - JPG, Week 2 (14/04/2023)

Fig. 4.5 Modular System Final Design - JPG, Week 2 (14/04/2023)

Fig. 4.6 Transitional System Final Design - JPG, Week 2 (14/04/2023)

Fig. 4.7 Bilateral System Final Design - JPG, Week 2 (14/04/2023)

Fig. 4.8 Task 1 Final Design: (Gridless) - PDF, Week 2 (14/04/2023)

Fig. 4.9 Task 1 Final Design (Grid) - PDF, Week 2 (14/04/2023)



Task 1: Exercise 2 - Type and Play

We were required to capture an object of the same element in order to analyze, dissect and identify the possible letterforms from the elements. After that, we will need to refine the extracted letters into a more consistent and complete letterforms step by step to show progress. Once finished, we will need to integrate the letterforms with an image that has a correlation to it.   

We must also follow the below requirements for the working file and export:
- Size 1240 x 1240 px


Week 02
Chosen Subject - Attempt 1

Fig. 5.0 Chosen Subject - Week 2 (16/04/2023)

My chosen subject is the metal scouring pad found in the kitchen. This pad has interesting and different patterns with its twist and turns of its thin strips. Obvious letters such as X would most likely be spotted at first glance as the strips are stacking on each other. 

Fig. 5.1 Extraction process, Attempt #1, - Week 3 (17/04/2023)

Fig. 5.2 Extraction results, Attempt #1, - Week 3 (17/04/2023)

I have used the Pen Tool in Illustrator to trace the possible letters that I saw. H, A, P, X and K were extracted from the image. I wanted the letterforms to be bolder instead of thin lines, so that it can be visible. I have also noticed from the tracing results that there are minor twist to the strips. 

Reference 
Fig. 5.3 Reference font - Wonton

When I first saw the patterns on the scouring pad, the thin strips patterns reminded me of the font used in Chinatown noodle packaging. There were also twist and turns with consistent thickness to each strokes. This somehow made me think that I might be able to make my extracted letters to have some thin and thick strokes in order to resemble the thin strip patterns. 


Week 03
Study, Re-extract, Refining - Attempt 2


Fig. 5.4 Study of thin strip, Attempt #2, Week 3 (21-22/04/2023)

Study
After the feedback from Mr. Vinod, I went back to my original image to study the twist and turns of the thin strips. I have also started tracing thinner strips as suggested, in order to get different inputs and learn the bending of the strips in different dimensions. The looks of the paths will look more natural and better with the integration of thinner parts of the strips. 

In this study I have noticed that the bending of the thin strips are three dimensional. I have also split the strips into parts to simplify the structure for my understandings. The bending could be split into few parts as in the 5th picture in Figure 4. Tracing and creation of the paths could be done easier if they were done separately for the bending parts, as seen in blue and red. 

Re-extract

Fig. 5.5 Extraction process, Attempt #2, Week 3 (22/04/2023)

Fig. 5.6 Extraction results, Attempt #2, Week 3 (22/04/2023)

After the study, I have learnt more about the twist and turns of the scouring pad strips. I started finding letters in the image and extracted H, O, P, K and X. 

Refining
Fig. 5.7 Refinement process, Week 4 (23-25/04/2023)

The letters have went through 4 stages of refinements after the extraction. For the First stage, I rotated the letters so that it they will stay on the same baseline and be consistent. The scale of the letters were estimated to look almost the same as each others, as this is the initial phase it will just act as an image of how big I wanted the letters to look. 

As for the Second stage, I had an image of having a sharp edge facing left for each letters. Which is why I swapped both of the Vertical body of "H" and made sure the edges were mostly facing left side. 

Fig. 5.8 Bounding boxes

At the Third stage, I have started placing bounding boxes for each letters so that the width and height of each letters will be able to be consistent. I also made sure to reduce the width of the "O" to let it fit into the box. 

For the Fourth stage, the left sharp edges were integrated to almost all the letters. Twist and turns of the letters were made more noticeable in order to mimic the bending of the scouring pad thin strips. A bolder tail was also added for "P" for a steadier look with an additional edge on the left. 

Fig. 5.9 Comparison of extracted with refined letters

Type Showcase 

Fig. 5.10 Type showcase posters, Attempt #1&2 - Week 4 (25/04/2023)

I have made 2 attempts on the posters. Unfortunately, Mr. Vinod pointed out that the images used do not relate to the the letters that I have integrated. 

Fig. 5.11 Type showcase posters, Attempt #3 - Week 4 (27/04/2023)

After receiving the feedbacks, I have made another attempt and chose the original image that I have used to extract the letters. 
The letters, H, O, P, X and K were arranged below the posters and blended "Pin Light" with the background. Besides that, I have duplicated the refined letters and scattered them around randomly and blended "Multiply" with the background. 

Fig. 5.12 Type showcase posters, Attempt #4 - Week 5 (04/04/2023)

This final attempt was made to standardize the overall looking of the showcase poster for the types. With logo and the credit names in the poster, it will make it look like a real poster or an album art


Final Type and Play 
Fig. 6.0 Compiled process - Week 3-4 (16-25/04/2023)


Fig. 6.1 Comparison of extracted and refined letters - Week 4 (24/04/2023)

Fig. 6.2 Final Type Design - Week 4 (25/04/2023)

Fig. 6.3 Final Type Showcase Poster design - Week 5 (04/04/2023)

Fig. 6.4 Final Type and Play, PDF - Week 4 (29/04/2023)




Feedbacks

Week 4 - Type and Play
General Feedback: The refined typography is good.
Image Feedback: The image does not relate to the refined typography and it needs connection to the image. Try finding a new image or use the original image.
Week 3 - Type and Play
It will be better for you to study the different image to the same topic and make more attempts towards from different angles, study the form and structure. The metal strip might be hard to extract, as there were twist and turns.
 Week 2 - Typographic systems General Feedback:
Specific color block in one corner might be too distracting and affect the hierarchy of the design. Adding the column gutters into the Grid or Modular system could help fit the contents in a module and more effective.
Specific Feedback: Readability should be consider for Thin font weights as it might be harder to read when distorted with different effects. Week 1 - Axial System exercise
Interesting. Spacing between the headings and contents should be more to prevent cramping. The uppercase alphabet for the time is visually bigger than the numerical number can be fixed by small caps or downsize the font size by 0.5.



Reflections

Experience
I have experienced the fundamentals of typographic systems that I have not really looked into it and cared too much. They are the fundamentals and guide for designers to get a more consistent and structured look for their designs. I have also enjoyed working with Random System as it allows me to arrange the information randomly. It has taught me that there could be order in the chaos, everything will be laid out randomly and the viewers will patch up the puzzle one by one.

Observation
I have observed that there might be a lot of possibilities for the Type and Play assignment. The subjects could be complicated and there will be even more possibilities. Especially for my subject, which is a Kitchen scouring pad, there might be a lot of possibilities of the twist and turns of the subject which made the refining process of the letters much harder. I have also observed that bounding boxes from the Type and play to be useful for keeping the texts within a more consistent width and height.

Findings
I have found that it will be much easier to start a design process from scratch by sketching. From the typographic system assignment, I have struggled getting ideas which is why I started sketching out the possibilities and the ideas that I have on a piece of paper to gather as much ideas as possible before I proceed to create in design programs. I have also found that the Type and Play is a nice assignment that train us to create designs by capturing the inspirations and ideas from from subjects around us which could be a way to let us be more open minded and creative.



Further reading
Fig. 7.0 Typographic Systems by Kimberly Elam (2007)

This book was a good guide for me while I was doing the Typographic Systems assignment. This book has shown enough examples and explanation for me to understand more about the systems that I was confused about.

Fig. 7.1 Ideas for Dilatational System (Page  67)

The example above has shown me the possibilities of this system and thus inspired me to create perspective and distort the information to make it look three-dimensional. 

Fig. 7.2 Ideas for Modular System (Page 127)

The example above has also shown me that this system does not just limit to rectangles or squares, which is also a good guidance on telling me not to limit myself too much while designing.