Typography Exercises
Typography
Week 1- 4
Chan Meiling/ 0337771/ BDCM
Task 1- Exercises
LECTURE
Week 1 (Introduction and briefing)
Introduction
Introduction
After watching the Typo_0_Introduction lecture video by Mr.Vinod and some research on my own, I get to understand more about Typography and how important it is to express or even convey hidden messages and information through text. Typography is also widely used in websites, books, posters, logo, trademark etc.
Notes:
Typography - the style or appearance of text
Lettering - the process of drawing the letters out
Calligraphy - writing style
Typeface - a particular design of type Font - the combination of typeface
What is the difference between typeface and font?
The distinction between font and typeface is that a font designates a specific member of a type family such as roman, boldface, or italic type, while typeface designates a consistent visual appearance or style which can be a "family" or related set of fonts.
Arrangement of type
-typefaces
-point sizes
-line lengths
-line-spacing (leading)
-letter-spacing (tracking)
-adjusting the space between pairs of letters (kerning).
Type of hand script:
(a) Blackletter / Textura
(b) Rotunda
(c) Gutenberg's type
4) Humanist Script to Roman Type (1460- 1472)
5) Venetian Type (1500)
6) The Golden Age of French Printing
7) Dutch Printing (1600)
''Good typography is art ''
For the first week, we began the class with simple introductions about typography and briefings about our upcoming modules with Mr Vinod and Mr Shamsul. Mr Vinod guided us along to show us how to set up our e-portfolio and showed us some examples from our seniors which made it much easier to understand and follow along. He also reminded us to take note of plagiarism and the importance of citation. Then, Mr Vinod showed us some examples of type expression exercises and gave us our first task in this module and Mr Shamsul showed us how to digitise idea sketches by using adobe illustrator.
Week 2
On this week's recorded lecture, Mr Vinod started with a topic that has never crossed my mind before and I find it really true. He mentioned about most information about typography are written from the western world's perspective but they are not many local or even Asian inventions and innovations about typography. Hence, it's important for us as students to do more research and develop and come up with something that reflects on our own unique cultural background and country. ''Give voice to the voiceless'', he said.
On this week's recorded lecture, Mr Vinod started with a topic that has never crossed my mind before and I find it really true. He mentioned about most information about typography are written from the western world's perspective but they are not many local or even Asian inventions and innovations about typography. Hence, it's important for us as students to do more research and develop and come up with something that reflects on our own unique cultural background and country. ''Give voice to the voiceless'', he said.
Typography Development
The Greeks changed the direction of writing. Phoenicians, like other Semitic peoples, wrote from right to left. The Greek developed a style of writing called ‘boustrophedon’ (how the ox ploughs), which meant that the lines of text read alternately from right to left and left to right. As they change the direction of reading they also changed the orientation of the letterforms:
Type of hand script:
1) Roman
- Square Capitals
- Square Capitals
- Rustic Capitals (slightly compressed for pragmatic)
- Lowercase letterform (Cursive)
- Unicals
- Half-Unicals
- Lowercase letterform (Cursive)
- Unicals
- Half-Unicals
2) Charlemagne
3) Blackletter to Gutenberg's type(a) Blackletter / Textura
(b) Rotunda
(c) Gutenberg's type
4) Humanist Script to Roman Type (1460- 1472)
5) Venetian Type (1500)
6) The Golden Age of French Printing
7) Dutch Printing (1600)
8) English Type (18th Century) (1734)
9) Baskerville's Innovations (1761-1818)
10)19th Century Types
11) First Square Serifs
12) Early 20th Century Sans Serif (1923-1959)
9) Baskerville's Innovations (1761-1818)
10)19th Century Types
11) First Square Serifs
12) Early 20th Century Sans Serif (1923-1959)
I find it really interesting about how some fonts were actually formed back in the days because of the materials or tools that were used to write thus creates different effects and style on the words written. Besides, we also learned about the timeline of typography development. The fonts that were cover are:
1450 - Blackletter
1475 - Oldstyle
1500 - Italic
1550 - Script
1750 - Transitional
1775 - Modern
1825 - Square serif
1900 - Sans serif
1990 - Serif/Sans Serif
1500 - Italic
1550 - Script
1750 - Transitional
1775 - Modern
1825 - Square serif
1900 - Sans serif
1990 - Serif/Sans Serif
Week 3
On today's lecture, Mr Vinod talked about Anatomy of Typography
On today's lecture, Mr Vinod talked about Anatomy of Typography
Important lecture notes:
Median - Imaginary line that defines x-height of letterform
x-height - The height in any typeface of the lowercase x
Ascending line - Line slightly higher than the capital line (illusion that they are of the same height with capital letters.)
Stroke - A line that would define a letterform
Apex/ Vertex- Point joining 2 diagonal stemsArm- Short strokes off the stem of letterform
Ascender - Strokes above the medium line
Barb- Half serif finish of the curved stroke
Beak- The half serif finish on horizontal arms
Bowl- Rounded form found in letterform. can be closed or opened for example b,c,d,gBracket - The base of letterform (transition between serif and stem)
Spine - S is the best example for the spineCrossbar - Horizontal stroke that joins 2 stems together. (A,H)
Cross stroke - Stroke found in lowercase t and f.
Cross stroke - Stroke found in lowercase t and f.
Crotch - Interior space within letterforms (K,V)
Descender - Line below baseline
Descender - Line below baseline
Ear - Stroke that extending out from the body (g,r)
Em - Width of M
En - Equal distance to the size of typeface
Finial - curved/ rounded end of a stroke.s
Ligature - The character formed by 2 joined letterforms(fi,fl) Finial - curved/ rounded end of a stroke.s
Stress - Orientation of the letterform
10 most essential typefaces that represent 500 years of type design:
''You can't be a good typographer if you aren't a good reader''. Mr Vinod also explained about how important reading plays a part in giving us a better sense in typography through observations that cannot be taught or explained.
In this week's lecture, we learned about Kerning, Letter Spacing and Tracking.
Important notes:
Kerning - reducing space between lettersLetter spacing - meant for uppercase letters together
Counterform - black spaces between the white letters, the negative space.(grey value)
Indent
Indentation - Text should be justified while using so that it will not have ragging left and right.
Ways to highlight through text:
- Italic fonts
Task 1
Since I'm not quite familiar with using Adobe Illustrator, I've decided to digitise more of my sketches as a practice before deciding which to use as my final idea for each of the words.
Then, I chose the ideas that look the best to me as the outcome of my type of expression exercise.
Final Type Expression jpg
Final Type Expression (PDF)
GIF Animation Progress
Exercise: Text Formatting
I've decided to use Adobe Caslon Pro as my font because I like that it just somehow feels classy and elegant to me.
I like this layout the most so I decided to make some arrangements to increase slightly the size of my name.
Lastly, we are required to write something about ourselves and edit it to a letter format. To make the alignment neater, I've added a few rows and columns for a guide for me.
FEEDBACK
Butterick's Practical Typography 2nd Edition
How (Not) to Kill Your Brain by Nasreen Ma
Tracking - when applying both kerning and letter spacing in one sentence
Normal tracking - letter spacing and kerning
Loose tracking - letter spacing only
Tight tracking - kerning only
Loose tracking - letter spacing only
Tight tracking - kerning only
Besides that, we also learned about alignment terms
Notes for text alignment:
Flush Left - Ragged end at the right (to make the ragging smooth)
Centred - Avoid having line breaks in and out (for equal value and weight to both ends of any line and has ragging)
Flushed right - emphasise on the end of the line (ragged towards to the left)
Justified - imposes symmetry-like centre (no ragging)(more kerning and letter spacing)
Besides, we also learned about the term orphan and widow in typography
''From Repetition Comes Creation Eventually.''
Week 5
Indicating Paragraphs
¶ Pilcrow - indicate paragraph spacing.
Week 5
Indicating Paragraphs
¶ Pilcrow - indicate paragraph spacing.
Line spacing(leading)
- should be the same as paragraph spacing
- leading points should always be 2.5 to 3 larger than the typeface point size, be sure to adjust it depending on the typeface's x-height.
Indent
- where the size of line spacing is equal to the point size of the text
Indentation - Text should be justified while using so that it will not have ragging left and right.
- Italic fonts
- Bold fonts
- Change the type family (remember to keep the x-height consistent within the text)
- Using a different colour
There are different types of headlines, For example:
Head A - Larger than the body text. (have clear breaks indicating a new headline)
Head B - Subordinate to A, they should not stand out as strong as A heads (follow the leading)
Head C - doesn't interrupt reading, followed by a double space or "m space".
Cross alignment
- when the text line is aligned to the next column
- achieve cross alignment between a larger font with a smaller font by doubling the leading of the larger font.
Week 6
Understanding letterforms
Understanding letterforms
Uppercase letterforms can appear to be symmetrical but they are actually not if you observe them closely. You will notice a slight difference made to the strokes or serifs to create optical illusion and make them look visually equal weight.
Univese
Baskerville
- Subtle differences make a huge impact on the readability and outlook of the letters
- Consistency in repeating the uniqueness or character in the letterforms is important
- Don’t add too many characters when designing type so that it won't be too decorative
Maintaining x-height
- Must be slightly above the median and below the baseline to appear similar in size
Counterform
- space between letters that are joined in a word
- space outside the negative space also affects the increase or decrease of readability of the letterforms
Contrast
- Powerful in design
- Could be more than 2 elements depends if it's suitable or not
Typo_6_Screen&Print
Print type
- Important to make sure the flow of text is smooth and pleasant to read
- Common typefaces: Caslon, Garamond, and Baskerville
Screen type
- Designed specifically for screen use are Verdana and Georgia
- More open spacing in screen type (depends on the type of screen and screen resolution.)
Hyperactive link/ Hyperlink
- the one where you can click on it and jump to another page
- the cursor will turn into a hand pointing on the hyperlink for example hashtag#.
Font size for screen
- Books: usually smaller because we tend to read them up close (16 pixels on screen is about the same as 12 pt on magazines or books)
- Good point sizes for screen reading is 20-24 pt.
Static and motion
''Good typography has a good dynamism''
INSTRUCTIONS
Task 1
Type Expression
For this exercise, we were told to choose 4 out of 6 words given to express them using typography. The words that I've chosen are bloom, tired, hug and bang! We required to do a few sketches and get ideas on how we want to express these words and digitise them later using adobe illustrator. I did 6 idea sketches for each of the words chosen on paper after brainstorming.
Idea sketches for word, bloom
Idea sketches for the word, hug
Idea sketches for the word, tired
Idea sketches for the word, Bang!
Bloom digital tryouts
Hug, digital tryouts
Tired, digital tryouts
Bang! word digital tryouts
Outcomes of Type Expression Exercises.
Outcomes after first feedback given.
Outcomes after the second feedback given.
Task 2
We were then required to turn one of the words in our previous type expression into a GIF Animation. For task 2 I have chosen the word 'Tired' to animate.
Text Animation first attempt
Final Text Animation
For our task for this week, we are required to watch the lecture video and try to format text by choosing the font that best represents us by using Adobe InDesign. That was actually my first time using it but I find it quite easy to use by following the video step by step.
Then, I've also created 4 different layouts with my personal information. For my name, I decided to make it bold so that it stands out. Besides, I've also made my website semibold to draw an adequate amount of attention to it as well.
Lastly, we are required to write something about ourselves and edit it to a letter format. To make the alignment neater, I've added a few rows and columns for a guide for me.
Text Formatting PDF Before Feedback
Final Text Formatting Jpeg
Final Text Formatting PDF
Type Formatting Exercise:
Final Text Formatting Exercise jpeg
Final Text Formatting Exercises PDF
Week 1
After looking through my E-portfolio, Mr Vinod said that my blog is quite clear but I will need to screengrab the link of the books I've read for further reading.
After looking through my E-portfolio, Mr Vinod said that my blog is quite clear but I will need to screengrab the link of the books I've read for further reading.
For the first feedback, he mentioned that he like the arrangement of the word ''bloom'' on the top right corner but to reduce the spacing to stick the Os together, he said that the word ''bang!'' was too distorted while the word ''tired '' is good to go. I have made a mistake previously and came up with a new idea for the word ''scary''.
For the second feedback, sir mentioned that the word ''bang!'' was impactful enough to bring out the effect, he suggested outlining the word. He also suggested me to change the font of the word ''scary'' to make it more condensed. Lastly, he also told me to bring down the Os slightly for the word ''bloom''.
For the third feedback, sir said that I was relying on too many graphic elements for the word ''bang'' and ask me to remove shadow for the word ''scary''
Week 2
For the word animation GIF, both Mr Vinod and Shamsul are quite satisfied with my work. Mr Vinod said he like the ''z''s that are coming out of the ''i'' and the drowsy effect of the letter d before falling but they said that I have to make some adjustments for the artboards so that the animation will not be so shaky.
For the word animation GIF, both Mr Vinod and Shamsul are quite satisfied with my work. Mr Vinod said he like the ''z''s that are coming out of the ''i'' and the drowsy effect of the letter d before falling but they said that I have to make some adjustments for the artboards so that the animation will not be so shaky.
Week 5
Mr Vinod looked through my blog and he said that my blog looks pretty complete. For the type formatting exercise, he said that my first exercise is pretty well done but he suggested that the number '24' for my website link would be better if it's lowercased. For the second exercise, he said that the ragging could be improved and the headline for the first article is not cross aligned with the text body.
Mr Vinod looked through my blog and he said that my blog looks pretty complete. For the type formatting exercise, he said that my first exercise is pretty well done but he suggested that the number '24' for my website link would be better if it's lowercased. For the second exercise, he said that the ragging could be improved and the headline for the first article is not cross aligned with the text body.
REFLECTIONS
Type Expression Exercise
When I was doing this exercise given, I struggled quite a lot at the beginning as I was not able to come up with ideas. It made me realise that having the skill is also very crucial in order to turn the text into the way I want from my idea sketches. In class, Mr Vinod mentioned that sometimes simplicity is all you need in typography but however it is not easy to do that which I think is really true. The observation that I've made in this assignment after looking at my classmates' works is everyone actually have pretty similar ideas on conveying the message but we expressed it differently with the arrangements of letters and the font we chose.
GIF Animation Exercise
For this exercise, I actually enjoyed the overall process of making the frames to create the movements by using Photoshop.
Type Formatting Exercise
For type formatting exercise, I find it really challenging for me since I'm not very sensitive at meticulous things such as kerning, ragging, letter spacing etc. I was quite frustrated at first as I took a long time and had a hard time on the ragging part especially.
FURTHER READING
Stop Stealing Sheep & Find out how type works
This book provides a short story of type and how typography is so important in our lives and will never stop existing. I personally really enjoyed reading this book because I like how it explains in such an interesting way by changing the type styles for different pieces of information while explaining why they are suitable for certain mood or emotions, events and even time. This book also explains how different typefaces have their own character and personality so it is important for us to understand and deliver the message with a purpose but not to confuse the readers.
After listening to this talk and doing the simple test on stress level, I realised that most of the people who commented have a relatively high score including myself. She also mentioned that it is very important to have a work-life balance and exercise regularly rather than just keep working and thinking of ideas which I think it's also something that I should work on.
Creating Troubles with Strokes by Muthu Nedumaran
In this talk, Mr Muthu shared the experience that he had while being a typeface designer. He shared that back in those days there were no typefaces in Tamil and when he was able to create it, he finds it really meaningful to see people who uses the language are really excited as they were able to type in Tamil which was really interesting to me. Besides, he also shared that he does think that the cultural background has a certain impact on how the typefaces created should look like.
Comments
Post a Comment