Typography / Exercise
13th April 2020 - 8th May 2020 / Week 1 - Week 4
Ali Nazhan Al-Baharin bin Azmi / 0328763 / BSE
Typography / Taylor's Lakeside University
Task
THE LECTURES
Week 1
Week 2
The second week started with a review of all the exercises done by the students. Mr Vinod and Mr Shamsul evaluate and give feedback about the work that has been done by the student. With the use of Zoom application, students one by one shared their screen and present their work progress for the first task given which is by expressing 6 letter of words.
Also from the pre-recorded lecture is about Development of typography throughout the years of human era. First its the early letter form development which is Phoenician to roman. This letter form are based the tool that were used has influence based on what the letter is being create. Follow up to that, the Greeks then change the direction of writing from right to left which Phoenicians does to left to right called the style 'boustrophedon'.
The Romans and Etruscan paint their letterforms before they inscribing them to avoid any waste of marble. This caused to form Roman letterforms based on the qualities of their strokes on which tool they used.
Then there's a lot hand scrips from 3rd to 10th century C.E. explain by Mr Vinod. But I only choose to explain 2 early hand scrips which is Square capitals and Rustic capitals. Square capitals which they added the serifs to finished the main strokes. This can be achieve when the person writing it at an angle of approximately 60 degree of the perpendicular.
Then there's compressed version of square capitals called rustic capitals. It can be achieve by using 30 degree angle of the perpendicular. Although this hand script is faster to write compared to square capitals but it is slightly harder to read it.
Moreover, there's text type classification. This is a response to prevailing technology (printers) commercial needs (people want to get books, bible to read which cause demands of books is high).
Week 3
The summary of lecture for week 3 would be text formatting and how usually and supposedly text is presented. Mr Vinod thought me about for the first few part of the video about kerning and tracking and explain why those two are difference in some way. Also, we learn about letter spacing and why is it important. Follow up to that we learn how to formatting text such as flush left, centered and flush right. Thus, we learn about justified which almost the same as centering but it impose a symmetrical shape on the text. Furthermore, we learn about type size, leading and line length. Regarding line length the best or good rule of thumb is to keep line length between 55-65 characters depends on the situation.
Week 4
Well for this week of lecture is a continuation of text part 2. First part of the video lecture is about letterforms which we learn in detail about baseline, median and X-height. Then we learn a bit about stroke which any line that defines the basic letterform. Then we learn about apex/vertext, ascender, etc. Most of it is that are related at describing letterforms. Then we move on into the video lecture explaining about the font itself. Like upppercase is a capital letters of a character nad lowercase is lowercase of letters. Also I learn new stuff like small capitals which is an uppercase letterforms draw to the x-height of the typeface. Then last but not least we learn how to describe typefaces.
Furthermore, in this week lecture 8am class we learn about paragraph spacing, leading, kerning, appropriate pointsize, and much more about InDesign tools. We learn about grids and columns and their appropriate margin so it look nice to read to our human eyes. In addition to that we learn the meaning of widows is a very short line, usually one word left at the end of a hyphenated word. An orphans is the next part of line is move to next page. We were try to avoid as much to have an orphan and widows in out text formatting. Towards the end of the class, we learn text alignment which different pointsize of text can be align by using grids system provided by InDesign. Last but not least, we learn about headlines, subtext and captions.
THE INSTRUCTIONS
Task 1 - Type Expression
For the first task 1, the task given was to express 6 out of 7 the meaning of the words typographically using any typeface that suitable to the words given to us. We need to visualize it and put an appropriate design that will express the word. The words given are:
Before using Adobe Illustrator CC, we need to sketch them and try to find out which design that came up to our mind. No need to focus on what typeface to use during sketch of the words. Just try to get a grip of what the idea the design would be.
The final product is down below
Task 4 - Formatting text part 2
For this task is a continuation of last week exercise where we put our business card from part one formatting text into an envelope template provided by Mr Vinod and Mr Shamsul.
Then we follow up with different columns design and the amount of row that are suitable in formatting text. We learn how to properly use the amount of point size, margins, kerning and also text alignment.
Finally, with this format, we were instructed to design 3 formatting text properly with 200 words inside it. You can add pictures, subtext and also title. The first two was given my Mr Vinod and we were supposed to use our own words and fix all the ragging and do kernings to make sure it looks nice to read.
The last composition was instructed to ourselves to design it and use all the knowledge that we learn and put into this composition.
Fig 2.4.6 PDF of Text Formatting Exercise
THE FEEDBACK
Task 1
Need to change the typeface of DISAPPEAR, DROWN. Also, there's few fix that's need to be done on HIDDEN because of the drop shadow is too big and appealing.
So my fix for Hidden is I remove the drop shadow as only the D is appealing. The other characters will be sort of hidden besides the D.
Task 2
Mr Vinod approves the design of the FLY animation. "Great work over there"
Task 3
Mr Vinod suggest to try 4th option of business card option design. He said that the present one is not properly placed which is the 3rd one. He also commented to use a smaller pointsize for the paragraph as it seems to big to read.
Task 4
Mr Vinod love how the layout align for the final one and there's only minor tweaks need to be done. Mr Shamsul says the portfolio exercise is completed.
THE REFLECTIONS
Week 1
Experience
Learn about Adobe Illustrator with Mr Shamsul and Mr Vinod
Observations
I found out that the first week online learning is not as difficult as I think it would be.
Findings
Learn about tools and style on how to use them in Illustrator
Week 2
Experience
Got a feedback from the lecturers on my first few designs that we posted in our e portfolio.
Observations
Learn how to do GIF from the design that we make in Photoshop. Mr Vinod gave example in the lecturers
Findings
I manage to design my own flying GIF using my design. Its quite interesting to play with stop-motion.
Week 3
Experience
Introduction to InDesign and making myself a business card!
Observations
I learn how to use typeface and appropriate pointsize. Grids and columns also help in making your work tidy and neat.
Findings
I found out which typeface that suits my style for my life. I choose Universe as its very modern and neat to show that I love tech using this typeface. (Can refer to Fig 2.3.3)
Week 4
Experience
I learn more on how to use InDesign to help me in properly align the text and paragraph. I had experience using Adobe Photoshop and Illustrator before, but with new knowledge provided from Mr Vinod and Mr Shamsul, they thought bunch of new stuff that I dint know before. Also, they thought me about text alignment, kerning, leading, tracking etc.
Observations
Ragging, orphans and widows are the thing that are bad in text formatting. Small detail can make such a huge difference in reading the text that we put.
Findings
Learn about what pointsize appropriate for subtext, and the amount that you need to add for leading based on your pointsize. Learn about maximum number of characters per line. Last but not least I learn about how neat your work is when you properly do a text alignment.
FURTHER READING
THE FUNDAMENTAL OF TYPOGRAPHY
by Ambrose, Gavin, Harris, Paul
This book talks about how typography itself evolve until what it is today. It starts with the history like phonogram, ideogram, symbol, pictogram and icon this all are consider had being used in writing system throughout the human history life. And some are still being used until today. The book say that "Phoenicians were responsible for the development of what is arguably the greatest invention in humanity" (page 13).
This book also talks about the origins of type and show how it has developed through time to provide a foundation of how we prescribe the information we received. I also learn about some typography jargon and few terms that are similar that I learn during the class.
PLAYING WITH TYPE
by McCorninck, Lara
This book is for people who loves to play with typeface as it goes through and explain 50 different type of experiments that educates me on how to properly design just only using the fonts given. It talks about letter and wordplay, alphabet play, lettering play and much more! It also explain the type terms that we also learn in class such as X-height, leading, letterspacing, weight, font, baseline etc. There's also a topic or one of the experiment in the book explain that are similar as task 1 where it express the word in type.
Ali Nazhan Al-Baharin bin Azmi / 0328763 / BSE
Typography / Taylor's Lakeside University
Task
THE LECTURES
Week 1
For the summary of first week of lectures, we have a meet and greet session with the lecturers Mr Vinod and Mr Shamsul. The lecturers are friendly with the student and also helpful throughout the class. The first class started with Mr Vinod explaining the module and also show us how to get attendance by replying through Facebook reply. In addition to that he also briefly explain and commented on few of the student blog which one of it is mine (thanks for informing me about the missing 'Further Reading' in my blog Sir!). He also mention that we students need few applications to be installed so that we can do the exercise given by the lecturers.
Moreover, the third session was handled by Mr Shamsul using Zoom where he shows his screen and introduce few tools in Adobe Illustrator that would be helpful for us to do the exercise in the future. He showed us few of examples by illustrate the word based on the meaning behind it. Basically its called type expression. Also he also showed us what is kerning, letter spacing and Tracking, which Mr Vinod also explained in the morning session.
Also, the lecture video we learn about the existence of Typography. The reason why typography is important is to understand which font are suitable based on situation. Typography has evolve for 500 years from calligraphy to lettering to typography.
Font - Process of designing the font
Type family - Refers to the various families that do not share characteristics
Typeface - Individual weight within the type family.
Also, the lecture video we learn about the existence of Typography. The reason why typography is important is to understand which font are suitable based on situation. Typography has evolve for 500 years from calligraphy to lettering to typography.
Font - Process of designing the font
Type family - Refers to the various families that do not share characteristics
 |
| Fig 1.1.1 Type family |
Typeface - Individual weight within the type family.
 |
| Fig 1.1.2 Typeface |
Week 2
The second week started with a review of all the exercises done by the students. Mr Vinod and Mr Shamsul evaluate and give feedback about the work that has been done by the student. With the use of Zoom application, students one by one shared their screen and present their work progress for the first task given which is by expressing 6 letter of words.
Also from the pre-recorded lecture is about Development of typography throughout the years of human era. First its the early letter form development which is Phoenician to roman. This letter form are based the tool that were used has influence based on what the letter is being create. Follow up to that, the Greeks then change the direction of writing from right to left which Phoenicians does to left to right called the style 'boustrophedon'.
 |
| Fig 1.2.1 boustrophedon style |
The Romans and Etruscan paint their letterforms before they inscribing them to avoid any waste of marble. This caused to form Roman letterforms based on the qualities of their strokes on which tool they used.
 |
| Fig 1.2.2 Early Letterform development |
 |
| Fig 1.2.3 Square Capitals |
 |
| Fig 1.2.4 Rustic Capitals |
Moreover, there's text type classification. This is a response to prevailing technology (printers) commercial needs (people want to get books, bible to read which cause demands of books is high).
 |
| Fig 1.2.5 Blackletter |
 |
| Fig 1.2.6 Oldstyle |
 |
| Fig 1.2.7 Italic |
 |
| Fig 1.2.8 Script |
 |
| Fig 1.2.9 Transitional |
 |
| Fig 1.2.10 Modern |
 |
| Fig 1.2.11 Square Serif / Slab Serif |
 |
| Fig 1.2.12 Serif/Sans Serif |
Week 3
The summary of lecture for week 3 would be text formatting and how usually and supposedly text is presented. Mr Vinod thought me about for the first few part of the video about kerning and tracking and explain why those two are difference in some way. Also, we learn about letter spacing and why is it important. Follow up to that we learn how to formatting text such as flush left, centered and flush right. Thus, we learn about justified which almost the same as centering but it impose a symmetrical shape on the text. Furthermore, we learn about type size, leading and line length. Regarding line length the best or good rule of thumb is to keep line length between 55-65 characters depends on the situation.
 |
| Fig 1.3.1 Kerning |
 |
| Fig 1.3.2 Leading |
 |
| Fig 1.3.3 Tracking |
Week 4
Well for this week of lecture is a continuation of text part 2. First part of the video lecture is about letterforms which we learn in detail about baseline, median and X-height. Then we learn a bit about stroke which any line that defines the basic letterform. Then we learn about apex/vertext, ascender, etc. Most of it is that are related at describing letterforms. Then we move on into the video lecture explaining about the font itself. Like upppercase is a capital letters of a character nad lowercase is lowercase of letters. Also I learn new stuff like small capitals which is an uppercase letterforms draw to the x-height of the typeface. Then last but not least we learn how to describe typefaces.
Furthermore, in this week lecture 8am class we learn about paragraph spacing, leading, kerning, appropriate pointsize, and much more about InDesign tools. We learn about grids and columns and their appropriate margin so it look nice to read to our human eyes. In addition to that we learn the meaning of widows is a very short line, usually one word left at the end of a hyphenated word. An orphans is the next part of line is move to next page. We were try to avoid as much to have an orphan and widows in out text formatting. Towards the end of the class, we learn text alignment which different pointsize of text can be align by using grids system provided by InDesign. Last but not least, we learn about headlines, subtext and captions.
THE INSTRUCTIONS
Task 1 - Type Expression
For the first task 1, the task given was to express 6 out of 7 the meaning of the words typographically using any typeface that suitable to the words given to us. We need to visualize it and put an appropriate design that will express the word. The words given are:
- LOUD
- DROWN
- DISAPPEAR
- PUSH
- FLY
- HIDDEN
- KILL/LOVE
Before using Adobe Illustrator CC, we need to sketch them and try to find out which design that came up to our mind. No need to focus on what typeface to use during sketch of the words. Just try to get a grip of what the idea the design would be.
 |
Fig 2.1.0 Sketch 1
|
 |
| Fig 2.1.1 Sketch 2 |
Then I start digitized the type expression and add some minor tweaks to the design.
LOUD
I design the loud type expression by showing that how the word is getting loud towards the end. Something like a trumpet or a loudspeaker that school teacher used in sports day which enhance the voice of a person. Loud is just I play with the type family.
DISAPPEAR
For disappear is quite simple. I design it to have a shadow beneath it and make it slowly disappear when further away from the word. I reflect the disappear word and play with gradient to achieve a disappear kinda look.
DROWN
For drown I express it as half of the word is drowning. The black rectangular resembles the sea which shows how scary a sea can be.
HIDDEN
My first thought was to express hidden like how the word D covers up the rest of the word. Like how others hide itself behind the enormous of the D. I used Transform under Distort & transform to achieve the long drop shadow of the D. But then after a few fixes, I decided to make the H that hides the other words.
KILL
Kill can be describe as the word being slashed by a sword. It shows that the word body is being killed or to be exact, slashed by someone. I use the create outline and shape builder tool to achieve this kill look.
FLY
I design it as a rocket that just have launch from the Earth. The exhaust is Y which the first body part that detached from the rocket and that's why its the smallest to show that it's already detached earlier. Then comes the next part of the body which resembles the L in lowercase. And last but not least is the main body which is the F where the passenger is reside.
Below are the final design and put it together in 6 box given by Mr Vinod and Mr Shamsul
LOUD
I design the loud type expression by showing that how the word is getting loud towards the end. Something like a trumpet or a loudspeaker that school teacher used in sports day which enhance the voice of a person. Loud is just I play with the type family.
 |
| Fig 2.1.2 Screen grab loud |
For disappear is quite simple. I design it to have a shadow beneath it and make it slowly disappear when further away from the word. I reflect the disappear word and play with gradient to achieve a disappear kinda look.
 |
| Fig 2.1.3 Screen Grab Disappear |
DROWN
For drown I express it as half of the word is drowning. The black rectangular resembles the sea which shows how scary a sea can be.
 |
| Fig 2.1.4 Screen Grab Drown |
My first thought was to express hidden like how the word D covers up the rest of the word. Like how others hide itself behind the enormous of the D. I used Transform under Distort & transform to achieve the long drop shadow of the D. But then after a few fixes, I decided to make the H that hides the other words.
 |
| Fig 2.1.5 Screen Grab Hidden |
 |
| Fig 2.1.6 Screen Grab Hidden 2 |
KILL
Kill can be describe as the word being slashed by a sword. It shows that the word body is being killed or to be exact, slashed by someone. I use the create outline and shape builder tool to achieve this kill look.
 |
| Fig 2.1.7 Screen Grab Kill |
FLY
I design it as a rocket that just have launch from the Earth. The exhaust is Y which the first body part that detached from the rocket and that's why its the smallest to show that it's already detached earlier. Then comes the next part of the body which resembles the L in lowercase. And last but not least is the main body which is the F where the passenger is reside.
 |
Fig 2.1.8 Screen Grab Fly
|
 |
| Fig 2.1.9 Digitized Type Expression |
Fig 2.1.10 PDF Digitized Type Expression
Task 2 - Animate Type Expression
The task 2 given was to animate one of the type expression. I decided to use FLY and animate it using Adobe Illustrator and Photoshop.
Then I animate it in Photoshop by following the steps showed by Mr Shamsul and Mr Vinod.
The task 2 given was to animate one of the type expression. I decided to use FLY and animate it using Adobe Illustrator and Photoshop.
 |
| Fig 2.2.1 Process in Illustrator |
 |
| Fig 2.2.2 Process in Photoshop |
The final product is down below
 |
| Fig 2.2.3 Gif FLY |
Task 3 - Formatting Text in InDesign
For this task, we're supposed to design our business card using InDesign. We need to watch the video given by Mr Vinod. I learn text formatting and all the tools required to make the design possible as shown below.
For this task, we're supposed to design our business card using InDesign. We need to watch the video given by Mr Vinod. I learn text formatting and all the tools required to make the design possible as shown below.
 |
| Fig 2.3.1 Step 1 |
 |
| Fig 2.3.2 Step 2 |
Below are the final design of the Business card after I went through final touch up and fix up all the minor flaws.
 | |
|
 | |
|
Task 4 - Formatting text part 2
For this task is a continuation of last week exercise where we put our business card from part one formatting text into an envelope template provided by Mr Vinod and Mr Shamsul.
 |
| Fig 2.4.1 Envelope format. |
 |
| Fig 2.4.2 Columns and Grid Format. |
 |
| Fig 2.4.3 First composition JPEG |
 |
| Fig 2.4.4 Second composition JPEG |
The last composition was instructed to ourselves to design it and use all the knowledge that we learn and put into this composition.
 |
| Fig 2.4.5 Third composition JPEG |
Fig 2.4.6 PDF of Text Formatting Exercise
THE FEEDBACK
Task 1
Need to change the typeface of DISAPPEAR, DROWN. Also, there's few fix that's need to be done on HIDDEN because of the drop shadow is too big and appealing.
So my fix for Hidden is I remove the drop shadow as only the D is appealing. The other characters will be sort of hidden besides the D.
Task 2
Mr Vinod approves the design of the FLY animation. "Great work over there"
Task 3
Mr Vinod suggest to try 4th option of business card option design. He said that the present one is not properly placed which is the 3rd one. He also commented to use a smaller pointsize for the paragraph as it seems to big to read.
Task 4
Mr Vinod love how the layout align for the final one and there's only minor tweaks need to be done. Mr Shamsul says the portfolio exercise is completed.
THE REFLECTIONS
Week 1
Experience
Learn about Adobe Illustrator with Mr Shamsul and Mr Vinod
Observations
I found out that the first week online learning is not as difficult as I think it would be.
Findings
Learn about tools and style on how to use them in Illustrator
Week 2
Experience
Got a feedback from the lecturers on my first few designs that we posted in our e portfolio.
Observations
Learn how to do GIF from the design that we make in Photoshop. Mr Vinod gave example in the lecturers
Findings
I manage to design my own flying GIF using my design. Its quite interesting to play with stop-motion.
Week 3
Experience
Introduction to InDesign and making myself a business card!
Observations
I learn how to use typeface and appropriate pointsize. Grids and columns also help in making your work tidy and neat.
Findings
I found out which typeface that suits my style for my life. I choose Universe as its very modern and neat to show that I love tech using this typeface. (Can refer to Fig 2.3.3)
Week 4
Experience
I learn more on how to use InDesign to help me in properly align the text and paragraph. I had experience using Adobe Photoshop and Illustrator before, but with new knowledge provided from Mr Vinod and Mr Shamsul, they thought bunch of new stuff that I dint know before. Also, they thought me about text alignment, kerning, leading, tracking etc.
Observations
Ragging, orphans and widows are the thing that are bad in text formatting. Small detail can make such a huge difference in reading the text that we put.
Findings
Learn about what pointsize appropriate for subtext, and the amount that you need to add for leading based on your pointsize. Learn about maximum number of characters per line. Last but not least I learn about how neat your work is when you properly do a text alignment.
FURTHER READING
THE FUNDAMENTAL OF TYPOGRAPHY
by Ambrose, Gavin, Harris, Paul
 |
| The Fundamental of Typography cover |
This book talks about how typography itself evolve until what it is today. It starts with the history like phonogram, ideogram, symbol, pictogram and icon this all are consider had being used in writing system throughout the human history life. And some are still being used until today. The book say that "Phoenicians were responsible for the development of what is arguably the greatest invention in humanity" (page 13).
This book also talks about the origins of type and show how it has developed through time to provide a foundation of how we prescribe the information we received. I also learn about some typography jargon and few terms that are similar that I learn during the class.
PLAYING WITH TYPE
by McCorninck, Lara
 |
| Playing with Type Cover |
This book is for people who loves to play with typeface as it goes through and explain 50 different type of experiments that educates me on how to properly design just only using the fonts given. It talks about letter and wordplay, alphabet play, lettering play and much more! It also explain the type terms that we also learn in class such as X-height, leading, letterspacing, weight, font, baseline etc. There's also a topic or one of the experiment in the book explain that are similar as task 1 where it express the word in type.
Comments
Post a Comment