TYPOGRAPHY// TASK 1

30.03.2021 - 27.04.2021 (Week 1 - Week 5)

Chaw Zhi Ting (0347344) 
Bachelor of Design (Hons) Creative Media
Typography // Task 1

---

LECTURES :

Week 1/ Introduction & Briefing

For the first week of the lecture, we have met our friendly lecturers, Mr. Vinod and Mr. Shamsul. They first briefed us about the platforms we used for this module such as Facebook Group, Google Drive to store document and Google Sheet to take attendance. Then, Mr. Vinod briefed us about the module information and what to expect by end of it. He also shared useful tutorial videos from Youtube to set up our E-portfolio in Blogger and pre-recorded lectures to learn more details about Typography. We were told the importance of updating the E-portfolio weekly or daily to document every design progress. Besides, it was helpful by viewing the sample E-portfolio from our seniors as guidelines.

Pre-recorded lecture:
 "Typography is now something everybody does".

• Font - Individual font or weight within the typefaces. 
• Typeface - Refers to the entire families that share similar characteristics.

Figure 1.0 Example of fonts, 30 March 2021

Figure 1.1 Example of typefaces, 30 March 2021

Week 2 / Development & Timeline

The pre-recorded lecture this week is about the Development and Timeline of Typography throughout the years of the human era. The earliest letter form development is Phoenician to roman. This letterform is based on the tool that was used has influence based on what the letter is creating. Follow by the Greeks then change the direction of writing from right to left and left to right which known as 'boustrophedon'.

Figure 2.0 Boustrophedon style, 4th April 2021

The Romans and Etruscan paint their letterforms before they inscribing them to avoid waste of marble. This caused the letterforms with certain qualities of their strokes based on the tool they used. Besides, we learned about hand scripts from the early century which is square capitals and rustic capitals. Square capitals added the serifs to the finish of main strokes which can be achieved by writing it at an angle of approximately 60 degrees off the perpendicular. For rustic capitals which were faster and easier, was performed by holding the pen or brush at a 30-degree angle of the perpendicular. Although this hand script is faster to write, it is slightly harder to read due to its compressed nature.

Figure 2.1.1 Square Capitals, 4th April 2021

Figure 2.1.2 Rustic Capitals, 4th April 2021

Week 3 / Basic of Letterforms

In this recorded lecture, we learned about the letterform components parts to recognize the typefaces more easily.

• Baseline -The imaginary line of visual base
• Median - The imaginary line defining the x-height of letterforms 
• X-height -The height of the lowercase "x" in a typeface
• Stroke - The line that defines a basic letterform
• Apex/Vertex - The point created from the intersection of two diagonal stem (Apex ↑, Vertex ↓).
• Stem - Any vertical line in a letter.
• Arm - Short Strokes off the Stem of the letterform, either horizontal (eg. E, F, L) or diagonal (eg. K, Y).
• Ascender - Stem of a lowercase letterform above the Median.
• Barb - Half-serif end of a curved Stroke.
• Bowl - Rounded form that describes a counter (open or closed) 
• Bracket - Transition between the serif and the stem 
• Cross Stroke - horizontal stroke in a letterform that joins two stems together 
• Crotch - interior space where two strokes meet 
• Descender - portion of the stem of a lowercase that projects below the baseline 

Figure 3.0 Anatomy of typeface, 11th April 2021

• Em - distance equal to the size of the M (—) 
• En - Half the size of an em (–) 
• Finial - Rounded non-serif terminal to a stroke
• Leg -Short stroke off the stem of letterforms
• Ligature - Characters are formed by the combination of two or more letterforms

Figure 3.1 Example of ligature, 11th April 2021

• Link - Stoke connects the bowl and the loop of lowercase G
• Loop - Bowl is created in the descender of the "g" 
• Shoulder - Curved stroke that is not part of a bowl
• Spur - The extension the articulates the junction of the curved and rectilinear stroke
  
  
  
  Figure 3.2 Example of spur, 12th April 2021
  
  
• Spine - Curved stem of the "s" 
• Stress - Orientation of the letterform, indicated by the thin stroke in round forms (o, e) 
  
  
  
  Figure 3.3 Type of stress in letterforms, 12th April 2021
  
  
• Swash - The flourish that extends the stroke of the letterform 
• Terminal - Self-contained finish of a stroke without serif 
  
  
  
  Figure 3.4 Summary diagram of letterform parts, 12th April 2021
  

Next, we moved on to font and typefaces. In order to work successfully in graphic design especially in type. We must understand the full font that we are working on and how to use them.

The fonts:

• Uppercase - Capital letters + certain accented vowels, c cedilla & n tilde, and a/e & o/e ligatures.
• Lowercase - Lowercase letters that include the same character set as Uppercase.
• Small Capitals -  Uppercase letterforms drawn to the x-height, the same size as lowercase but in the form of uppercase
• Uppercase Numerals (Lining figures) - Same height as uppercase letters, with same kerning width.
• Lowercase Numerals (Old style figures) -Height is with ascender and descender, most commonly found in Serif typefaces.

Figure 3.5 Differences between Old style figures and Lining figures, 12th April 2021

Week 4 / Text : Kerning, Tracking & Letterspacing
In this Part 1 lecture, we were learned more in depth about text. Besides, we were introduced to Adobe InDesign, a publishing software which is suitable for large amount of text, especially books and brochure. Mr.Vinod demonstrated the basic tools and tips to do edit the font in InDesign.

• Kerning - automatic adjustment of space between letters.
• Letterspacing- Add space between the letters
• Tracking-addition and removal of space in a word or sentence

Figure 4.0 Differences between tight tracking and loose tracking, 
19th April 2021

Tips in InDesign

• Ctrl + Colon (:) = Make margin disappear
• Atl +Left Arrow (<)/ Right Arrow (>)= Kerning 
• Edit > Preferences> Unit & Increments (Change unit from 20 to 5) +Moving slower
• Atl+ Right arrow of whole word = Add letterspacing
  
  

Text Formatting

1. Flush left: Closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends whenever the last word on the line ends. (Ragged right)
2. Centered: Symmetry upon the text, assigning equal value.

3. Flush right: Emphasis on the end of a line as opposed to its start.
4. Justified: Impose a symmetrical shape on the text, may result openness of lines which produce white space running vertically known as 'rivers'

Figure 4.1 Leading vs Line spacing, 21th April 2021

Widows & Orphans

These should be avoided as much as possible, especially in Justified text. Widow which is a short line of type left alone at the end of a column of text can be solve by rebreaking line endings throughout the paragraph. For orphan, short line of type left alone at the start of a new column might need to be careful. We can make adjustment like moving columns in layouts or reducing the line length.

Figure 4.2 Example of orphans and widow, 21th April 2021

---

INSTRUCTIONS:

TASK 1 : TYPE EXPRESSION & TEXT FORMATTING

Week 1 

We were told to list down words of action in the chatbox and the lecture had chosen a few of them and posted them in the Typography Facebook group as a poll. Every one of us has fun participating in this mini activity. After voting, we are required to choose 4 among 7 words to express their meaning using any suitable typefaces provided. The list of words is slice, punch, spin, wave, scream, eat, point. This task requires us to think creatively and visualize the word to give a good visual impact.

Figure 1.0 Word poll in Typography Facebook Group, 30th March 2021

Figure 1.1 Typefaces provided from Google Drive, 30th March 2021

Before starting to sketch the ideas, I did some research of the meaning of each the word and did a simple mind map. I also searched some references in Pinterest to get some ideas. These steps helped me to brainstorm me some ideas and reminded me to think out of the box. 

Figure 1.2 Slice and spin references from Pinterest, 31st March 2021

Figure 1.3 Punch and waves reference from Pinterest, 31st March 2021

Figure 1.4 Brainstorming of words with mind map, 1st April 2021

Week 2 

We were divided into small groups to evaluate each other's work. It was a fun process where we get to know new friends, appreciate each other's work and exchange opinions. We evaluated base on the sufficiency of design exploration, the expression of the word and what can be improvised.

Figure 2.0 Compilations of mind map and sketches for 4 chosen word, 6th April 2021

Figure 2.1 Digitalize of words, 10th April 2021

Week 3
We uploaded the pre-final version in the Facebook group. Our friends and lecturer reviewed my type expression and given feedbacks. Overall designs are good to go but the word 'waves' can be make improvements. So I tried improving them by using different font and typefaces. 

Figure 3.0 Four chosen digitalize words, 13th April 2021

Figure 3.1 Finalize digitalize words, 18th April 2021


Figure 3.2 Final submission for Type Expression Exercise, 20th April 2021

For animation, I decided to choose the word 'scream' because I think it's the best among all the type expression. The first attempt, I plan to make it visually look like the voice are getting loud and the shadow represents the echo.

Figure 3.1 First attempt for animation frames for the word 'scream', 13th April 2021

Figure 3.1 First attempt for 'scream' GIF, 14th April 2021

After animating it, the result not really came out what I expected. I decided to improve it by removing the shadows and added some lines to emphasize the shout.

Figure 3.2 Timeline for second 'scream' animation design, 13th April 2021

Figure 3.3 Second attempt 'scream' gif, 14th April 2021

Week 4 

We have shown our animated gif and received useful feedback from the lecturer and peers. Then, we are introduced to a new task which is text formatting using InDesign. It was a brand new software for us, we required to follow steps by step from the pre-recorded lecture. I can't wait to explore it and try out the possible designs using the text given. 

Figure 3.4 Animation timeline for third attempt, 23rd April 2021

Figure 3.5 Final 'scream' gif, 23rd April 2021

We were introduced to new software which is In Design. We were guided by the lecturer step by step in the pre-recorded tutorial to complete the exercises given. By applying the knowledge we learned in the lecture, I could understand more about the tools and their function while doing this exercise.

Figure 4.0 Comparison of kerning and tracking, 23rd April 2021

Figure 4.1 First exercise- name with different typefaces , 23rd April 2021

Exercise//Helvetica Type Formatting 

I learned how to edit a layout by adjusting suitable point size, paragraph spacing and leading of the text. To make the text more tidy and visual appealing we can turn off hyphenate and make the suitable adjustment on kerning, tracking and line spacing. This may reduce the ragging of the words and how to place an image in the layout.

Figure 4.2 Adjusting kerning and line spacing, 23rd April 2021

Figure 4.3 Text align to gridlines, 23rd April 2021

Figure 4.4 Exercise- Layout 1, 23rd April 2021

  
Figure 4.5 Layout design 3-with and without pattern, 24th April 2021

Figure 4.6 Minimalist layout design 2, 24th April 2021

Figure 4.7 Final text formatting layout after amendment, 27th April 2021

Figure 4.8 Final text formatting, 27th April 2021

---

FEEDBACK:

Week 1: Overall E-portfolio is set up nicely and need to make sure the link provided is directed guide to the Typography page.

Week 2: For general feedback, we are advised not to use graphic elements or colours other than the shades of grey to express the words for this task. For the specific feedbacks, my friends commented I have done enough design exploration and they also point out some of the design they like more and have more related to the word. Besides, the lecturer also commented on my work that "scream" with the scary theme is interesting. 

Week 3: In general, my peer commented my digitalize word is great overall. For specific feedback, Mr. Vinod said the word slice is good with the idea of changing the "I" to a knife.  The word  "scream" looks good as it brings the meaning although is slightly much distortion. The word punch is great with the force of a big "P" . Lastly, the "wave" can be better to create a stronger impact.

Week 4: For general feedback, we were encouraged to read at least 2-3 books and document them in further reading section. For specific feedback, lectures commented my blog is overall good. The information is documented nicely with the correct sections, design progress with some of the screenshot, reflections and further reading. Mr. Vinod encouraged me to maintain this for the assignments in the future. For the gif animation, I can improve by showing the transformation from the original font then wiggling effect appears.

Week 5: I came out designs for this exercise (Figure 4.5 & 4.6). The first design is the one with 3 columns and justify text. The second design is more minimalist, with only 2 columns and left align. For general feedback, both designs have good reading rhythm and cross alignment is fulfilled. In specific ,the first design (Figure 4.5) is not advisable to have 3 column text body in A4 size. The use of justified text created 'rivers' which need to be avoided. The second design (Figure 4.6) which is more minimalist, overall is good with kerning and tracking. The ragging is smooth but there is one orphan found that need to be improved.  Mr.Vinod commented second option is better. Less is more. good alignment and arrangement.

---

REFLECTION:

Experience: Typography class was quite interesting to me although we couldn't have face to face classes. The lectures are so friendly and the modules are constructed nicely. By looking at the timeline and the tasks we have to complete make me a little anxious. It was very interesting yet challenging. I hope I could cope with the upcoming exercises. I appreciated the feedbacks my lectures and peers had given me to improve on my design. Through these few weeks, I learned a lot of knowledge of the text and type as well as how to express them in terms of design. It had been an exciting journey.

Observations: I am glad that we were still able to interact with the lecturer and peers to get feedback using online platforms. With online classes, we can do work best on our schedule but it required highly self-independence. Moreover, I find it complicated to learn all the software at the beginning. After some practices, I am starting to get familiarize with the software. Besides, it is great to see each of the students have a different personality and style. I hope one day I could have my unique style. 

Findings: It was pretty helpful to keep track of my design when I document the progress using E-portfolio. I enjoyed recording the simple steps and findings to see my design from scratch to something. Note to self: Don't forget to take pictures for documentation! Moreover, after learning all the software such as Photoshop, Illustrator and InDesign through the exercises, I realized how important each plays their roles in design. Reading from extra books and resources enable me to have a better understanding of typography. It all requires creativity and detail. 

---

FURTHER READING: 

Figure 5.0  'Playing With Type' E-book from Taylor's Library, 1 April 2021

This book is Playing with Type: 50 Graphic Experiments for Exploring Typographic Design Principles by McCormick, Lara. I have read about how typography can be used as an image, pattern and texture and manipulate typography to reflect its meaning. The key things to remember while exploring typography design is applying the basic design principles which is scale, direction, repetition, texture, transparency, negative or positive spaces. 

“As the saying goes, type is a beautiful group of letters, not a group of beautiful letters.”—Matthew Carter

Figure 5.1 Alphabetical feet from 'The Typography Idea Book' , 13th April 2021

This book titled The Typography Idea Book: Inspired from 50 masters by Heller, Steven, Anderson, Gail. This interesting poster caught my attention when they using a leg to design the type. This 'Unterwegs' (On the way) art piece was amazingly done by a Turkish designer, Mehmet Ali Turkmen in 2012. He came out with the idea of using the feet of his wife and daughter for an exhibition. He explained that a foot represents movement ' in this fast-flowing life' thus, typographically it interprets the title. Besides, he wanted to caution people to slow down and pay attention to the details.  It reminds me that type can be a natural, organic transformation from the things in our daily life. We just have to pay attention to them.

Figure 5.2 Anatomy of grid and hierarchy from 'Typography Referenced' , 23rd April 2021

In this book, I learned about how the grid tool is used to create unity and variety in designing the layout. We have to consider the format, image size, typographic scope and word count. Besides, there were different factors to indicate hierarchy which is letterform size, weight and position. I realized how typographic hierarchy is important to guide the users through differing levels of information especially when we deal with large amount of text.