Typography - Exercises
28/08/19 - 25/09/19 (Week 1- Week 5)
Jenani Raja Saker (0334331)
Typography
Exercises
LECTURE NOTES
Lecture 1 : Briefing & Introduction to Typography
28.8.19 (Week 1)
Mr. Vinod briefed us about the basics and requirements of the module, i.e:
- The Sections of the blogs should be followed accordingly.
- Photos and documentations should not have shadows, and should be clean, precise and neat.
- Read a book and document our findings (if possible weekly)
- Link embedded files into our blog
; and so on and so forth.
Mr. Vinod proceeded to share with us what the difference is between a good and a poor portfolio which really caught my attention.
- Be methodical, thought out and even almost scientific in the way we complete our portfolio.
- Think about the person reading the blog, if we assume he or she knows certain things and proceed to omit information, it is the trademark of a poor portfolio.
"A good portfolio explains everything." - Mr. Vinod
During the lecture Mr. Vinod explained the development of typography from what it was back then - palm leaf manuscripts in India, hieroglyphs- till what we see now in our computers and books.
There is a difference between font, typeface, and type family (although, apparently not everyone can necessarily agree on this.)
- Font - The process of creating a typeface
- Typeface - The specific type face, i.e; Helvetica Neue Bold, Helvetica Neue Bold Italic
 |
| Figure 1.1 |
- Type Family - Arial, Helvetica, etc.
 |
| Figure 1.12 |
Typography exists in almost every part of our life, and almost everyone uses it without themselves realising. Textbooks which hold information that most students use day in and day out, would be easier for them to read if only it has good typography. It is an essential part of lives.
He then also proceeded to give us our exercise which was to letter our name according to our personality. We are to draft out five versions of our name. The main difference between calligraphy and lettering is that :
Calligraphy is Writing. Lettering is Drawing out the words.
Lecture 2 : Briefing & Introduction to Typography
4.9.19 (Week 2)
We went through the history of typography. We learnt how the tilting of a pen, the positioning of each letter and the thickness you write a letter affects how elegant or how efficient a typeface is. For example, a typeface that is compressed saves space but is harder to read. Mr. Vinod and Mr. Shamsul also went through the basics of Adobe Illustrator.
We were also told to learn and look up regarding "Form Follows Function". In which, I consulted Miss Jinchi about it. Miss Jinchi said,
"Form follows function is a design without much decorative element in conveying its message."
What we see in the design is what we get. It is very straightforward, simple like in offices and so on.
This is the basic and fundamental of design principle. Swiss Design and the Bauhaus movement are pioneers in this.
There is also another principle "Function follows form." Which is the exact opposite of form follows function. It is playful, decorative and this type of design 'has fun'.
Lecture 3 : Type Application
11.9.19 (Week 3)
This week, we were taught on the basics of type and its application.
- Letter spacing : Adding Space
- Kerning : Removing Space
- Tracking = Kerning + Letterspacing in a sentence.
- Counter space : Actual space between the letters.
GRAY VALUE : Distribution against white. If the grey matter is evenly distributed against the white, this would be the best case scenario. And how do we check for this?
Half close your eyes and check to see if you can see an even tone of colour across the text. If you do, you would know that you have achieved an ideal grey value. Though at times, different designers may perceive it in a different manner.
Mr. Vinod said that a good typographer has to know which typeface best suits the message at hand. Besides, we have to learn how to feel the text. We have to able to detect the feelings of the text. During the process of design, we have to understand the principle of balance to ensure that we are able to measure how much is too much and how much is needed. A good rule of thumb is to keep the line length between 55 - 65 characters. The size of the font shall be large enough to read easily at arms length which is often not the case for textbooks at school hence another reason for our sufferings in education.
INSTRUCTIONS
EXERCISES
Week 1
We were given a task on lettering our names based on our personality. And the first thing that came to my mind was "Ambivert", where you are an extrovert as much as an introvert. I decided to explore and self-reflect until I finally settled on "Dual Personality/Split Personality" for my assignment. My sister (whom I am closest to) often says that I am dramatic and "extravaganza" at times, and then other days where I am most simple and lazy and sort of introverted.
I decided to use references of type/lettering that are most often seen in fairytales as I personally feel the exude dramatic-ness and seem fancy. E.g:
 |
| Figure 2.1 Reference Image 1 |
 |
| Figure 2.11 Reference Image 2 |
 |
| Figure 2.12 Reference Image 3 |
Below are the explorations that I did with the concept of "Dual Personality".
 |
| Figure 2.13 (Dual Personality) |
 |
| Figure 2.14 (Dual Personality) |
Personally I am torn between choosing the second option of Figure 3.5, the second option of Figure 3.4 and the fifth option of Figure 3.4. (I kind of like all of them.)
Week 2
So the design from figure 3.5 was chosen, and I proceeded to digitise it. It was hard at first, but somehow I managed to complete it by using the pen tool, rectangles and by making my own brush.
This was a happy accident as I somehow managed to create my own calligraphy brush and write down my second personality at the back of the sans serif lettering. Below is the completed digitisation of my lettering. I also decided to weave my second personality in and out of the first to make sure its known that these are not two persons but just one.
Then I proceeded to make the gif of my personality. The idea was to make it seem a different personality at the different time of the day, and wanted to give the effect of a light flickering. So, when its dark, Im someone else, and when its bright, I have a different personality. Below is my attempt at the gif. I had a total of 21 different frames for this gif. I am a little unsatisfied with it, though I can't really put my finger on what's wrong or what I can improve.
Here is a reference of what I was aiming for :
Week 2
So the design from figure 3.5 was chosen, and I proceeded to digitise it. It was hard at first, but somehow I managed to complete it by using the pen tool, rectangles and by making my own brush.
This was a happy accident as I somehow managed to create my own calligraphy brush and write down my second personality at the back of the sans serif lettering. Below is the completed digitisation of my lettering. I also decided to weave my second personality in and out of the first to make sure its known that these are not two persons but just one.
 |
| Figure 2.15 (Dual Personality) |
Here is a reference of what I was aiming for :
 |
| Figure 2.16 (Reference of light flickering) |
 |
| Figure 2.17 (A snapshot of my process) |
 |
| Figure 2.18 (Gif of Dual Personality) |
Earlier this week we were told to download the 9 type families and try and express the words below by using the typefaces that we were assigned.
Below is my process of erasing the word clean which didn't take much time :
Once completed, I showed my gif to both lecturers and they were happy with my final gif and nodded their heads with approval and a thumbs up which was very gratifying for me indeed. Below is my final gif. :
FEEDBACK
28.08.19 (Week 1)
General Feedback
- No feedback was given.
Specific Feedback
- No feedback was given.
04.09.19 (Week 2)
General Feedback
-It is advised for us to read up more on Typography as it will come in handy. We should also learn to master important tools such as Illustrator and functions such as the pen tool. For more info fregarding 'form follows function', we could ask Miss Jinchi about it.
Specific Feedback
- Mr. Vinod chose the first option from Figure 3.5.
- He told me not to use existing fonts but since there is an overlay behind the sans serif lettering,
- He said it works alright and that the "Dual Personality" shows.
11. 09. 19 (Week 3)
General Feedback
- When we are putting our image into the blog, please insert Figure (number), Followed by the personality, semicolon and include the description.
- We are to have 5 main sections; Lecture, Instructions, Feedback, Reflection and Further Reading. Exercises is not a separate section but a part of Instructions.
Specific Feedback
- (Regarding Personality Gif) Mr. Vinod said my work was interesting and good, joined with Mr. Shamsul, they both liked my process (of having a reference) and said that it was the proper way of doing works. He also asked me to make 'Exercises' a sub-heading of
'Instructions'.
- 'GIGANTIC' : Mr. Shamsul and Mr. Vinod liked the Gigantic, though they sort of missed it at first.
- 'EMERGE' : They said it generally did show off the meaning, and that it was fine.
- 'SNEEZE' : Both liked and choose the first version of sneeze.
- 'PARTY' : Party was okay and the chose the first version.
- 'EXPLODE' : They were conflicted between the first and the second version. The second one would be nicer with less of the cracked effect. They finally decided to go with the first one.
- 'CLEAN' : Mr. Vinod said it was perfect.
12.09.19 (Week 4)
Specific Feedback
- Mr. Vinod told me that my animated gif. of the word "CLEAN" was a good idea and wanted to see if there is any way I could execute it better. He suggested to make the word "CLEAN" fades in instead of already existing as part of my background.
- Mr. Shamsul then suggested another idea which was also really cool, suggesting to make the word black and as I am erasing it to make the fill white yet let there be an outline of black. (Showcasing that the letter which was previously unclean is now CLEAN.)
- The eraser also looks kind of jagged as in more of hexagon shape.
- "ok lah", by Mr. Vinod at my second attempt at making a gif.
- Nodded heads of approval and a thumbs up from the lecturers at my final gif. of CLEAN.
General Feedback :
- Export the 6 expressions as a JPEG and not a PNG and a pdf file of the expressions must embedded.
- The process of the type expression may be attached as a screenshot but the collective Type file should be exported and not attached as a screenshot.
- We were told to compile the reflection from all the weeks that we've been doing into one paragraph as opposed to week by week
- We were told to compile the reflection from all the weeks that we've been doing into one paragraph as opposed to week by week
- We are to install all the type families and all the typefaces of the family into our laptops.
- Progression is the key in designing. It would be better if we we captured the process by step of the words.
REFLECTION
Experience :
28.08.19 (Week 1)
- Personally having heard many things about Mr. Vinod's class, mostly things such as "Good Luck for Typography!!", "Ohhhh... I can't wait for you to learn from Mr. Vinod" and even one of our lecturers saying "If you fail typography, you probably shouldn't be in this course", I was really nervous and super scared coming to his class but to my pleasant surprise somehow found Mr. Vinod to be very 'guideful' and somehow necessarily strict.
I also probably felt 1/100th of how real world designers out there working for clients would feel having to do many revisions of a particular design. It was frustrating at first but if you're solely focus and determined on completing the task just for the grades, you would complete the task, but you may not learn anything.
But if we're constantly dissecting the feedback given by Mr. Vinod and Mr. Shamsul, we would then be able to think like them and actually LEARN typography.
- I observed that typography is being used by everyone without even realising it and how essential it is in out lives back at home.
- I observed by reflecting on my work, that if I were to work for a client, a good designer should eb able to deduce the clients wants before the client even knows it themselves. I noticed this when I had many ideas in my head of what mr. Vinod would be expecting in regards to my second gif. (modifications to the gif) but decided to just follow instructions and submit whatever I was told to do. But during my feedback session, I was intact told to modify my design, lo and behold it was exactly the modification that I felt I should do just before. Hence, I should trust myself as a designer and also be able to anticipate the wants of the client (in my case, Mr. Vinod and Mr. Shamsul) before hand and show it to them.
Findings :
- "As designers we have a moral and ethical responsibility towards the community because typography affects people" - Mr. Vinod
FURTHER READINGS
Book 1
NAILING THE BAUHAUS STYLE
Rule #1: Form follows function
Rule #2: Typography Matters
This book was written by Denise Bosler and there is plenty of information in regards to publication and printing design. It covers from typography till professional publication layout which came in handy in my first project.
- EMERGE
- GIGANTIC
- CLEAN
- PARTY
- EXPLODE
- SNEEZE
The moment I saw the post on Facebook, I immediately knew how I wanted certain words to be expressed and I quickly 'digitised' mine through WhatsApp. Below are screenshots of my ideation process :
 |
| Figure 2.19 (EXPLODE) ; Ideation Process through WhatsApp |
 |
| Figure 2.2 (EMERGE) ; Ideation Process through WhatsApp |
 |
| Figure 2.21 (EMERGE) ; Ideation Process through WhatsApp |
 |
| Figure 2.22 (PARTY) ; Ideation Process through WhatsApp |
 |
| Figure 2.23 (GIGANTIC) ; Ideation Process through WhatsApp |
 |
| Figure 2.24 (PARTY Version 1) ; Ideation Process through WhatsApp |
 | |
|
 |
| Figure 2.26 (PARTY) ; Ideation Process through WhatsApp |
I then proceeded to digitise it as I already had a fairly rough idea of what I wanted to do. Below is my the screenshot of all my different iterations of the 6 expressions :
 |
| Figure 2.27 (Gigantic, Emerge, Sneeze, Party, Explode, Clean) ; Exploration of the Type Expression |
After feedback from Mr. Vinod, I choose the 6 words below as the final product.
 |
| Figure 2.28 (Gigantic, Emerge, Sneeze, Party, Explode, Clean) |
Below is a pdf version:
I was then told to animate any one of the expression and I didn't want to complicate myself by choosing tough ones. It took me a while, but I finally made up my mind to animate the word "CLEAN".
Below is the screenshot of my first attempt designing the dartboards.
Following is the initial process of Animating the gif in Photoshop :
Below is my first attempt at the gif prior to the feedback :
Mr. Vinod and Mr. Shamsul liked my idea but thought that could be better ways to execute it. Mr. Vinod gave me an idea but then asked me to scratch it and Mr. Shamsul then suggested another idea which was also really cool, suggesting to make the word black and as I am erasing it to make the fill white yet let there be an outline of black. (Showcasing that the letter which was previously unclean is now CLEAN.)
Below is my halfway process of the new gif animation:
As I was doing this process Mr. Vinod came over and told me that the eraser seemed more 'jagged' hence I had to go over the brushstrokes with the Smooth Tool. Here is a screenshot of it :
The finished gif. looked bit like this :
I proceeded to then show this to Mr. Vinod, and his remarks precisely was "ok lah" which was quite unsatisfactory for me. Seeing my sad face, Mr. Vinod proceeded to suggest another way that would make my gif. better, erasing the words itself afterwards which would prove the point clean, as everything is completely empty, spick and span, finally clean.
I was then told to animate any one of the expression and I didn't want to complicate myself by choosing tough ones. It took me a while, but I finally made up my mind to animate the word "CLEAN".
Below is the screenshot of my first attempt designing the dartboards.
 |
| Figure 2.29 (Artboards in Adobe Illustrator) ; Process of initial design |
Following is the initial process of Animating the gif in Photoshop :
 |
| Figure 2.3 (Animating in Photoshop) ; Initial process of animation |
 |
| Figure 2.31 (CLEAN) ; My first attempt at the gif. |
Below is my halfway process of the new gif animation:
 |
| Figure 2.32 (CLEAN) ; My second attempt at the gif. |
As I was doing this process Mr. Vinod came over and told me that the eraser seemed more 'jagged' hence I had to go over the brushstrokes with the Smooth Tool. Here is a screenshot of it :
 |
| Figure 2.33 (CLEAN); Using the smooth tool to smoothen the lines. |
The finished gif. looked bit like this :
 |
| Figure 2.34 (CLEAN) ; Attempt 2 at gif. |
I proceeded to then show this to Mr. Vinod, and his remarks precisely was "ok lah" which was quite unsatisfactory for me. Seeing my sad face, Mr. Vinod proceeded to suggest another way that would make my gif. better, erasing the words itself afterwards which would prove the point clean, as everything is completely empty, spick and span, finally clean.
Below is my process of erasing the word clean which didn't take much time :
 |
| Figure 2.35 (CLEAN); Process of erasing the word Clean. |
Once completed, I showed my gif to both lecturers and they were happy with my final gif and nodded their heads with approval and a thumbs up which was very gratifying for me indeed. Below is my final gif. :
 |
| Figure 2.36 (CLEAN) Final Gif. of Clean |
FEEDBACK
28.08.19 (Week 1)
General Feedback
- No feedback was given.
Specific Feedback
- No feedback was given.
04.09.19 (Week 2)
General Feedback
-It is advised for us to read up more on Typography as it will come in handy. We should also learn to master important tools such as Illustrator and functions such as the pen tool. For more info fregarding 'form follows function', we could ask Miss Jinchi about it.
Specific Feedback
- Mr. Vinod chose the first option from Figure 3.5.
- He told me not to use existing fonts but since there is an overlay behind the sans serif lettering,
- He said it works alright and that the "Dual Personality" shows.
11. 09. 19 (Week 3)
General Feedback
- When we are putting our image into the blog, please insert Figure (number), Followed by the personality, semicolon and include the description.
- We are to have 5 main sections; Lecture, Instructions, Feedback, Reflection and Further Reading. Exercises is not a separate section but a part of Instructions.
Specific Feedback
- (Regarding Personality Gif) Mr. Vinod said my work was interesting and good, joined with Mr. Shamsul, they both liked my process (of having a reference) and said that it was the proper way of doing works. He also asked me to make 'Exercises' a sub-heading of
'Instructions'.
- 'GIGANTIC' : Mr. Shamsul and Mr. Vinod liked the Gigantic, though they sort of missed it at first.
- 'EMERGE' : They said it generally did show off the meaning, and that it was fine.
- 'SNEEZE' : Both liked and choose the first version of sneeze.
- 'PARTY' : Party was okay and the chose the first version.
- 'EXPLODE' : They were conflicted between the first and the second version. The second one would be nicer with less of the cracked effect. They finally decided to go with the first one.
- 'CLEAN' : Mr. Vinod said it was perfect.
12.09.19 (Week 4)
Specific Feedback
- Mr. Vinod told me that my animated gif. of the word "CLEAN" was a good idea and wanted to see if there is any way I could execute it better. He suggested to make the word "CLEAN" fades in instead of already existing as part of my background.
- Mr. Shamsul then suggested another idea which was also really cool, suggesting to make the word black and as I am erasing it to make the fill white yet let there be an outline of black. (Showcasing that the letter which was previously unclean is now CLEAN.)
- The eraser also looks kind of jagged as in more of hexagon shape.
- "ok lah", by Mr. Vinod at my second attempt at making a gif.
- Nodded heads of approval and a thumbs up from the lecturers at my final gif. of CLEAN.
General Feedback :
- Export the 6 expressions as a JPEG and not a PNG and a pdf file of the expressions must embedded.
- The process of the type expression may be attached as a screenshot but the collective Type file should be exported and not attached as a screenshot.
- We were told to compile the reflection from all the weeks that we've been doing into one paragraph as opposed to week by week
- We were told to compile the reflection from all the weeks that we've been doing into one paragraph as opposed to week by week
- We are to install all the type families and all the typefaces of the family into our laptops.
- Progression is the key in designing. It would be better if we we captured the process by step of the words.
REFLECTION
Experience :
28.08.19 (Week 1)
- Personally having heard many things about Mr. Vinod's class, mostly things such as "Good Luck for Typography!!", "Ohhhh... I can't wait for you to learn from Mr. Vinod" and even one of our lecturers saying "If you fail typography, you probably shouldn't be in this course", I was really nervous and super scared coming to his class but to my pleasant surprise somehow found Mr. Vinod to be very 'guideful' and somehow necessarily strict.
I also probably felt 1/100th of how real world designers out there working for clients would feel having to do many revisions of a particular design. It was frustrating at first but if you're solely focus and determined on completing the task just for the grades, you would complete the task, but you may not learn anything.
But if we're constantly dissecting the feedback given by Mr. Vinod and Mr. Shamsul, we would then be able to think like them and actually LEARN typography.
"Chase the learning, not the grades," Mr. Vinod.
Observations :- I observed that typography is being used by everyone without even realising it and how essential it is in out lives back at home.
- I observed by reflecting on my work, that if I were to work for a client, a good designer should eb able to deduce the clients wants before the client even knows it themselves. I noticed this when I had many ideas in my head of what mr. Vinod would be expecting in regards to my second gif. (modifications to the gif) but decided to just follow instructions and submit whatever I was told to do. But during my feedback session, I was intact told to modify my design, lo and behold it was exactly the modification that I felt I should do just before. Hence, I should trust myself as a designer and also be able to anticipate the wants of the client (in my case, Mr. Vinod and Mr. Shamsul) before hand and show it to them.
Findings :
- "As designers we have a moral and ethical responsibility towards the community because typography affects people" - Mr. Vinod
I found how true this statement was when I remembered seeing somewhere that there was an error in reading the "Best Picture Award" during the OSCARS. It was hypothesised that this error was due to poor typography.
Original Oscars Reading Cue :
 |
| Figure 5.1 (Original Oscars Reading Cue) |
The reader only has a few minutes and the hierarchy of the text is poor that often there are mistakes. Below is the modified and suggested Reading Cue by Benjamin Bannister.
 |
| Figure 5.2 (Modified Oscars Reading Cue) |
This cue card makes more sense as the reader can clearly see that the Best Picture award is won by "Moonlight" as the size and placement of the text is appropriate.
More often than not the job of a designer is frowned upon as an unimportant compared to other professions, but little do we know that design permeates each and every part of our life. It truly makes me feel proud to be pursuing this course and gives me a new sense of determination marching forward in this journey.
FURTHER READINGS
Book 1
 |
| Figure 6.1; Book on Bauhaus |
 |
| Figure 6.12 Book on Bauhaus |
Rule #1: Form follows function
- Honesty to Construction and Death to Decoration.
- Every single element of design has its own function and is not there as a decorative element.
- Uses of linear and geometrical works and avoiding uses of floral or curvy (useless) visual decoration.
- Very minimalistic.
Rule #2: Typography Matters
- One of the most important classes at the Bauhaus was typography.
- Bauhaus concentrated on simplified fonts & avoided the much heavier renderings of the standard German typography of the time.
- Designers started wrapping text around objects, and also learned to arrange type horizontally, vertically and even diagonally.
- They also refused to combine lower and upper case types in a same work and preferred the use of sans-serif fonts.
Rule #3: Geometry is King
Book 2 : - There was a deep love of simple geometry — another quality that makes it a great fit for web design.
- Students broke down the composition of furniture to the simplest of the geometric shapes. The rawest form of it.
- Another example of the influence of Bauhaus Design is the famous Swedish furniture store, IKEA. Simple geometry prevails.
 |
| Figure 6.13; Book on Type |
Comments
Post a Comment