TYPOGRAPHY - EXERCISES
Neoh Kar Yan (0339338)
Typography
Exercises
LECTURE NOTES
Lecture 1: Briefing
5/4/19 (Week 1)
For the first week of class, we did not have lecture. However, Mr. Vinod and Mr. Shamsul briefed us about the module and gave us an insight to our future assignments, expectations and that we were required to create an e-portfolio documenting our work progress via Wordpress. He told us that our e-portfolios will be used to record and compile lecture notes, exercises and assignments, our work in progress, feedback and also our reflections. We were then guided step by step by Mr. Vinod and Mr. Shamsul on how to create our own Wordpress site.
Lecture 2: Introduction to Typography
12/4/19 (Week 2)
We began our class by creating our Blogger site as previously there was a mishap. Later on, Mr. Vinod started our first lecture which was an introduction to typography. He started off by throwing the question "what is typography?" to the students and I happened to be one of them. I answered that typography is expressing something in lettering. Others also mentioned that typography is persuasive, communicative and is the arrangement of alphabets in a creative and clear manner. According to Oxford Dictionary, Typography is 'the style and appearance of printed matter', which was pretty general and brief. Meanwhile, according to Wikipedia, typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
"Typography is an art and good typography is art." - Paul Rand
Throughout the lecture, I understood that typography has an effect on readers. Typography can be seen anywhere such as in books, magazines, websites, and certificates. As we dove deep into the history of typography, it has been evolving for over 500 years starting from calligraphy to lettering, then to typography which is the present.
There are 3 important terminologies:
For the first week of class, we did not have lecture. However, Mr. Vinod and Mr. Shamsul briefed us about the module and gave us an insight to our future assignments, expectations and that we were required to create an e-portfolio documenting our work progress via Wordpress. He told us that our e-portfolios will be used to record and compile lecture notes, exercises and assignments, our work in progress, feedback and also our reflections. We were then guided step by step by Mr. Vinod and Mr. Shamsul on how to create our own Wordpress site.
Lecture 2: Introduction to Typography
12/4/19 (Week 2)
We began our class by creating our Blogger site as previously there was a mishap. Later on, Mr. Vinod started our first lecture which was an introduction to typography. He started off by throwing the question "what is typography?" to the students and I happened to be one of them. I answered that typography is expressing something in lettering. Others also mentioned that typography is persuasive, communicative and is the arrangement of alphabets in a creative and clear manner. According to Oxford Dictionary, Typography is 'the style and appearance of printed matter', which was pretty general and brief. Meanwhile, according to Wikipedia, typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
"Typography is an art and good typography is art." - Paul Rand
Throughout the lecture, I understood that typography has an effect on readers. Typography can be seen anywhere such as in books, magazines, websites, and certificates. As we dove deep into the history of typography, it has been evolving for over 500 years starting from calligraphy to lettering, then to typography which is the present.
There are 3 important terminologies:
- Font: Derived from the word Foundry which refers to the making or casting of a font at a foundry
- Typeface: The individual type or weight within the typeface (Arial Black, Arial Bold)
- Type Family: The entire family or fonts that share similar characteristics (Arial, Georgia, Times New Roman)
19/4/19 (Week 3)
This week we were introduced to a number of technical terms describing the specific letterforms. Grasping this knowledge is important because it makes identifying specific typefaces much easier and we can apply this knowledge in the future.
 |
| Fig.1.1: The basic terminologies to describe letter fonts |
Terminologies:
- Lexicon - the vocabulary of a person, language, or branch of knowledge.
- Baseline - The imaginary line the visual base of the letterforms
- Median/ Mean line - The imaginary line defining the x-height
- X-height - The height in any typeface of the lowercase 'x'
Helvetica is widely used because of its large x-height that makes it very readable and legible.
The full font of a typeface contains much more than 26 letters, it varies to numerals, punctuations and more.
- Uppercase
- Lowercase
- Small capital
- Italic
- Ornament
- Roman
- Punctuation, miscellaneous characters
Lastly, we were introduced to the 9 typefaces that we will be using throughout this semester:
- Garamond
- Janson
- Caslon
- Baskerville
- Bembo
- Serifa
- Futura
- Gill Sans
- Univers
26/4/19 (Week 4)
For this week's lecture, Mr. Vinod introduced us to the development of typography from a western's point of view.
Early letterform development: Phoenician to Roman
Initially, before pen and paper were developed, writing meant scratching with a sharpened stick into wet clay or carving into stone with a chisel. Back then, uppercase forms are combinations of straight lines and circles. The Phoenicians wrote from right to left but the Greeks have changed the direction of writing. They developed a style of writing called boustrophedon, which directly translates to how the ox ploughs and this allow readers to read from right to left and left to right.
 |
| Fig.1.2: Example of 'Boustrophedon' |
Hand Script from 3rd - 10th century CE
Square capitals could be found in Roman monuments. Their letterforms tend to have serifs added to finish off the main strokes. The strokes were achieved by a reed pen being held at approximately 60 degrees angle. Meanwhile, a compressed version of square capitals was used which is known as the rustic capitals. Although the rustic capitals were easier and faster to write, they were harder to read because of their compressed nature. Both square and rustic capitals were used frequently for documents while the cursive hand then came about because of speed.
The development of type classifications:
1450 - Blackletter
1475 - Oldstyle
1500 - Italic
1550 - Script
1750 - Transitional
1775 - Modern
1825 - Square Serif/ Slab Serif
1900 - Sans Serif
1990 - Serif/ Sans Serif
3/5/19 (Week 5)
From today's lecture, I understood that even though letters suggests symmetry, it might not be the case. A close examination can see that one stroke is actually thicker than the other.
Curved strokes like the letter s or r must rise above the median (or sink below the baseline) in order to appear the same as the vertical and horizontal strokes they adjoin. On the other hand, if it is the same, it can be the same size but optically it may not look the same.
Counter form is the form in the negative space and it has a vital role to play when letters form a word.
 |
| Fig.1.3: Example of counter forms |
Contrast can happen by creating a hierarchy of content as it arranges what needs to be read first before the rest. We can also make the letters bold/ italic and roman/ condense/ add colours/ serif and sans serif to create contrast. Contrast is important when we deal with a large amount of information.
To analyse design, we must compare, contrast, dissect and understand. We have to view design in the eyes of a designer, to analyse critically.
" On the streets, you look at girls. I look at type. " - Hannes von Dohren
After the lecture, Mr. Vinod gave us a brief introduction to Adobe Indesign and taught us some basics to get around with our first project.
INSTRUCTIONS
EXERCISES
EXERCISE 1: LETTERING
5/4/19 (Week 1)
We were assigned to come up with 10 different lettering expressions that capture our personality. We were told to work on graph papers with 5 designs each. I found it quite difficult to come up with 10 different designs which only captures one personality. I decided to portray my warm personality. Here are some of my sketches:
EXERCISE 2: TYPE EXPRESSIONS
19/4/19 (Week 3)
We were given 7 words based on what our class had decided (angry, bounce, freeze, faint, hungry, loop and levitate) to express the definition of the words. We were given 10 type families for this exercise and no distortions were allowed.
We had to sketch out our ideas first before digitizing them.
Below was my first attempt.
For my first attempt, I noticed that there were many errors I've made. I messed up with the shadow sizes thinking that it decreases from big to small but it's supposed to keep increasing as the ball gets nearer to the ground. Also, the position of my letters was swaying when it's supposed to be static. Therefore, I decided to redo my animation and start clean.
After playing with a few attempts on the animation, I tried making the letters and the shadows look smoother. However, I realized that the outcome still looks a bit too slow for the dropping of the ball.
I adjusted and deleted some frames for the ball to look smoother and faster.
I noticed that the aftermath bounce of the ball doesn't look natural enough so I fixed it. Here is the final outcome:
We did not receive feedback for the first class.
Week 2
Specific feedback: Mr. Shamsul initially thought my lettering looked cold instead of warm, but Mr. Vinod eventually understood that the elements that I've used executed warmth and he suggested that the alphabet 'A' can be the shape of a beanie hat instead of a candle. He also added that the scarf on my 'K' can have more details to look more realistic. He said that I'm almost there.
5/4/19 (Week 1)
We were assigned to come up with 10 different lettering expressions that capture our personality. We were told to work on graph papers with 5 designs each. I found it quite difficult to come up with 10 different designs which only captures one personality. I decided to portray my warm personality. Here are some of my sketches:
Fig.2.1 & Fig 2.2: Rough sketches on graph paper (warm)
We were told to digitize our lettering. Here is the outcome:
 |
| Fig.2.2: Digitized lettering (warm) |
A lot of comments about my design were referring to the personality 'cold'. What they don't know is that my personality may look cold on the outside, but I'm actually a warm person on the inside, which was represented by the winter elements.
After digitizing our names, we were assigned to animate our names to further emphasize on our personality. I had the idea of the letters cuddling up together to seek warmth. Mr. Vinod added that I could animate the details on the beanie hat to make it move around.
I started out by decreasing the distances of each alphabet until they are touching each other. Next, I used the puppet warp tool to pinch the alphabets to make it look squeezed. Then, I tested out the animation. It looked something like this.
To make it more interesting, I attempted to tilt the alphabets one by one to make them look like they're walking.
From this second attempt, I wasn't satisfied with how it looked. I felt like the movement of the alphabets were too subtle and I noticed some of the polka dots were still static at one point.
After digitizing our names, we were assigned to animate our names to further emphasize on our personality. I had the idea of the letters cuddling up together to seek warmth. Mr. Vinod added that I could animate the details on the beanie hat to make it move around.
I started out by decreasing the distances of each alphabet until they are touching each other. Next, I used the puppet warp tool to pinch the alphabets to make it look squeezed. Then, I tested out the animation. It looked something like this.
 |
| Fig.2.3: First attempt on animation (warm) |
 |
| Fig.2.4: Second attempt on animation (warm) |
So I went back with a few attempts by tilting the alphabets more and made sure that all the polka dots were modified. After creating the animation, I noticed the movement of the letter K was still a bit delayed. After making sure that they were no more flaws, here was my final take on the animation.
 |
| Fig.2.5: The Final Outcome of Lettering (Warm) |
19/4/19 (Week 3)
We were given 7 words based on what our class had decided (angry, bounce, freeze, faint, hungry, loop and levitate) to express the definition of the words. We were given 10 type families for this exercise and no distortions were allowed.
We had to sketch out our ideas first before digitizing them.
 |
| Fig.3.1: Rough ideas on graph paper #1 |
 |
| Fig.3.2: Rough ideas on graph paper #2 |
Below was my first attempt.
 |
| Fig.3.3: Initial attempt at type expressions |
After the first feedback session, I was told to rework on Freeze, Angry and Hungry. My initial expression for Angry was designed to look like an angry face, but Mr. Vinod said that it would be difficult for readers to identify the word.
 |
| Fig.3.4: Second attempt at type expressions |
After a second look on my type expressions, I removed the icicles on the word 'Freeze', changed the letters L and P to sans serif in 'Loop', added a shadow to 'Bounce' to create some depth. I've created a new expression for angry and added some punctuation marks around to emphasize the meaning. I've also learned how to use the clipping mask to shape the word 'Hungry' to the shape of a burger.
After finalizing all six type expressions, we had to pick one of the six expressions and digitize it. I chose the word 'Bounce' because I thought it would look cool when animated.
My idea was to have the letter 'O' in the word to represent a bouncing ball. Therefore, I would animate the ball dropping down from the sky and bounce off with the other letters beside.
 |
| Fig.3.5: Final outcome of type expressions after feedback (JPEG) Fig.3.6: Final outcome of type expressions (PDF) |
My idea was to have the letter 'O' in the word to represent a bouncing ball. Therefore, I would animate the ball dropping down from the sky and bounce off with the other letters beside.
 |
| Fig.3.7: First attempt's artboards |
 |
| Fig.3.8: First attempt on animation 'Bounce' |
For my first attempt, I noticed that there were many errors I've made. I messed up with the shadow sizes thinking that it decreases from big to small but it's supposed to keep increasing as the ball gets nearer to the ground. Also, the position of my letters was swaying when it's supposed to be static. Therefore, I decided to redo my animation and start clean.
After playing with a few attempts on the animation, I tried making the letters and the shadows look smoother. However, I realized that the outcome still looks a bit too slow for the dropping of the ball.
 |
| Fig.3.9: Third attempt's artboards |
 |
| Fig.3.10: Third attempt |
I adjusted and deleted some frames for the ball to look smoother and faster.
 |
| Fig.3.11: Fourth attempt |
 |
| Fig.3.12: The final outcome of 'Bounce' |
FEEDBACK
Week 1We did not receive feedback for the first class.
Week 2
Specific feedback: Mr. Shamsul initially thought my lettering looked cold instead of warm, but Mr. Vinod eventually understood that the elements that I've used executed warmth and he suggested that the alphabet 'A' can be the shape of a beanie hat instead of a candle. He also added that the scarf on my 'K' can have more details to look more realistic. He said that I'm almost there.
Week 3
Specific feedback: Mr. Vinod said my digitized lettering was good and for my animated version, he suggested that the details on my beanie hat can move around.
Week 4
General feedback: Mr. Vinod gave us a few rules to follow regarding the feedback sheet. Firstly, do not delete other people's feedback. Secondly, do not change the typeface which is Arial 10 points. Lastly, do not delete the red tags.
Specific feedback: Mr. Vinod told me to rework on the word Freeze, Angry and Loop. I was not allowed to add extra elements to the word Freeze and my initial expression for Angry was difficult for readers to identify the word. Mr. Vinod suggested me to change the 'O' in Bounce to non-oblique and the 'L' and 'P in Loop to sans serif. Mr. Vinod also suggested that I can use the clipping mask to shape the words Hungry like the shape of a bun. On the other hand, my Faint, Loop and Bounce looked okay.
Week 5
General feedback: Mr. Shamsul mentioned that our e-blogs should showcase the correct format, use high-quality images, include instructions that are public. Mr. Vinod also said that we should have a clear typeface which follows the theme of our blog. Our e-blogs should be updated by next week.
General feedback: Mr. Shamsul mentioned that our e-blogs should showcase the correct format, use high-quality images, include instructions that are public. Mr. Vinod also said that we should have a clear typeface which follows the theme of our blog. Our e-blogs should be updated by next week.
Specific feedback: Mr. Shamsul commented that my design of the article was too plain, one chunk of text was on the first page when it has no relation to the text on the next page.
Experiences
Week 1: I got to understand the module more in-depth and what are the expectations for the upcoming assignments and exercises. I also realized that taking notes and updating our blog weekly is crucial for this module. I struggled for my first exercise as I had some difficulty in coming up with ideas and inspirations.
REFLECTION
ExperiencesWeek 1: I got to understand the module more in-depth and what are the expectations for the upcoming assignments and exercises. I also realized that taking notes and updating our blog weekly is crucial for this module. I struggled for my first exercise as I had some difficulty in coming up with ideas and inspirations.
Week 2: I realized that I've been using the wrong terms for typography and every typeface lies a history behind it. I've also come to an understanding that there are so much more to typography such as their anatomy, history and I'm looking forward.
Week 3: I realized that the process of creating an animation is not easy at all. It requires a huge amount of hard work and patience.
Week 4: Being able to express the definition of the word through different type expressions was fun and challenging. Also, to learn about some of the histories of typography was very informative.
Week 5: I've learned that as designers, we have to think about the idea and purpose behind a design, it is not merely decorating for the sake of aesthetics.
Observations
Week 1: I've noticed that everyone seemed tired on the first week but was willing to stay focused throughout the class.
Week 2: I've noticed that everyone's sketches looked really good and neat and a lot of them were very efficient in their work.
Week 3: I've noticed that some of us looked frustrated and lost while creating their animation. However, everyone was really focused and engrossed in their work.
Week 4: Everyone had their own expression and style on the different words given.
Week 5: Everyone looked lost and jaded when having a new project with a higher difficulty to work on and a new software to learn.
Findings
Week 1: I realized that expressing my personality through lettering and coming up with 10 designs wasn't easy. I only managed to come up with 7 as I have ran out of ideas.
Week 2: I realized that I was a little slower than the others since I'm still new to Illustrator and that I like to do things according to my own pace.
Week 3: I learned that I work best at home without distractions although how much I wanted to finish up my work in class.
Week 4: Sitting at the smaller table in class was much more comfortable as I got to work more efficiently.
Week 5: I couldn't pay my full attention during lecture because I had been sleep deprived for the whole week.
FURTHER READING
1. Basics Design: Typography by Gavin Ambrose & Paul Harris5/4/19 - 12/4/19 (Week 1 - Week 2)
 |
| Fig.4.1: Basics Design: Typography |
Chapter 1 - Looking at Type
This chapter introduces and defines some of the most common typographical terminologies used when looking at and describing a typeface. Typographer Eric Gill stated that 'letters are things, they are not pictures of things'. Individual letters when arranged in a way, represent the sounds of a spoken language and visually express ideas in a manner that one understands.
According to James Felici, he describes font as a cookie cutter and typeface as the cookie produced from the cutter. When looking at a design, one can ask what typeface it uses or what font the type is set in. However, one cannot ask what font it uses. I've learned that when looking at a typeface or an extended typeface family, each variation was originally created for a specific function.
It is considered easier to read text that are set in Roman, Old Style or Antiqua. They are a combination of majuscule (upper case) and minuscule (lower case) characters. This is because the human eye 'scans' the text using the ascenders and descenders to make up words instead of constructively reading each and every word. I've also learned some of the typeface anatomy as well as absolute measurements and relative measurements.
2. Stop Stealing Sheep & find out how type works by Erik Spiekermann & E.M. Ginger
19/4/19 - 26/4/19 (Week 3 - Week 4)
 |
| Fig.4.2: Stop Stealing Sheep & find out how type works |
After reading the book, I've learned about the different type expressions that are used on different words to convey its meaning. Type has its practical uses. It has the ability to express emotions. If we look closely at a letter, we can see the personality that is expressed through its physical characteristics whether it is light or heavy, round or square, slim or squat. Some words can look nicer than others just like how some words sound better. It may be because we don't like the meaning of the word thus we form an opinion before we even start reading it. Anyone looking at a printed message will be influenced within a split second. From the arrangement of various elements, including the individual look of each one, an overall impression will be formed in our minds before we even read the first word.
Comments
Post a Comment