Typography Exercises

Typography - Exercises

28.08.2019 - 18.09.2019 (Week 1 - Week 4)
Wong Kai Yi (0340236)
Typography
Exercises

---

1. LECTURE

Lecture 1: Briefing and Introduction to Typography
28.08.2019 (Week 1)

Mr Vinod and Mr Shamsul briefed us on the modules for this semester. They then gave us specific instructions on how to open a blog with Blogger and all the requirements for the blog.

Mr Vinod asked students the definition on typography and gave his explanation later on. He recommended us some typography books, websites and designers. He then introduced the history of typography as it evolved from calligraphy to lettering and finally to typography. He stated that typography is everywhere and done by everyone. He gave an example that good typography is also essential in textbooks as it affects the readers. There were also examples of different typography shown to us. Lastly, he emphasized the difference between font, typeface and type family.

·             Font: creation, individual font or weight within the typeface (e.g. Gill Sans MT)

·             Typeface: entire family of fonts (e.g. Gill Sans Condensed Bold, Gill Sans Ultra Bold)

·             Type family: many weights within an individual typeface (e.g. Gill Sans)

*type family with many typefaces is good for publishing books/ magazines

Lecture 2: Development and Timeline of Typography
04.09.2019 (Week 2)

Mr Vinod gave us a lecture on the development of western typography. Asian typography is less described because western typography is more advanced. A brief history of western typography was given and with some commonly used fonts such as Garamond, Baskerville, Bauhaus etc.

Lecture 3: Basics of Typography
11.09.2019 (Week 3)

Mr Vinod gave us a lecture on the basics of typography. Below are important notes:

• Kerning: the decrease of space between letters
• Letterspacing: the increase of space between letters
• Tracking: kerning + letterspacing
• Gray value: even distribution of black and white will make evenly distributed gray value
• Rivers: produced by the openness of lines, the white space running vertically through the text
• Leading: text set too tightly encourages vertical eye movement which causes reader to lose place easily
• Line length: good rule of thumb is 55-65 characters per line
• Type size: has to be large enough to be read easily at arms length
• Rule for printed matter: body size 8-12pt
• maintain 3pt leading
• to see ascenders and descenders, zoom in 400% to text

1. Identify font (type)
2. Determine type size
3. Automatically determines line length and leading

Below are my notes taken in class:

Fig 3.1 Notes 1

Fig 3.2 Notes 2

Lecture 4: Basic Typography Part 2
18.09.2019 (Week 4)

Indicating Paragraphs:

1. Pilcrow (¶)
2. Line spacing
3. Standard indentation
4. Extended Paragraphs

Line space: space between two base lines
Leading: space between two lines of text
*in Adobe Illustrator, leading = line space

Gaffes:

• Widow: short line of type left alone at the end of a column of text
• Orphan: short line of type left alone at the start of a new column

Highlighting text:

• indent
• italics
• change typeface
• change color
• bullet points
• quotation marks
• field of color (highlight)

Hierarchy by subdivision.

Cross aligning headlines and captions with text type reinforces the architectural sense of the page - the structure - while articulating the complimentary vertical rhythms.

Below are the notes taken:

Fig 4.1 Notes taken in class 1

Fig 4.2 Notes taken in class 2

Fig 4.3 Notes taken from Skillshare

---

2. INSTRUCTIONS

Exercises:

28.08.2019 (Week 1)
Mr Vinod assigned us to design five different typography with our own names based on one personality. My personality was "spontaneous" and made five variations as shown in figure below.

Fig 1.1 Spontaneous: Five variations

Fig 1.2 Spontaneous: Draft/ Notes

04.09.2019 (Week 2)

After getting feedback from Mr Vinod, we were taught by Mr Shamsul on how to use Adobe Illustrator (for developing typography) and Photoshop (for animation). Our assignment was to digitize our work with Illustrator. I drew my name with pen tool. I then tried to do a little bit of animation, with the two "i"s from my name "jumping" up and down. It was not very interesting as the movement was quite uniform but we were going to do the animation next week (week 3) so I have room for improvement.

Fig 2.1 Spontaneous: Sample 1

Fig 2.2 Spontaneous: Sample 1 (simple gif animation)

Fig 2.3 Spontaneous: Sample 1 filled with black

Fig 2.4 Spontaneous: Sample 1 filled with black gif

Fig 2.5 Spontaneous: Sample 2 (gif) where I changed the size of the letters

Final (Spontaneous)

JPEG:

Fig 2.6 Spontaneous: Final expression for name

PDF:

Fig 2.7 Spontaneous: Final expression for name (PDF)

GIF:

Fig 2.8 Spontaneous: Final animation (gif)

I liked the outcome of the name gif as it really shows the spontaneity of myself. The letters are moving in random directions and changing sizes at different rates. I used 22 frames for Fig 2.4.

11.09.2019 (Week 3) and 18.09.2019 (Week 4)

Mr Vinod gave us an assignment to make interpretations with the 6 words:

• SNEEZE
• CLEAN
• GIGANTIC
• PARTY
• EXPLODE
• EMERGE

Below are the drafts for this exercise:

Fig 3.3 Draft for SNEEZE

Fig 3.4 Draft for CLEAN

Fig 3.5 Draft for PARTY

Fig 3.6 Draft for GIGANTIC

Fig 3.7 Draft for EXPLODE and EMERGE

After picking the favored design, I started working on them. Among the 9 type families given:

• Adobe Caslon Pro
• Bembo Std
• Futura Std
• Gill Sans Std
• ITC Garamond Std
• ITC New Baskerville Std
• Janson Text LT Std
• Serifa Std
• Univers LT Std

We could not distort the letters but could only change the size, direction and saturation.

I used Futura Std, Adobe Caslon Pro, Universe LT Std and Janson Text LT Std for the 6 words.

Fig 3.8 Six words final work

Mr Vinod asked us to choose one or two words to make into a gif. I chose the word "CLEAN" and made the "O" bubbles move randomly. The process of moving and rotating the "O"s was time-consuming but I liked the outcome of the gif. I used 11 frames for this gif. The "CLEAN" word was slightly moving as I wanted it to have subtle movement.

Fig 3.9 Artboards for CLEAN

Fig 3.10 CLEAN gif 1.0

After receiving feedback, I made a new version of "CLEAN" where the bubbles faded away, which is the final work. The word is also straight.

Fig 3.11 CLEAN gif 2.0

I also chose to do another one as I wanted to try out different animations for different words. I chose the word "EMERGE". I made the letters appear one by one as if they are emerging out of the letter "M". I used 13 frames for this gif.

Fig 3.12 Artboards for EMERGE gif 1.0

Fig 3.13 EMERGE gif 1.0

After receiving feedback, I changed the way the letter "M" emerged and also made the other letters emerge from the same base line.

Fig 3.14 EMERGE gif 2.0

FINAL:

PDF:

Fig 3.15 Six words final work

GIF:

Fig 3.16 CLEAN final GIF

---

3. FEEDBACK

28.08.2019 (Week 1)

No feedback as assignment was given today.

04.09.2019 (Week 2)

Mr Vinod said that the fifth variation was suitable as it has a bouncy feeling for the letter "i". The fourth variation was not fit with the chosen personality because it seemed "flowy" and cool. No comments were given on the first three variations.

11.09.2019 (Week 3)

Specific feedback:

I only did a draft animation for my name because I misheard instructions. We were told to finish animation last week and come for comments so as to make changes before final assignment is submitted. After finishing the animation in class, Mr Vinod said that my animation for the personality is good.

For the 6 words (SNEEZE, CLEAN, PARTY, GIGANTIC, EXPLODE, EMERGE), Mr Vinod and Mr Shamsul were satisfied except for "EXPLODE". It did not look explosive enough as the letters around the letter "O" were too unified. Mr Vinod suggested me to use an inverted exclamation mark "!" for the "O". Mr Vinod and Mr Shamsul said that my design for "SNEEZE" wa interesting because I used apostrophes "'" to make up the letters "E".

General feedback: Mr Vinod told us how to label figures in the blog: Fig 1.1 (personality): (description). E.g. Fig 1.1 Funny: Sketch 1. He clarified to us to put "Exercise" as a subcategory under "INSTRUCTIONS".

18.09.2019 (Week 4)

General feedback:
Mr Vinod told us to install all the 9 type families given in google drive. He also wanted us to document the process for everything so that we can see the progression.

Specific feedback:
Mr Vinod said that overall the words were good.
He gave some suggestions on the gif for "CLEAN": Make the bubbles fade as they move and make the "CLEAN" word straight.
He gave some suggestions on the gif for "EMERGE": Make the "erge" same size as the first "e" and use the baseline for all the letters as the expression was already shown through the letter "M" emerging from the baseline.

---

4. REFLECTION

28.08.2019 (Week 1)

I learnt many new things like how to create a blog and time management. The first assignment is helping me to explore my personalities.

04.09.2019 (Week 2)

I needed to finish my assignments as soon as possible as efficiency is a very important as a designer.

11.09.2019 (Week 3)

I almost finished the typography exercise in class so I just needed to complete the animation at home. I think that we must be open to receive criticism. This will help us to improve our work because it will be displayed to everyone.

18.09.2019 (Week 4)

I realized that more research and reading was required to get more understanding and ideas in typography. Looking at other examples helped me in my layouts and choosing of typeface.

---

5. FURTHER READING

28.08.2019 (Week 1) - 04.09.2019 (Week 2)

Title: The Layout Book Second Edition by Galvin Ambrose and Paul Harris

Fig 1.3 The Layout Book Second Edition by Galvin Ambrose and Paul Harris front cover

Fig 1.4 The Layout Book Second Edition by Galvin Ambrose and Paul Harris back cover

From this book, I summarized some important information: 

Lines: a line can lead the eye, giving the design a sense of direction and navigation, act as a conducting or linking between separate elements

Design for screen often requires a solution with greater immediacy than design for print because it is a more dynamic medium. Lines are frequently used in screen design due to their ability to link content dynamically, providing structure. They give consistent visual approach across pages.

How we read a page: 

I have a better understanding on how we read a page after reading this book. It uses graphics to explain clearly the concept and principles which makes everything easier to understand and grasp.

Fig 1.5 How we read a page from The Layout Book

11.09.2019 (Week 3) - 18.09.2019 (Week 4)

Title: Art Direction and Editorial Design by Yolanda Zappaterra

Fig 2.9 Art Direction and Editorial Design front cover

Fig 2.10 Art Direction and Editorial Design back cover

Various grids are shown so that we know how to use them for alignment. Grid elements such as columns and modules help in guiding text and image placement. This book shows a lot of examples of layouts, so it is very handy when it comes to project 1, which requires us to make an editorial layout.