Typography
TYPOGRAPHY - EXERCISES

28/8/19
Yeoh Wen Jun ( 0334234 )
Typography
Exercises
LECTURES NOTES
Week 1 ( 28/8/19 ): Briefing and Introduction to Typography
In the first class of this module, Mr.Vinod and Mr.Shamsul told us and guide us to create a blog as our e-portfolio. Mr.Vinod did share with us the difference between a good and poor e-portfolio. An e-portfolio will not work if there are only images without explanation. The readers do not know what are we doing, unlike the lecturers who gave us the instructions, so we have to explain everything in our portfolio.
After Mr.Vinod gave us a brief on what are we going to do in this class, Mr.Vinod wants us to introduce ourselves to the class, same to himself and Mr.Shamsul. They also shared some of their experience in front of the class. Then, Mr.Vinod continue the class by introducing Typography. First of all, he wants to know how well we know about Typography. I was very nervous when Mr.Vinod started to point out some students and ask for their opinion because I don't really know about Typography. For me, Typography is very simple which is WORD + ART, that is the only answer I can give at the moment. I think Mr.Vinod is satisfied with the answer of those students he pointed out because he says that everyone's answer is mostly accurate. Hence, he told us the use of typography and the history of typography. Also, I learned that font and typeface are different. We learned the Terminology in the class.
Terminologies:
Font- The process of creating a Typeface I.e.: Georgia Regular, Georgia Italic and Georgia Bold.
e.g. of Font
Typeface- Refers to the entire family of fonts that share similar characteristics, I.e.: Georgia, Arial, Times New Roman, Didot and Futura.
e.g. of Typeface
e.g. of Type Family
After a long lecture, Mr.Vinod suggested some designers who had some interesting artwork of Typography. ( e.g.: David Carson, Ed Fella, Wolfgang Weingart, Paul Rand...) Other than that, Mr.Vinod also let us know about the difference of Calligraphy and Lettering. Basically, Calligraphy it is just writing while Lettering is drawing a word, which is more fun than Calligraphy. Before we end the class, Mr.Vinod also gave us an exercise to do at home. We have to choose one personality of ourselves and sketch our name based on the personality. We need at least 5 different fonts on a graph paper. That's all for today class, it's was fun but also a bit stress because the class is too serious compared to the other classes.
Week 2 ( 4/9/19 ): Development and Timeline
In the second week for Typography class, we learned about the development and timeline of Typography. After this lecture, I get to know that there were many ways to read. Normally, we read from left to right, row by row. Chinese use to read from right to left. The thing that makes me so surprised is how Greek read. The style of their writing is called "boustrophedon". The writing start from left to right, the next row right to left. It is so difficult to read.
![]() |
| e.g. of "boustrophedon" |
![]() |
| e.g. evolution of Phoenician 1000 B.C.E to Roman 100 B.C.E |
If you don’t know history than you don’t know anything. You are a leaf that doesn’t know it is
part of a tree. — Michael Crichton
Week 3 (18/9/2019): Text Part 1
In this week lecture, I felt like I had learned a lot! There is a lot of stuff we have to understand and remember on that day.
1. Kerning- reduce the spacing between letters.
2. Letterspacing- increase space between letters.
3. Tracking- Kerning+ Letterspacing.
4. Flush Left- the text is aligned along the left margin or gutter, also known as left-aligned, ragged right or ranged left.
5. Flush Right- the text is aligned along the right margin or gutter, also known as right-aligned, ragged left or ranged right.
6. Centered- text is aligned to neither the left nor right margin; there is an even gap on each side of each line.
7. Justified- text is aligned along the left margin, and letter- and word-spacing is adjusted so that the text falls flush with both margins, also known as fully justified or full justification.
8. Type size- the dimensions of a character measured in points.
9. Leading- the distance between two baselines of lines of type.
10. Line Length- the width of a block of typeset text.
11. Type Specimen Book- published by type foundries and printers to demonstrate the range and quality of their work. Specimen books (in full: type specimen books) are the printed brochures or catalogs of type foundries and printers, offered to advertise the range and quality of type available.
INSTRUCTIONS
Week 1 ( 28/8/19 )
We have to design our name with one of our personality. We can only use one personality to create 5 design. The personality that I choose is Random and I decided to use my surname for this exercise. Ar first, I sketch out my idea randomly on one A4 size paper.
![]() |
| Fg. 1.1 Random (YEOH) |
Then I choose 5 of the best design from my random sketch and draw it nicely on a graph paper.
![]() |
| Fg. 1.2 Random (YEOH) |
Week 2 ( 4/9/19 )
After I got feedback from Mr.Shamsul and Mr.Vinod, I decided to redo my finalize design. Not really redo, because I just mix up all the design and form up some new designs.
![]() |
| Fg. 1.3 Random (YEOH) |
![]() |
| Fg. 1.4 Random (YEOH) |
After showing the lecturers my new designs, I choose the best of them and we were asked to digitalize our design by using Adobe Illustrator. Hence, animate it into GIF by using Photoshop animation timeline.
![]() |
| Fg. 1.5 Random YeoH (chosen) |
![]() |
| Fg. 1.6 Random YeoH (Final) |
I did two versions for my GIF which is the forever version and one move version. Forever version is to show the animation while I created the one move version to allow people to enjoy my design after the animation.
![]() |
| Fg. 1.7 Random (YEOH) Forever Version |
![]() |
| Fg. 1.8 Random (YEOH) One move Version |
On 9th September, Mr.Vinod posted a new exercise for us in our Facebook group. We were given 6 words and 9 types families. We can only design the words with the selected types families. We have to plan and sketch them a paper then digitize it by using Adobe Illustrator. We were requested to finish this exercise before the next class.
The words that we were given:
1. SNEEZE
2. CLEAN
3. PARTY
4. GIGANTIC
5. EXPLODE
6. EMERGE
The 9 type families given:
1. Bembo std
2. Futura std
3. Gill Sans std
4. ITC Garamond std
5. ITC New Baskerville std
6. Janson Text LT Std
7. Serifa std
8. Adobe Caslon Pro
9. Universe Lt std
Week 3 ( 11/9/19 )
After Mr.Shamsul and Mr.Vinod checked and give us feedback on our GIF, I decided to make some change for my GIF. Before I started to do some changes for that, I show Mr.Shamsul and Mr.Vinod my design of the words that given. They approved all of my design so I started to digitize the words.
Sketches:
The Final 6 Design![]() |
| Fg. 2.7 Digitized Version |
As usual, we were asked to animate one of our design from Fg. 2.7. I choose to animate the word Explode because it is easier to express. Then, I started to think about how I want it to be. My concept is, the word EXPLODE is absorbing more and more stress and finally, it explode. I use Photoshop to create the GIF directly but not Adobe Illustrator since Adobe Illustrator is to create graphic and we are not allowed to create graphic in this exercise.
![]() |
| Fg. 2.9 The process while animating by using Photoshop |
![]() |
| Fg. 2.9 Explode Animated Version |
Other than that, I edited Fg. 1.7 since Mr.Shamsul said that it doesn't show my personality random and it's too slow. I decided to adjust the speed of the GIF but noot decrease the frame rate because I want to keep it smooth. Also, I added a few more frame to make the GIF look more random and also interesting. My concept for this design is, if we do our work randomly, it will not work as you expect.
![]() |
| Fg. 1.9 Random (YeoH) |
FEEDBACK
Week 1 ( 28/8/19 )
When I was sketching my surname Yeoh with the personality of random, Mr.Shamsul pass by me and he says that my designs are not random enough. I tried to sketch it randomly but all of it still look too neat and doesn't bring out the random feel.
Week 2 ( 4/8/19 )
Mr.Vinod and Mr.Shamsul say that my designs are not random enough as what Mr.Shamsul told me last week and I totally agree. Maybe I was worried that my design will look too messy if I sketch it too randomly, that's why this happens. Mr.Vinod says that I should make the alphabets Y, E, O, H in different design because a random person means I could change anytime.
Week 3 (11 /9/19 )
Mr.Shamsul checked my blog and comment on my animated design. He says that my animation didn't show random. It is too slow due to too many frames and he asks me to reduce the rate of frames. But I will try to speed up the animation but not reduce the frames because I want it to be smooth.
Week 4 (11 /9/19 )
Mr.Shamsul said my design of Gigantic looks good and I showed him my Explode GIF. Mr.Vinod and Mr.Shamsul said I had done a good job on this. Also, I showed Mr.Shamsul my edited version GIF of YeoH.REFLECTION
Week 1 I don't really like to do blog because I do not like to write or type. And also my English is not that well. If you give me a word and an image, I will definitely choose the image. Despite that, I clearly understand that e-portfolio is very important for a designer. It is the "lifesaver" of a designer when facing some copyright issues. Overall, the class was fun but also a bit of stress because the class is too serious compared to the other classes. Week 2 I was enjoying the exercise by using Adobe Illustrator as I knew the basics. I was so excited to see what I can do but in the end, it doesn't really reach my expectation. I try to be patient and develop it slowly. This is also my first time to make GIF on photoshop. It was really fun! Week 3 Instead of just using frame timeline, I wanna try on video timeline to create a GIF. The reason that I want to use video timeline is, I want it to be super smooth and I try to figure it out how it works. Basically, the video timeline in photoshop is the simple version of Premiere Pro. I'm grateful that doing this reminds me of how to use Premiere Pro. Week 4 I was very happy that the lecturer looks satisfied with my work. This was not under my expectations. I was worrying that they will not happy with this because I didn't follow their instruction which is to use frame timeline to create the GIF.
FURTHER READING
The Anatomy of Type by Stephen Coles (2012)- Goodreads
Instead of study about typography directly, I choose to start with the fonts. In my opinion, font is the most important element in Typography. This book is suitable for those who really want to study about typeface in a manual way and want to dive deeper into the world of typeface. I like this book because it is more a visual reference and it is suitable for those like me who don't really like to read. We are able to learn what is a good typeface and when to use it from this book.
















Comments
Post a Comment