Typography - Exercises

28/08/19 - 18/9/19 (Week 1 - 4)
Kyra Binti Rizal Hamzah (0337085)
Typography 
Exercises

---

Lecture Notes

Week 1- 28/8/19

The first lecture; an introduction to the class as a whole. We introduced ourselves and so did Mr Vinod and Mr Shamsul. We were briefed regarding the module as a whole and about what materials and softwares we will be needing for the class. Mr Vinod also explained what typography is, and some of the key terminology related to typography-
Font- a process entailing creating
Typeface- individual type or weight within a type (ie: Regular,
Italic, Bold)
Type family- an entire family of fonts(?) sharing similar characteristics (ie: Georgia, Arial, Futura)

Week 2- 4/9/19

History of typography and and it's development. We learned about how text evolved throughout the ages,the different tools that were used to print or type, and how text began to vary between regions.
Text type classifications:

Blackletter

Oldstyle

Italic (used to be it's own typeface)

Script

Transitional (refinement of oldstyle)

Modern

Square/Slab serif

Serif

Sans Serif

Letcure notes (week 2)- History of typography

Week 3- 12/9/19

Letter spacing- increase space between letters
Kerning - reduce spce between letters

"If you see the type before you see the words, change the type"

Grey value/colour- sensitivity to differences is important when creating layouts

-Text type should be large enough to read at arms length

-Type without enough leading is hard to read

-Type with too much leading causes stripes in between

Type specimen book- samples of typefaces in different sizes

Lecture notes (week 3)- Text alignment & texture

Week 4 - 18/9/19

Pilcrow- Paragraph indication

Ensure cross alignment across text columns by making line space and paragraph spaces the same

Text highlighting can be done by adding bullet points or changing the colour, font, bold, colour field behind text or the serif. If you change the serif you will also have to downsize the text.

Lecture notes (week 4)

Instructions 

Exercises

Exercise 1

The personality I chose to depict is "Loud"

Fig 1.0- Loud: Initial ideas

Fig 1.1- Loud: Sketches of 5 different ideas.

I showed my sketches to Mr Vinod & Mr Shamsul (based on "loud") and although I was initially torn between the third and fifth idea, I eventually chose my third idea that's based on soundwave equalisers.

Fig 1.2- Loud: Digitised version of my initial sketch

Fig 1.3 - Loud: Removed some lines from the letter I

Fig 1.4- Loud: creating the frames

Fig 1.5-  Loud: My first attempt at putting together the animation, but I  didn't arrange the frames in any particular order yet and simply put everything in the timeline.

Fig 1.6-  Loud: Rearranged the frames in my animation

Fig 1.7- Loud: Added delays to the frames containing my name to make them more visible.

Fig 1.8- Loud: Added a couple extra frames

Fig. 1.9 - Loud (Final Outcome- Static): Added a line through the middle to make it look more like a sound visualiser

Fig 1.10- Loud(Final Outcome-GIF): Extended the delays on some frames

Exercise 2

We were given 6 words and 9 fonts, and were instructed to express the words

Fig 2.1- Initial sketch ideas for the 6 words

Fig 2.2- I came up with a rough idea for each expression based on my initial sketches

Fig 2.3- My 6 expressions

After that, we had to pick one of the expressions and animate it. I chose to animate "sneeze"
For this exercise I decided to try using the timeline animation function instead of using frame animation as I felt that it would make the idea I had in mind for my animated expression a lot smoother looking.

Fig 2.4- A screenshot of my animation process; Sneeze

Fig 2.5- The expression I chose to animate;Sneeze

What I decided to do was to make the letter S appear to be sneezing and for the other letters to appear to hurtle out from the S ( like spit when someone sneezes without covering their mouth)

Fig 2.6- My animation ; Sneeze

---

Feedback

Week 2
(See Fig 1.1) Mr Shamsul suggested that I make the lines making up my letters horizontal instead of vertical to look more like an equaliser but upon doing a small sketch of it we concluded that it looked better with my initial horizontal lines. I was also advised to remove some of the lines on each side of the letter I, so that it looks more like an I and less like an O(Fig 1.2 & 1.3).

Week 3
General- Exercises in our blog post should be a subheading under the instructions heading. Pictures in our blog posts should be labelled (ie. Fig 1.1,1.2)
Specific- I showed my gif to the lecturers and they recommended that I add more delay to the parts of my animation that do show my name clearly. Besides that when they looked over my blog they asked me to increase the size of the text and to fix the size of the headings.
Week 4
General feedback- We are to download all 9 of the fonts from the google drive
Specific- When Mr Vinod first walked over to see my work, the first thing he said was that my static expression of "clean" was nice. He also said my animation of "sneeze" was good. 

---

Reflection

Experience

Week 2- Since this week was the first time we were getting feedback from the lecturers (for our sketches) I was a bit nervous, but it went smoothly and they did let me go with the idea that I had in mind. 
Week 3- The lecturers checked our blogs for the first time and I realised there was a lot of formatting issues on mine

Observation

Week 2- I found that digitising my sketch was very quick as my lettering consisted of rectangles, so I didn't really have to use the pen or pencil tools to do it, but the process of animating it will probably take a long time as I will have to move every individual rectangles in each frame.
Week 3- We started exercise 2, and I found it difficult to express the words given at first. It took a lot of brainstorming and looking for inspiration to find ideas.

---

Further Reading
1. Virtual Typography- Matthias Hilner

I borrowed this book because it related to our first exercise, especially chapter 2, which was about multimedia and covered kinetic typography (typography that moves) .

An example of kinetic typography that features static text; the book elaborates that kinetic typography that is in printed media refers to typography that is perceived in motion, for example text on a wall or billboard that you would see as you pass it.

The frames of an animated typeface that "unfolds" to reveal the word "Unfolded"

2. Computer Arts Issue #294 (Magazine)

Although this isn't inherently a book about typography, I chose to look through this to get an idea about magazine and editorial spread layouts.