Exercises

5 April 2019 - 26 April 2019 (week 01-week 04)
Soo Wen Yi (0334653)
Typography _ Exercises

---

LECTURES_

Lecture 01 _ Briefing
5 April 2019 (week 01)
Today is the first class we had so it was the first time I've met Mr Vinod and Mr Shamsul. They briefed us about the exercises and projects we had to do through out the course and what we expected achieve at the end of this course. After that, they went in detail to show us the specific chapters that we're required to follow and upload into our blog. We took some time setting up the blog using WordPress as some of us are new to this platform. So in the mean time while Mr Shamsul figures out how to navigate around WordPress, Mr Vinod allowed us to go to the library to borrow a book for this week's reading. Then we settled back in class and set up our blog with step by step guidance from the lecturers. Before we went off for the day, we we're brief by Mr Vinod about our first exercise and we started drawing some designs. I did mine on my phone as I didn't bring a notebook.
I also learnt that the difference between lettering and calligraphy is that lettering is hand drawn out while calligraphy is written.

Lecture 02 _ Introduction to typography
12 April 2019 (week 02)
We were told to change our blog platform to Blogspot/Blogger from WordPress. After that, we had our first lecture today about typography. Typography is used to express something through words and types. I also learnt about logos that is made up of type (Coca-Cola for example) is called wordmark or logo type. Everyone uses typography without knowing it.

"Typography is an art. Good typography is art." - Paul Rand 

Terminology: 

• Font - process of designing a typeface
• Typeface - this is the specific type in the type family (Arial light/ Arial bold/ Arial italics etc.)
• Type family - this is the whole family of a type (Arial/ Times New Roman/ Helvetica etc.)

We will also cover type creation, type expression and type arrangement this semester.

Lecture 03 _ Basic in typography
19 April 2019 (week 03)
We learnt about describing / identifying letterfom. There's a lot of terms so it is hard to remember all of them.

Fig. 1.1: example.

• Baseline - an imaginary horizontal line where all the letters sit
• Median - an imaginary horizontal line where the x-height ends
• X-height - the height of the lower case x in a typeface

The x-height effects the legibility and readability.

• Stroke
• Apex / Vertex (Apex top, Vertex bottom)
• Arm
• Ascender
• Barb
• Beak
• Bowl
• Bracket
• Cross bar
• Cross stroke
• Crotch
• Descender
• Ear



Fig. 1.2: Em / En - space between words (Em space), widest letter M determine the Em space.

• Finial
• Leg
• Ligature - combined space between the 2 letters (f/l, c/e, s/e etc.)
• Link
• Loop
• Serif
• Shoulder
• Spine
• Spur
• Stem
• Stress - creates contrast (diagonal/ vertical)
• Swash
• Tail
• Terminal

Typefaces include letters, numbers and punctuations. 

Uppercase letters was not designed to use together. Instead there's some typefaces have  small capital which was designed to use together. Small Capital are capital letters that are designed to be in the x-height instead of the cap height. Italics is used to stress on a particular word. 

Lecture 04 _ Development/Timeline of typography
26 April 2019 (week 04)
We had a brief run through down the history of typography today, the information are from the western perspective. All information are on the slides, the following are additional notes that I took during lecture.

• First alphabets are learned by association - things that we understand. 
• Serif font evolved from the tools. (Brush is used will have tapered strokes)
• Capital letterform written on parchment paper, made from animal skin. It takes more space since its capital letters and also takes more time to produce and need more parchment paper.
• Lower case is a by product of writing uppercase in cursive. 
• Uncia - calligraphy pen - combines upper and lower case. 
• Blackletter (Germany) - condensed - practicality (german is long so it takes up a lot of space, thus Blackletter is invented)
• Baskerville is a turning point in time - old (stress on the letters are diagonal), following hand writing - changed to - new (vertical stress, refers to the, mechanics of the modern day printing.)
• Type - variations - came from various designers trying to figure out the typeface.
•  As technology change, typefaces also change
• Numerals - upper and lower case took too much space for advertising - later changed to all upper case.

Typefaces to look at:

- Jenson

- Garamond

- Plantin

- Caslon

- Bodoni

- Bauhaus

Knowing and understanding history allows us to be able to connect things and acquire a wider knowledge. 

---

INSTRUCTIONS_

---

EXERCISES_

Week 01
Exercise 01
We had to stylize our names according to our personalities for this exercise. I began to roughly sketch down some ideas on my phone first then in sketchbook. After that I choose 10 that can be consider as final designs. They are under the same personality, it is introverted.

Fig. 2.1: Sketches for introverted.

Fig. 2.2: Sketches on grid paper for introverted.

Week 02
After choosing a design, we digitised it on Adobe Illustrator. This is the original version before taking the advice of Mr Vinod and making it more proportionate. Also changed the ends of the lines to rounded edge.

Fig. 2.3: First digitised design for introverted.

Fig. 2.4: Final digitised design for introverted.

Week 03
We started animated our design into a gif today. We had to make the art boards/frames in Illustrator then later animate it in Photoshop. I thought about the idea and how to animate it to relate to my personality introverted, after getting approval from Mr Vinod and Mr Shamsul, I start the animation process.

Fig. 2.5: Art boards used before expanding the animation.

Fig. 2.6: Art boards used after expanding the animation.

Fig. 2.7: 1st attempt on animation for introverted.

Fig 2.8: 2nd attempt on animation for introverted.

After getting feedback from Mr Vinod, I went home to improve it taking his suggestions into consideration. The first thing I needed to do was to make the strokes retract slower. It was fast at the first 2 attempts because I couldn't move it slowly, instead it snaps into the grid line. So I just unsnap that before proceeding to making the art boards.

Fig. 2.9: Screen grab on why the problem occurred.

Fig. 2.10: Screen grab of undoing 'Snap to Grid'. 

This resulted in a lot more frames since the movements changes very slightly in every frame. A total of 67 art boards.

Fig. 2.11: Screen shot of final art boards after improvement.

Later when i animated in photoshop, its doubled since i have to repeat the sequence in reverse. This first attempt I had the full name frame delay for 0.2 seconds, and the rest of the frames at 0.1 seconds. Its a bit too slow.

Fig. 2.12: 3rd attempt on animation for introverted.

So the second attempt i just put the full name at 0.5 seconds delay and the rest of the frames no delay.

Fig. 2.13: Final animated name design for my personality, introverted.

Week 04
Exercise 02
Prior to today's class I've already done the digital versions of the 6 words. I chose to do bounce, loop, levitate, faint, angry and hungry.

Fig. 3.1: Idea sketches for the words that I chose.

Fig. 3.2: Process while designing.

Fig. 3.3: 1st attempt of digitised expressions.

Fig. 3.4: 2nd attempt of digitised expressions.

Fig. 3.5: Final version of digitised expressions.

Since I didn't chose one to animate yet, Mr Shamsul said that hungry should be interesting to animate so I went with that. 

Fig. 3.6: first attempt on animating the expression.

Taking Mr Vinod's advice I've went home and improved the animation. 

The opacity:

15% - 10% - 5% - 10% - 15% and repeat.

25% - 20% - 15% - 10% - 5% - 10% - 15% - 20% - 25% and repeat.

35% - 30% - 25% - 20% - 15% - 10% - 5% - 10% - 15% - 20% - 25% - 30% - 35% and repeat. 

Fig. 3.7: I separated the words based on the highest opacity they would appear. 

Fig. 3.8Another layer as example how they appear and the opacity.

Fig. 3.9: I ended up with 91 frames in total.

Fig. 3.10: Screen grab of animation timeline.

Fig. 3.11: Final animation on expression of the word hungry.

---

FEEDBACK_

Week 02
Specific feedback
The letterings were fine as they are a bit hard to figure out which is fitting for my personality, and after digitising it Mr Vinod taught me how to make the lines all according to scale within the square to make it more proportionate. After that, Mr Vinod also mentioned that although everything is within the square, the W looks smaller/slimmer compare to the rest of the letters due to illusion. So he advised me to shorten the other letters to make it all seem even and same sizes as the W.

Mr. Vinod's comment from Facebook:
good. Update digitisation process before next class.

Week 03
Specific feedback
After showing Mr Vinod and Mr Shamsul my animation plan, they agreed to the idea. I explained that I wanted my name to start off with horizontal lines first and will indent and form my name. But since the personality introverted, Mr Vinod suggested that it will make more sense if it starts off with my name and ends in lines. After showing the animated version, they both agree that it looks better if it was from name to lines and back to name again. And also they said that the speed it too fast so its hard to see what was going on. They suggested to add more frames to slow the animation down.

Week 04
General feedback
-  do not delete other people's feedback (on the feedback sheet)
- do not change the typeface (Arial 10 points)
- do not delete the red feedback (if its direct copy to blog, its in red, black is when transcribing their feedback)

Specific feedback
Overall its fine, need to refine hungry since the word is from edge to edge, instead of that make the word smaller and let the others crowd around it. Improve on levitate and angry. Levitate looks like its floating, and angry is too ordered compared to the expression. Improved levitate still looks like its floating, and Mr Vinod said that the difference between levitate and floating is levitate is like hovering and not floating off. After showing the animated version, Mr Vinod said that it doesn't really portray the expression and I agreed. He said it will be a lot of work because the amount words I have, but making the words/letters fade in and out should work.

Week 05
General feedback
Mr Shamsul remind us that our blog must be formatted correctly and images should be in good quality.

---

REFLECTION_

EXPERIENCES

Week 01

The first class was interesting, I'm looking forward to the rest of this course. I was stressing out a bit when it came to the the softwares needed for this course, but that is sorted out now. Also we had to use Word Press for the blog which is harder than what I've used to with using Wix for my foundation blog.

Week 02
Everything went smoothly with the designs being approved and related to my personality. But as I started to digitise my design, about halfway tracing the design my Adobe Illustrator quit suddenly. But after that it went smoothly through the rest of the class without crashing. I felt like I was asking Mr Vinod too many times to make sure I'm going in the right direction for my design.

Week 03
It's interesting because its my first time trying to animate and create a gif, it went smoothly.

Week 04
It was fine but a lot of work since I still need to improve on the animation.

OBSERVATIONS

Week 01

There's a lot of information being given through the class, so I was constantly listening and jotting down notes on my phone.

Week 02
Time passed quite quickly when I was concentration and working on my stuff.

Week 03
Lecture went over pretty fast while a lot of information was given.

Week 04
Everyone have similar or different expressions for the same word.

FINDINGS

Week 01

Since there were a lot of important information being given, it shows that I have to put all my concentration into the class in the future as I did in the first class.

Week 02
I should work quicker and not waste anytime in class and after class while working on the excersises.

Week 03
Read over the lecture slides to further understand more.

Week 04
Looking at everyone's work might help us get some idea if we are stuck. Also I need to use my time wisely through the next week to improve and finish my animation.

---

FURTHER READING_

Week 01
Advertising Design and Typography by Alex W. White

Fig. 4.1: book cover.

Chapter 8 Type Knowledge
Throughout the whole book, there are a lot of example images on the edges of the spread which is nice and make is easier to understand the context. What I found interesting is type can deliver a lot of messages, voice/tone, speed, importance etc. Type is the voice of a still visual message, it should be able to convey the message as how can a person speak in different variations.
The four things that contribute to type sequencing:
- contrast
- repetition
- balance
- dominance

Fig. 4.2: example from book.

Fig. 4.3: another example from the book.

Week 02
New Modernist Type by Gail Anderson and Steven Heller

Fig. 4.4: book cover.

Chapter Metaphorical
Metaphorical type is a type as picture, or type making up a picture. It is used to convey more than just one message through the type at once. I find it interesting how type can interact with shapes of objects or create shapes of objects to make it more interesting.

Fig. 4.5: example from book.

Fiig. 4.6: second example from the book.

Week 03
Tasty Stories: Legendary Food Brands and Their Typefaces by Joke Gosse

Fig. 4.7: book cover.

This book caught my eye when I was looking through the shelves as they looked very familiar. Through out the book for each brand it is given a background information and how their logo type had evolved through out the years. Its interesting to see how some brand's logo type changed a lot, while some stayed pretty much the same with minor changes. Its interesting to know why it was or wasn't changed, and what was the purpose to the change. How little changes are made to the type on specific letters to convey different messages.

Fig. 4.8: page spread and example on KitKat.

Fig. 4.9: another example from the book on KitKat.

Fig. 4.10: page spread and example on McDonald's.

Fig. 4.11: another example on McDonald's.

Week 04
The Typographic Experiment: Radical Innovation In Contemporary Type Design by Teal Triggs

Fig. 4.12: book cover.

This whole book contains different contents from different designers on how they experiment with typography in usual or unusual ways. A page in particular caught my eye which is written by Lucinda Hitchcock & Students. A passage really stood out to me is "Typography is nothing without meaning, and meaning is nothing without questioning. And to experiment is not to seek answer but to serve the question." Which makes me rethink about why we need to experiment with things to get to the desired outcome.

Fig. 4.13: page spread on Lucinda Hitchcock.

There's some interesting experiments from Hitchcock, I especially like these 2 following works. They conveyed the meaning/message with innovative ways of executing the work. The works also make us question, which earlier is being said creates meanings.

Fig. 4.14: example from Hitchcock.

Fig. 4.15: another example from Hitchcock.

Why every design needs three levels of typographic hierarchy by Janie Kliever.

Fig. 4. 16: Screen grab of a section of the article.

Link to the online article: 

https://www.canva.com/learn/typeface-fonts/

I also stumbled upon this article which helps me understand a bit more about the importance of composition. Changing type sizes, the use of contrasting typefaces, use of different colours, the type weight and style, spacing and orientation can make a design more interesting while getting the message across. 

Typographic hierarchy:

• Level one - this is the most important content/information, thus most visible
• Level two - this shouldn't stand out as much as level one I think of this as the subtitle/additional information regarding to level one.
• Level three - this is where the information lives, only concern is the size of the type since its small, so paying attention to the type size in this level is important

Fig. 4.17: example from the article.