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, ArialTimes New Roman, Didot and Futura.


e.g. of Typeface

Type Family- Refers to the many weights within an individual 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"
The lecturer did also showed us the evolution of Phoenician to Roman. The letters are basically evolving due to the tools that they used.
e.g. evolution of Phoenician 1000 B.C.E to Roman 100 B.C.E
Quote of the week: 
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 Leftthe text is aligned along the left margin or gutter, also known as left-aligned, ragged right or ranged left.


5. Flush Rightthe text is aligned along the right margin or gutter, also known as right-aligned, ragged left or ranged right.


6. Centeredtext is aligned to neither the left nor right margin; there is an even gap on each side of each line.


7. Justifiedtext 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 sizethe dimensions of a character measured in points.


9. Leadingthe distance between two baselines of lines of type.


10. Line Lengththe width of a block of typeset text.


11. Type Specimen Bookpublished 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)
When I was digitizing my design, the O from doesn't look nice and also the H is not readable. After a few tries, I decided to change the design of O and H.

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

“the anatomy of type”的图片搜索结果

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

Popular posts from this blog

Major Project

Sonic Design Final Project

Professional Development Week