Advanced Typography- Task 1: Exercises

31/8/2022- 7/10/2022 / Week 1 - Week 6
Chuah Kwai Pin / 0348376
Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University 
Task 1: Exercises 


LECTURES:

Lecture 1: Typographic Systems
All design is based on a structural system, and there are eight major variations with an infinite number of permutations, including:
  • Axial
  • Radial
  • Dilatational
  • Random
  • Grid
  • Modular
  • Transitional
  • Bilateral
Typographical organization is complex because the elements are dependent on communication in order to function. There are also additional criteria such as hierarchy, order of reading, legibility, and contrast. The typographic systems are similar to what architects term shape grammars. The typographic systems has a set of rules that is unique and provides a sense of purpose that focuses and directs the decision making. It provides a solid framework that guides learners.
  1. Axial system: All elements are organised to the left or right of a single axis.
  2. Radial system: All elements are extended from a point of focus.
  3. Dilatational system: All elements expand from a central point in a circular fashion.
  4. Random system: Elements appear to have no specific pattern or relationship.
  5. Grid system: A system of vertical and horizontal divisions.
  6. Transitional system: An informal system of layered banding.
  7. Modular system: A series of non-objective elements that are constructed in as a standardised units.
  8. Bilateral system: All text is arranged symmetrically on a single axis.
Many designers focus primarily on the grid system for design and are unaware of the potential that other systems hold. An understanding of the systems organisation process allows the designer to break free from the "rigid horizontal and vertical grid systems of letter press". It allows designers to use more fluid means to create typographic messages.

Lecture 2: Typographic Composition

1) Principles of Design Composition: Emphasis, Isolation, Repetition, Symmetry and Asymmetry, Alignment and Perspective.

2) The Rule of Thirds: Photographic guide to composition. A frame that can be divided into 3 columns and 3 rows, intersecting lines are used as guide to place points of interest.

3) Environmental Grid: Based on the exploration of an existing structure or numerous structures combined. An extraction of crucial lines both curved and straight are formed. Designer then organizes his information around the super-structure, which includes non-objective elements to create a unique and exciting mixture of texture and visual stimuli.

4) Form and Movement: Based on the exploration of an existing Grid System. To explore the multitude of options the grid offer, to dispel the seriousness surrounding the application of the grid system, and to see the turning of pages in a book as a slowed-down animation in the form that constitutes the placement of image, text and colour.

Lecture 3: Context & Creativity

Why is handwriting important in the study of type / typography?
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.

Cuneiform (3000 B.C.E)
  • The earliest system of actual writing, was used in a number of languages.
  • Distinctive wedge form was the result of pressing blunt end of a read stylus into wet clay tablets.
  • Cuneiform characters was written from left to right, and soon evolved to pictograms. 
Hieroglyphics (2613-2160 B.C.E)
  • As ideograms, to 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 sound that "spell out" individual words.
1) Early Greek (5th C.  B.C.E.): Drawn freehand, not constructed with compasses and rule, and they had no serifs. In time the strokes grew thicker, the aperture lessened and serifs appeared. Often read in a format as boustrophedon, "as the ox plows" so from left to right, then switch from right to left.

2) Roman Uncials: Letters were becoming more rounded, the curved form allowed for less strokes ad could be written faster.

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

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

5) Black Letter (12-15 C. CE): Characterised 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.

6) The Italian Renaissance: Humanist named the 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.

The oldest writing systems present in Southeast Asia were Indian scripts. There were a few, but the most important would be Pallava, a South Indian script originally used for writing Sanskrit and Tamil. Pallava was highly influential, becoming the basis for writing systems across Southeast Asia.

Jawi, the Arabic-based alphabet was introduced along with Islam. In modern Malaysia, Jawi is of greater importance because it's the script used for all our famous works of literature. Every hikayat and Malay charm book is written in Jawi.

Lecture 4: Designing Type

1) Type design carries a social responsibility so one must continue to improve its legibility.

2) Type design is a form of artistic expression.

General Process of Type Design:
1) Research
  • Understand type history, type anatomy and type conventions
  • Determine the type's purpose or what it would be used for
  • What applications it will be used in (school busses, airport signages, etc.)
2) Sketching
  • Some designers sketch their typeface using the traditional tool set (brushes/pens, ink and paper) then scan them for digitization.
  • Some designers sketch their typeface using digital tool sets such as Wacom directly into a font design software.
3) Digitization
  • Digitization of typefaces software: FontLab and Glyphs App
  • Use Adobe Illustrator to design or craft the letterforms, and then introduce it into the specialized font apps.
4) Testing
  • Important component in the design thinking process. 
  • Results of the testing part is the process of refining and correcting aspects of the typeface.
5) Deploy
  • Even after deploying a completed typeface there are always teething problems that did not come to the fore during the prototyping and testing phases.
  • The task of revision does not end upon deployment.
Typeface Construction
Roman Capital: Using grid that consists of a square and inside it a circle that just touches the lines of the square in four places. Within the square there is also a rectangle. This rectangle is three quarters the size of the square and is positioned in the centre of the square.

Construction and Considerations
An important visual correction is the extrusion of curved (and protruding) forms past the baseline and cap line. 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. It is not possible to simply place letters next to each other with equal spacing between them. The letters must be altered to a uniform 'visual' white space. This means that the white space between the letters should appear the same.

Lecture 5: Perception and Organisation

Perception: The way in which something is regarded, understood, or interpreted. Perception in typography deals with the visual navigation and interpretation of the reader via contrast, form and organisation of the content. Content can be textual, visual, graphical or in the form of colour.

Contrast: To make design work and meaning pop out- clearly and unambiguously, and with flair. Carl Dair posits 7 kinds of contrast, including:

1) Size
  • Provides a point to which the reader's attention is drawn. 
  • The most common use of size is in making a title or heading noticeably bigger than the body text.
2) Weight
  • Describes how bold type can stand out in the middle of lighter type of the same style.
  • Using rules, spot, squares also provide a 'heavy area' for a powerful point of visual attraction or emphasis.
3) Contrast of Form
  • The distinction between a capital letter and its lowercase equivalent, or a roman letter and its italic variant.
  • Condensed and expanded versions of typeface are also included.
4) Contrast of Structure
  • The different letterforms of different kinds of typefaces.
  • Example: Monoline sans serif, traditional serif, or an italic and a blackletter
5) Contrast of Texture
  • Putting together the contrasts of size, weight, form, and structure, and applying them to a block of text on a page. 
  • Refers to the way the lines of type look as a whole up close and form a distance.
6) Contrast of Colour
  • Suggested that a second colour is often less emphatic in values than plain black on white. 
  • Important to give thought to which element needs to be emphasized and to pay attention to the tonal values of the colours that are used.
7) Contrast of Direction

Form: Refers to the overall look and feel of the elements that make up for the typographic composition. It is the part that plays a role in visual impact and first impressions. The interplay of meaning and form brings a balanced harmony both in terms of function and expression.

When a typeface is perceived as a form, it is no longer read as a letter because it has been manipulated by distortion, texture, enlargement, and has been extruded into a space.

Gestalt: The way a thing has been "placed" or "put together". Gestalt theory emphasizes that the whole of anything is greater than its parts. Therefore in design, the components/ elements that make up the design is only as good as its overall visual form. 

1) Law of Similartity
  • Elements that are similar to each other tend to be perceived as a unified group. (Colour, orientation, size or motion)
2) Law of Proximity
  • This straightforward law states that items close to each other tend to be grouped together, whereas items further apart are less likely to be grouped together.
3) Law of Closure
  • The mind's tendency to see complete figures of forms even if a picture is incomplete, partially hidden by other objects.
4) Law of Continuation
  • Humans tend to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect.
5) Law of Symmetry
  • To ensure awareness and inform your work process. Organisation of information in the form of laying out complex content in a hierarchical manner requires practice and the knowledge gained.
6) Law of Simplicity

INSTRUCTIONS:




TASKS

Task 1: Exercise 1- Typographic Systems
In this first exercise, we are to explore the 8 typographic systems learned from our first lecture which includes: Axial, Radial, Dilatational, Random, Grid, Transitional, Modular and Bilateral. The content that we have to include is given in the MIB and we have to pick one out of the 3 titles provided.
- Size 200 x 200mm
- Mainly black colour with an additional colour
- Minor graphic elements such as lines and dots

Week 1 Progress

1) Axial System

Fig. 1.1 Axial system, Week 1 (6/9/22)

After watching the lecture and reading the book on typographic systems, I found axial system to be the most straightforward one out of all 8 systems. However, there were still some complications as to keeping the text balanced on both sides of the axis.

Fonts:
Left: Adobe Caslon Pro (Regular & Bold) and Univers LT Std (Bold, Bold Oblique, Oblique, Roman)
Right: Adobe Caslon Pro (Regular & Bold) and Univers LT Std (Bold, Oblique, Roman)

2) Radial system

Fig. 1.2 Radial system, Week 1 (6/9/22)

For radial system, it reminded me of sun rays and wheels because of the circular nature. It required quite some precision in adjusting the texts so that it follows the curve of the circles

Fonts:
Left: Gill Sans Std (Regular & Bold) and Univers LT Std (Regular, Bold & Oblique)
Right: Gill Sans Std (Regular & Bold) and Univers LT Std (Regular, Bold & Oblique)

3) Dilatational system

Fig. 1.3 Dilatational system, Week 1 (6/9/22)

While doing dilatational system, I learned that we could make a circle and type on the path. At first I struggled with it because my text kept disappearing, but after trying a few more times, I got it solved. On the left, I wanted to attempt the concept of a dandelion whereby the information detaches from the main body and flows out.

Fonts:
Left: Adobe Caslon Pro (Regular & Bold) and Univers LT Std (Bold, Roman)
Right: Adobe Caslon Pro (Regular & Bold) and Univers LT Std (Bold, Roman)

4) Random system

Fig. 1.4 Random system, Week 1 (6/9/22)

For random system, I really tried to make it as chaotic as possible but still keeping some sort of order in it. I used almost all the 10 typefaces given and tried to make it look so bizarre yet interesting enough to make people want to read it.


Fonts: Most of the 10 typefaces

5) Grid system

Fig. 1.5 Grid system, Week 1 (6/9/22)

Surprisingly, grid system was one of the more difficult systems for me. Since there is also a modular system, I was worried that I would mix the both of them up. For this system, I made use of the rows and columns in InDesign so that it could guide my eyes and layout to look like it follows the grid system.

Fonts:
Left: Adobe Caslon Pro (Regular & Bold) and Univers LT Std (Bold, Bold Oblique, Oblique, Roman)
Right: Adobe Caslon Pro (Regular & Bold), Univers LT Std (Bold, Bold Oblique, Oblique, Roman) and Futura Std (Medium Condensed)



6) Transitional system

Fig. 1.6 Transitional system, Week 1 (6/9/22)

For transitional system, I understood it to be layered information so I tried to layer all my text so that some of them are really close together but still readable.

Fonts:
Left: Adobe Caslon Pro (Regular & Bold), Univers LT Std (Oblique, Roman) and Futura Std (Heavy & Book)
Right: ITC New Baskerville Std (Roman), Univers LT Std (Oblique, Roman) and Futura Std (Heavy & Medium)


7) Modular system

Fig. 1.7 Modular system, Week 1 (6/9/22)

After watching the tutorial for modular system, it was quite clear to me how I should structure my information. I had to use boxes for the layout on the right because without it, it might look like grid system.

Fonts:
Left: Adobe Caslon Pro (Regular & Bold) and Univers LT Std (Bold, Bold Oblique, Oblique, Roman) 
Right: Univers LT Std (Bold, Bold Oblique, Oblique, Roman) and Futura Std (Book & Bold)


8) Bilateral system

Fig. 1.8 Bilateral system, Week 1 (6/9/22)

For bilateral system, it was quite straightforward like axial system as well. It is where all information has to be lined up in the center neatly, just like making an invitation card. I tried to experiment tilting it like the one on the right since it adheres to the bilateral system as well.

Fonts:
Left: Univers LT Std (Bold, Bold Oblique, Oblique, Roman) and Futura Std (Book, Heavy & Bold)
Right: Univers LT Std (Bold, Bold Oblique, Oblique, Roman) and Futura Std (Book, Heavy & Bold)

After Feedback on Week 2 
Based on feedback given on week 2, I made some changes and adjustments to some of my layouts.

Fig. 2.1 Radial system, Week 2 (10/9/22)

For this radial system, I adjusted the text and information so that it is visually more centered. I also changed the background colour to blue and added a white circle behind the text so that it is more readable. Overall, it reminded of a rotating disc because of how the text is being laid out.

Fig. 2.2 Dilatational system, Week 2 (10/9/22)

For this layout, I tried to give a better ending to the text by adding a smaller dot behind it. I also added a few more dots to guide the reader's eyes on the flow of information, from the bigger circle to the smallest.

Fig. 2.3 Grid system, Week 2 (10/9/22)

I made a new layout for the grid system only because I was not satisfied with the previous 2. I tried to keep most of the text towards the left side and leave details on location on the right side so that it is given emphasis.

Fig. 2.4 Transitional system, Week 2 (10/9/22)

For transitional system, I just removed the extra line at the bottom that was next to Lecture Theatre 12.

Fig. 2.5 Bilateral system, Week 2 (10/9/22)

For bilateral system, I decided to work on my first layout instead because the contrast between text and background in the second one was difficult to change. Instead of keeping all my information in one straight line, I made it branch out to the side which consists of information about the location.

Final Task 1 - Exercise 1: Typographic Systems

Fig. 3.1 Final Axial System, Week 3 (13/9/22)

Fig. 3.2 Final Radial System, Week 3 (13/9/22)

Fig. 3.3 Final Dilatational System, Week 3 (13/9/22)


Fig. 3.4 Final Random System, Week 3 (13/9/22)

Fig. 3.5 Final Grid System, Week 3 (13/9/22)

Fig. 3.6 Final Transitional System, Week 3 (13/9/22)

Fig. 3.7 Final Modular System, Week 3 (13/9/22)

Fig. 3.8 Final Bilateral System, Week 3 (13/9/22)

Fig. 3.9 Final 8 Typographic Systems - PDF, Week 3 (13/9/22)

Fig. 3.10 Final 8 Typographic Systems with guidelines - PDF, Week 3 (13/9/22)

Task 1: Exercise 2- Type and Play
Part 1: Finding Type

We are tasked to select images between man-made objects, structures and nature to analyse, dissect and identify potential letterforms within the dissected image. The forms will then be explored and digitized.
- Uppercase or lowercase only
- Choose reference from the 10 typefaces provided

1) Chosen image

Fig. 4.1 Chosen image - flower, Week 3 (13/9/22)

This was a picture that I took in a botanical garden at Bukit Tinggi. I love nature and I always take pictures of unique and bright coloured flowers like these when I travel. From the flower itself, I can see thick and thin lines that have potential in forming letterforms. Some of the letters I found include K, L, E, W, X, Y and A.

2) Extracting Letterforms

Fig. 4.2 Extracting letterforms from chosen picture, Week 3 (13/9/22)

I used the pen tool and curvature tool in Adobe Illustrator to trace out the letterforms that I could see. 

Fig. 4.3 Extracted 7 letterforms, Week 3 (13/9/22)

From these 7 letterforms, I had to choose 5 which I liked the most and develop from there. Out of all of them, I preferred K, E, Y, X and A.

Fig. 4.4 5 Chosen letterforms, Week 3 (13/9/22)


Reference:
Fig. 4.5 Typeface reference - Future Std Book, Week 3 (13/9/22)

From the 10 typefaces, I found Futura Std to have a similar letter width as my extracted letterforms and it is also a sans serif font. The reference we chose is help us with the construction and refinement of our typeface. 

3) Digitisation

Fig. 4.6 Original Organic Letterforms, Week 3 (13/9/22)

From these extracted letterforms, I tried to straighten them and make it look less organic and crooked. The thickness of the letter strokes are also very inconsistent so I tried to keep the thickness the same so that there is still a sense of cohesiveness.

Fig. 4.7 Letterform digitisation, Week 3 (13/9/22)

Fig. 4.8 Letterform digitisation with guides, Week 3 (13/9/22)

Attempt 1:
Fig. 4.9 Attempt 1 on digitization, Week 3 (13/9/22)

For my first attempt, I tried to straighten most of the letters so that it follows the same letter width as the letters in Futura Std font. I did not really change the thickness of the strokes so it still looks quite similar to the original extracted letterforms. However, they are a little too thin to be read from afar so I decided to make the strokes thicker.

Attempt 2:
Fig. 4.10 Attempt 2 on digitization, Week 3 (13/9/22)

In my second attempt, I tried to thicken the strokes and straighten the letter "E" so that it does not look so awkward. I also added tried to make the letterforms consistent by adding a crooked element into the letters. 

Attempt 3:
Fig. 4.11 Attempt 3 on digitization, Week 3 (13/9/22)

After the feedback session given on Week 3, I began further refine my letterforms with more care. When I placed the reference font, Futura Std behind my letterforms in attempt 2, I realised that the cap height is different. Hence, I had to change my letterforms and make them the same as my reference font. I also thicken some of the strokes again like for letters E, Y and K. Overall, I think it looks much better than the previous attempts because they look too thin and light.

Fig. 4.12 Making changes to letter A, Week 4 (20 /9/22)

As I was comparing the letter A of my letterform with Futura std, I realised that the x-height has a big difference. Hence, I readjusted the letter to make it look more similar to the letter A in Futura Std.

Fig. 4.13 Progress of letterforms, Week 4 (20 /9/22)

Fig. 4.14 Extracted letterforms and Final type design, Week 4 (20/9/22)

Fig. 4.15 Type Showcase, Week 4 (20/9/22)

After we have finalised our type, we were told to place it on an image and see if it works well altogether. The image I have chosen is a type of flower. As I was doing some research to see if "Keyxa" is a word, the search results showed usernames of people. Hence, I decided to make "Keyxa" a flower's name since flowers usually also have very unique names like Chrysanthemum, Hydrangea, Dahlia and etc.

Final Task 1 - Exercise 2: Type and Play Part 1


Fig. 4.16 Final Compilation of Process, Week 4 (20/9/22) 

Fig. 4.17 Extracted form and final type, Week 4 (20/9/22)

Fig. 4.18 Final Type Design, Week 4 (20/9/22)

Fig. 4.19 Final Type Design Letter "K", Week 4 (20/9/22)

Fig. 4.20 Final Type Design Letter "E", Week 4 (20/9/22)

Fig. 4.21 Final Type Design Letter "Y", Week 4 (20/9/22)

Fig. 4.22 Final Type Design Letter "A", Week 4 (20/9/22)

Fig. 4.23 Final Type Design Letter "A", Week 4 (20/9/22)


Fig. 4.24 Final Type Design Showcase, Week 4 (20/9/22)



Task 1: Exercise 2- Type and Play
Part 2: Type and Image

For Part 2, we are required to combine visual with a word or sentence of our choice. The main objective of the task is to enhance or support the interplay between the word or sentence with the chosen visual.

Our given themes were 
1) Cultural Prosperity Celebration:  A Totem of Renewing Festive Culture
2) Renewal of life Return: Contemplate human beings' relationship with all things

From these two themes, we are to either take original photographs or illustrate something that relates to the theme, and then incorporate the word or phrase into the visual.

Attempt 1:
Fig. 5.1 Photograph of my CNY decorations at home, Week 5 (27/9/22)

From the two themes given, I have decided that Cultural Prosperity would be much easier for me to work and experiment on. Hence, I went home and rummaged through a bag of Chinese New Year decorations and laid them out to take a photo of them. The 3 Chinese gold ingots, also known as "Yuan Bao" are a symbol of prosperity. Whereas the lucky cat in the center with the word "Fu" below it means bringing good fortune and wealth. Therefore, I felt that these decorations were a great reflection of the word "Prosperity".

Fig. 5.2 First Attempt on word and visual interplay, Week 5 (27/9/22)

As the final outcome will be used as a wallpaper, the image had to be cropped into 6000 x 3000px dimension. While I was figuring out how to incorporate the word with the visual so that it sits naturally together, I went online to search for some doable word effects.

Fig. 5.3 Adjusting gradient on the word, Week 5 (27/9/22)

I thought about playing with the gradient of the words to bring out a metallic gold effect, since the overall graphics is pretty much shining in gold, adding a different colour will not go well with the visual. After that, I just placed the letters on top of the visual image and trimmed out the parts that are overlapping with the visual. I then make the words pop by distorting and transforming it.

After Feedback on Week 5:

While I received feedbacks from my lecturer, I realised that I had forgotten that my final outcome will be used as a wallpaper. Mr. Vinod advised us to ask ourselves if we will use our work as a wallpaper, and if not, that means we have to keep making improvements. With that question in mind, I began working on my second attempt for this task.

Fig. 5.4 Second attempt on word and visual interplay, Week 6 (4/10/22)

For my second attempt, I went for a more illustrative approach whilst keeping the same theme and visual concept of the lucky cat. I also limited the number of colours to red, orange, black and grey for this since it should not be too harsh as a wallpaper. Besides having the lucky cat as the main focus of the illustration, I also added some simple graphic elements such as circles, rectangles and lines to fill up and balance the space in the background. I then fitted the word "Prosperity" into the background and make the letters flow naturally to fill up the space behind the cat.

While I was quite happy with this compared to my first attempt, I tried asking myself and my friends if they would use this as a wallpaper. I also tested it out on my own laptop wallpaper and realised that it is still too cluttered with very little space for me to place my files and icons on my desktop. 

Fig. 5.5 Third attempt on word and visual interplay, Week 6 (4/10/22)

I then played around and rearranged the visuals and elements to leave more negative space. Compared to Fig. 5.4, it definitely looks a lot less busy. I also tried putting the cat into the circle and conveniently make that into the letter "O" so that it still forms the word "Prosperity" when you see it. Once I was satisfied, I then tested it out as a laptop wallpaper again to find that the contrast between the desktop file icons and background colour is not very well achieved. 

Fig. 5.6 Fourth attempt on word and visual interplay, Week 6 (4/10/22)

I then changed the background colour into a dark grey and make the rest of the visuals and elements stand out by using the vibrant orange, red and cream colours. I realised that the dark background is much more comfortable on the eyes and the word "Prosperity" pops out a lot compared to Fig 5.5. Overall, I was quite satisfied with this darker version and went to test it out as a wallpaper again.

Fig. 5.7 Screenshot of my desktop with the lighter wallpaper, Week 6 (4/10/22)

Fig. 5.8 Screenshot of my desktop with the darker wallpaper, Week 6 (4/10/22)

With both the versions put close together for comparison, I would definitely prefer Fig. 5.8, the darker version as I am able to identify my file icons from a distance compared to Fig. 5.8. Hence, I chose to proceed with my fourth attempt as my final, which is Fig. 5.6

Final Task 1 - Exercise 2: Type and Play Part 2

Fig. 5.9 Type and Play Part 2 Final (JPEG)- Prosperity

Fig. 5.10 Type and Play Part 2 Final (PDF)- Prosperity


FEEDBACK

Week 2: Exercise 1- Typographic Systems
Specific Feedback: Radial system needs a bit of adjustment so that the information is more centered. Dilatational system has compositional issue, the tail end of the text does not sit well, needs a bit of adjustment. Grid system, the dates look awkward as it stretches to maximise the space unlike the other text. Transitional system looks alright, but the two lines at the end is not necessary, can keep to just 1 line. Bilateral system has a way of dividing information that is difficult to read due to the contrast between positive and negative space, preferably to avoid.
General Feedback: Needs a bit of attention to the overall compositional layout. Distribution of text can be improved so that it maximizes the space while keeping both sides equal.

Week 3: Exercise 2- Type and Play Part 1
Specific Feedback: In the right direction, continue to refine further with care and consideration. May need to modify certain strokes to maintain consistency, or discard certain features / maintain others to achieve consistency.
General Feedback: Maintain the axis of the font, choose either leaning or straight and keep it to one direction.

Week 4: Exercise 2- Type and Play Part 1
Specific Feedback: Should have extracted the whole petal of the flower rather than just the gaps because the letters don't really look like it was extracted from a flower
General Feedback: There is consistency throughout the letters though.

Week 5: Exercise 2- Type and Play Part 2
Specific Feedback: Just use the cat paw to represent prosperity. The current image used might be a bit too harsh as a wallpaper.
General Feedback: The image is too direct with the theme.

REFLECTION

Experience
In Exercise 1, we learned about the 8 typographic systems through our lecture. Although it seemed straightforward trying to understand each systems, when putting it into practice, I did struggle a lot trying to make it look proper and nice. I read and referred to the Typographic Systems book, which helped me generate more ideas for each system. However, I was also quite worried that some of my works will be similar to my friend's since some of them are quite generic. 

For Exercise 2 Part 1, I was contemplating on which pictures to use for extraction of form and I found the flower with interesting lines and veins on it. It took me awhile to see the possible letters from that picture, because the flower is quite small so it was also limiting with the letters I can extract. Besides that, the digitization process was quite smooth as I did not have any major hiccups. I tried my best to maintain consistency throughout all of the letters, and thankfully Mr. Vinod did say that it was consistent *sighs breath of relief*. 

Moving on with Exercise 2 Part 1, I felt that I struggled a lot trying to find the most suitable picture to be used as a wallpaper and also to achieve the word and visual interplay. Not to mention, we also had to follow the themes and use the words given, which became a bit of a limitation. Although it gave me quite a headache, it was still a great learning experience for me as I had learned how to achieve certain word effects by watching a YouTube tutorial.

Observation
When doing Exercise 1, I realised that we have a lot of smaller details to pay attention to such as the alignment, equality of text in given space as well as the execution of the systems itself. It definitely took a lot of time trying to get them look presentable without any awkward spaces and weird placements of text. 

For Exercise 2 Part 1, I realised how it important it is to show the process of developing text from the extracted letterform to the final type. It was fascinating seeing how the text evolved, some discarding the unnecessary elements while keeping all of the letters consistent by having something in common. It was rather a fun process for me because every time I change the letters and evolve it into a better version than before, they all look like they belong in the same family.

As for Exercise 2 Part 2, I notice how the interplay of words play an important role in enhancing the visuals. It brings out more character in an image and also sets the mood that we want our audience to feel.

Findings
For Exercise 1, I initially thought that we have to follow a set of rules to be able to execute the systems, which limits my room for creativity. However, as I start to work on it myself and also learn from my peers, I realise that there are so many more possible ways to bring out the typographic systems in a unique and creative method.

While working on Exercise 2 Part 1, I find that having a reference font makes my refining process much easier because I can get a clear picture of whether my font would work or not. When I first started developing my letterform, I just could not see it as a working typeface because it looked really incomplete. However, once I started using the reference font as a base for my letters, it started looking more proper and refined.

Moving on to Exercise 2 Part 2, I find that placing words in an image is quite challenging. It is easy to slap in a word and call it a day, but of course that is not how it works. It requires some sort of typographic sense and also creativity to really enhance the visual using words. To put it simply, it takes time and a lot of failed attempts to achieve one passable result. However, I believe all my failed attempts were a meaningful learning journey for me because I was able to notice my mistakes and also discover new methods to improve it.


FURTHER READING

Fig. 6.1 Typographic Systems by Kimberly Elam

After watching the lectures in the 8 typographic systems, I felt like I needed more visual research which could be found in this book. While reading about these typographic systems, it helped me further understand the characteristics of each one of them, and the examples as well really gave me an idea of how my final outcome should look like. It was very interesting to see how information can be expressed in different ways using the variety of typographic systems


Fig 6.2. Project Elements and Process
Axial, Radial, Dilatational

After reading through this page, I could understand and clearly differentiate between the systems, especially between Radial and Dilatational.


Fig. 6.3 Project Elements and Process
Random, Grid, Transitional


For these 3 systems, I found it quite difficult to execute because of how "free" it is. I find it much more difficult to execute something that has no exact order and organisation whatsover because it is harder to make them look pleasing to the eyes. 


Fig. 6.4 Project Elements and Process
Modular and Bilateral
 
I could understand Bilateral system well since it is pretty straightforward, but it took me awhile to differentiate between Modular system and Grid system because they seemed so similar yet different. Through the help of this book and an extra tutorial on the Modular system in the lecture playlist, I was able to understand better and I am glad that I was able to execute it well in my exercise 1.

Comments