TYPOGRAPHY - TASK 1 : EXERCISES
24/09/2024 - 28/10/2024 / Week 1 - Week 5
Shannen Hiew Kar Yee / 0354055
Typography / Bachelor in Design (Hons) in Creative Media / Taylors University
Task 1 : Exercise 1 & 2
LECTURES
Week 1: Typo_0_Introduction & Typo_1_Development
The first lecture video, Mr. Vinod gave us an explanation and briefing about what is typography. Typography basically is using and designing letters using fonts to make into various of typefaces. Mr. Vinod also mentions about how important typography is for students like us such as students that are studying under the design section. Furthermore, typography is a skill that needs to be gain from time as it is not something where we can master just in a little bit of time. With the lecture of this week i learnt that font and typefaces are not the same thing as well.
Typeface: a collection of design elements used for letters and characters.
Font: describes the differences in a typeface's size and weight.
fig 1.0 the difference between typeface and fonts
Importance of typography:
- serves as a communication tool.
- Attracts the readers
- keeps the interest of the viewers and conveys an exact feeling
- contributes to harmony
- Shows professionalism
fig 1.1 introduction to typography
Week 2: Typo_2_Basic
The second week of lecture is about the basics and importance of letterforms. other than that, Mr. Vinod also talked about the importance of choosing the best typefaces for readability and aesthetic appeal, designers rely on crucial elements such as the baseline, median line, x-height and etc.
Letterforms: In typography, letterforms are basically the shape of the letter.
fig 1.2 example of letterforms
3 important types of letterforms:
- Baseline: the line which the letters seem to rest on.
fig 1.3 example of baseline
- Median Line: the line where most of the lowercase letter should reach for maximum height.
fig 1.4 example of median line
- X-Height: the height of the main body of lowercase letters.
fig 1.5 example of x-height
Week 3: Typo_3_Text_P1
In this week lecture video, we learned about kerning and tracking. For example, kerning is the spaces between each letter meanwhile tracking is the spaces between each word in a sentence. Other than that, text alignments in particularly such as flush left or right, centered and justified as well as texture, leading and line length were also mentioned. In conclusion, we learned how to organize the texts very neatly while maintaining the aesthetic of itself.
- Kerning: space between each letter.
.jpg)
fig 1.6 example of kerning
- Tracking: adjustment of words all together in one sentence.
fig 1.7 example of tracking
- Text Alignment: basically, its text justification.
FOUR TYPES OF ALLIGNMENT:
1. center
2. flush right
3. flush left
4. justified
fig 1.8 example of text alignments
- Texture: elements that are combined with typography to make a remarkable effect. For example, type size, shape and colors.
.jpg)
fig 1.9 example of texture
- Leading and Line Length:
1. Type size: text should be large enough to be easily read at arm's length.
2. Leading: text that is set tightly to encourage vertical eye movement.
3. Line length: basically, longer lines need more leading, whereas shorter lines need less.
Week 4: Typo_4_Text_P2
This week lecture, Mr. Vinod mentions about indicating paragraphs, widows and orphans, text highlighting and headline within text.
- Indicating paragraphs:
1. Pilcrow (¶): used to identify a paragraph.
2. Leading: space between two baselines.
fig 2.0 example of leading
- Widows and Orphans:
1. Widows: a single text that is dangling beginning or end of the whole sentence.
2. Orphans: a single word or short line that starts at a new column.
fig 2.1 example of widows and orphans
- Text Highlighting:
TYPES OF HIGHLIGHT
1. bold
2. italics
3. different background color of text
fig 2.2 example of bold and italic highlights
- Headline within text: the most visually dominant text.
1. A: clear breaks between topics.
fig 2.4 example of A headline
2. B: supporting arguments or example.
fig 2.5 example of B headline
3. C: highlights specific elements from headline B.
fig 2.6 example of C headline
Week 5: Typo_5_Understanding
1. Letters
Some letters may be classified or seen as symmetrical but some of it are not symmetrical at all. This is for the reason of making it look more harmonious.
fig 2.7 example of letter A in Univers typeface
fig 2.8 example of letter a in Helvetica and Univers typeface
2. Letters / Maintaining X-Height
In order for all the letters to look the same size, some lowercase letter such as letter S must be rise above median.
fig 2.9 example of letter risen
3. Contrast
contrast is known as the most powerful dynamic in design. other than that, simple contrasts produce variety of variations: small + organic/large + machined; small + dark/ large + light.
fig 3.0 example of letter contrast
INSTRUCTIONS
fig 3.1 MIB PDF
<iframe height="480" src=" https://drive.google.com/file/d/1N6dPoLTiV42F-5PusBU_zM0030seqfiu/preview?" width="640"></iframe>
EXERCISES
Task 1 : Exercises 1 - Type Expression
In task 1, we were each given four words and instructed to design a type expression for each word using one of the ten provided typefaces. We had sufficient of time to sketch over all of those ideas and present them to Ms. Vitiyaa for her feedback.
Week 1
This week, we carried out a vote among all students to figure out which four words we were going to use to express ourselves in task 1. Upon the selection of the four words, we were given some time to sketch down ideas and rough draft the concept. Furthermore, we were given instructions to use the ten provided typefaces only in this task.
The four words chosen was:
* FANCY
* BLOOM
* SMOKE
* SPICY
fig. 3.2 chosen words for task 1
Idea sketches and brainstorming:
fig. 3.3 mood board
fig. 3.4 ideas
Week 2
This week, we presented all of our sketches to Ms. Vitiyaa and got her feedback. She commented on each of our sketches, suggesting ways we could sharpen our skill sets so we could proceed to using Adobe Illustrator to illustrate it.
IDEA SKETCHES
 |
fig. 3.5 idea sketches for spicy and fancy |
fig. 3.6 idea sketches for bloom and smoke
Week 3
This week's assignment required us to complete our digitalization, give them one last polish before class ends, and present them to Ms. Vitiyaa for feedback.
 |
| fig. 3.7 digitalization for the four words |
Week 4
This week class we were required to show Ms.Vitiyaa the word that we choose to animate. I choose to animate the word bloom from my digitalization.
fig. 3.8 animation for bloom
After showing Ms.Vitiyaa my animation of the word bloom, unfortunately we were not allowed to
add anything extra element such as flowers, chili and etc. So, with Ms.Vitiyaa advice I made some changes to my digitalization as well as I choose spicy as the word that I will animate.
fig. 3.9 digitalization for the four words
fig. 4.0 some ideas that I made before deciding the final ones
fig 4.1 final spicy animation
Week 5
Task 1 : Exercises 2 - Text Formatting
Exercise 2 is all about learning how to use kerning, tracking and formatting the texts. We were required to watch all the videos provided by Mr. Vinod and follow through the guide in the video.
Video 1/4
The first video provided is more about learning how to kern the text. We were required to type our names with the 10 types of fonts that was provided. From this video, I learnt how to avoid awkward spaces in between some letters by using the kerning method.
fig 4.2 without kerning
fig 4.3 with kerning
Video 2/4
The second video provided teaches us how to choose the right font, leading title as well as spacing of the texts to make it more soothing to the eyes of the reader. In this specific task Mr. Vinod suggested us to keep point size in between 8 to 12 while the leading title should be 2-to-3-point size larger than the rest of the text.
fig 4.4, 2/4 text formatting
Video 3/4
In this third video, Mr. Vinod guides us on how to add images on it, align all the texts as well as how to smoothen out end of each sentence so it doesn't look messy. He also mentioned on ways to keep all the texts look tidy and organized so the readers do not get confused when reading it such as making sure when we use kerning method on each sentence it doesn't look that different from others.
fig 4.5, 3/4 Text Formatting
Video 4/4
This was the second last video. In this video Mr. Vinod taught us how to make adjustments on the layout, alignments as well as how to achieve cross alignment with the baseline grid. This video taught me the importance of well-structured text layout can attract attention of many eyes. We were also required to arrange 6 composition and choose the best one for the final.
.jpg)
fig 4.7, sketches from Ms. Vitiyaa on how to improve the formatting
FINAL ARTWORK
fig 4.9, final artwork without grid
fig 5.0, final artwork with grid
HEADLINE
Font: Univers LT Std 75 Black Oblique
Type Size/s: 41 pt
Leading: 56 pt
Paragraph spacing: 0
BODY
Font: Univers LT Std 45 Light
Type size/s: 10 pt
Leading: 5 pt
Paragraph spacing: 6mm
Character per line: **
Alignment: Left alignment
Margins: 15mm (Right, Left, Top), 50mm (Bottom)
Columns: 4 columns
Gutter: 4.233 mm
FEEDBACK
Week 1
Throughout the first week of class, we were able to understand the rules that were presented to us and received an explanation from Ms.Vitiyaa on how to do each task and exercise. By executing a pole and everyone voted for each word, we were able to select the four words that we needed for the first task.
Week 2
GENERAL FEEDBACK:
Ms. Vittiyaa provided us with feedback in this session regarding the sketches of the four words that we were given in week 1. Furthermore, we were required to post our proposal sketches on the designated Facebook page.
SPECIFIC FEEDBACK:
I received feedback regarding my idea sketches from Ms. Vitiyaa. Miss advised me to simplify it rather than making it overly complicated with the drawings around the words.
Week 3
GENERAL FEEDBACK:
In this week class, we were required to finish up our illustrator work in the class for the 4 words before class ended. In addition, we were also asked to post our works on the Facebook page.
SPECIFIC FEEDBACK:
I received a green light to proceed from my idea sketches to digitalize it in illustrator.
Week 4
GENERAL FEEDBACK:
This week class was all about feedback on our digitalization of the four words as well as our animation that we did for one of the words we choose from Miss Vitiyaa.
SPECIFIC FEEDBACK:
After analyzing my animation and digitization, Ms. Vitiyaa shared some helpful feedback. The guidance that was given was to make it simpler and to try to stick to the font itself rather than adding a lot of extra illustrations or distortions.
Week 5
GENERAL FEEDBACK:
I had already completed the assigned work for this week's class since Mr. Vinod had given us all the videos we needed to work in teams. So, Ms. Vitiyaa had requested all of us to print out our six types of Helvetica composition on a A4 paper. With that, Ms. Vitiyaa walks around to each table giving everyone feedback on their work, pointing us in the right direction, and making sure we have the right version of the work before turning it in.
SPECIFIC FEEDBACK:
When Ms. Vitiyaa reviewed my work, she pointed out the areas where I was making mistakes. She advised me to switch up my fonts because the one I was using had slightly messed up my work. Furthermore, Ms. Vitiyaa advised me to use the golden ratio while organizing the composition and to adjust the spacing between my paragraphs. Everything was good except for that.
REFLECTION
Experience
Speaking of experiences, I would say that these five weeks of class were both incredibly enjoyable and challenging. This is because, during my foundation years, I wasn't exposed to Adobe software too deeply. I felt like I had learned many things about using Adobe software, including Photoshop, Illustrator, and Indesign, following this first task. To be frank, since we had to complete our work and update our ePortfolio every week, I must admit that when we initially started working on our assignments, I was a little confused. Because I had never used blogspot before, it was also really complicated. I've always created my ePortfolio using the Wix website. But gladly, Mr. Vinod gave us plenty of videos to help us step-by-step. For example, he showed us how to use Illustrator, Photoshop, and Indesign, as well as how to use Blogspot for our e-portfolio. I eventually got the hang of it by working and updating my ePortfolio on a weekly basis. I honestly felt that this module had taught me a lot, and I am glad to say that I am eager to learn more.
Observation
In my observation, typography is very different from all of the classes I've taken. This is mentioned because we receive weekly updates in this class, such as feedback from our lecturer, whereas in other classes we sort of get feedback or update when we are done with the task ourselves. On the positive side, nevertheless, receiving feedback at a specific time each week is a great thing because it helps us all stay on task and avoid missing anything.
Findings
During the entire five weeks of this subject, I began to understand the importance of typography in day-to-day living. In general, I would say that typography is the source of everything we see, including the company logos we see and the signboards that are placed beside the road. Without typography, I believe that everything around us would be bland fonts that failed to express anything. The way that particular fonts can express the meaning of a word also fascinates and intrigues me. In conclusion, I've started paying close attention to the fonts used to express the words everywhere I go.
FURTHER READING
1. Thinking with Type by Ellen Lupton
fig 5.1 book 1
This is the first reading I've decided to choose because I heard a lot of good things from my seniors from the same course. Ellen Lupton offers precise instructions on how to align, space, arrange, and shape words, letters, and paragraphs. From typefaces and type families to kerning and tracking to using a grid, the book covers every aspect of typography.
2. 365 Typo by John D. Berry
fig 5.2 book 2
This second book is 365 Typo. This book represents a new level of self-awareness in the typographic community and offers a thorough overview of current events in typography, graphic design, and type design. With stories about significant events, themes, and information covered by 100 top international writers.
Comments
Post a Comment