TYPOGRAPHY - TASK 1: EXERCISES
TYPOGRAPHY - TASK 1: EXERCISES
26/9/2025 - 31/10/2025 (Week 1 - Week 6)
Nur Adila binti Nazary / 0377352
Typography / Bachelor in Design (Honours) in Creative Media / Taylor's University
Task 1
TABLE OF CONTENTS
1) Lectures
2) Instructions
3) Process work
4) Feedback
5) Reflection
6) Further reading
LECTURES
Week 1:
Typo_0_Introduction
What is Typography?
- It is art and the practice of creating letters and typefaces.
- It also involves in type families, animation and design applications.
- It is very important as it does influences how a design is perceived.
EXAMPLES IN REAL LIFE:
 |
| Figure 1. Typography in website design |
 |
| Figure 2. Typography in book cover page design |
 |
| Figure 3. Typography in logo design |
Why is Typography so important?
- Good typography makes language clear, readable, and visually appealing.
- Learning something new, and improving through mistakes and lecturer feedback which can benefit us in our lives.
Three evolutions of Letterforms:
1) Calligraphy - handwriting style
2) Lettering - letters drawn out (customs shapes and design)
3) Typography - structured type design
Terminologies to look out:
Font (the style of it) - a specific style/weight (thick or thin) within a typeface (examples: Georgia Regular, Georgia Bold)
Typeface (the main name of the font) - the overall design family of fonts that share a style (example: Georgia)
Typo_1_Development
Context
- Perspective in the video is based on the Western history of typography
- Video is about the history of typography in the Western world
Side note IMPORTANT: research non-Western traditions like Asian typography for broader understanding
HISTORY
Early letterform development:
- Originated from Phoenician -- Greek -- Roman scripts
- Greeks made boustrophedon (changing the reading direction) which influenced letter orientation.
Roman contributions:
1) Square Capitals - used in monuments.
2) Rustic Capitals (compressed square capitals) - quicker to write but harder to read.
3) Lowercase happened naturally from writing uppercase quickly.
Charlemagne's contributions:
- Standardized writing by using uppercase, lowercase system, capitalization and punctuation.
- Improved accuracy and clarity when conveying messages.
Gutenberg's contributions:
- Made a mechanism that is like printing which make knowledge more accessible.
Typefaces growth:
- More typefaces were developed over time.
- Classifications systems were added to organized them by date and style.
WHAT I'VE LEARNED IN 0-1:
The importance of typography is very much emphasized on the lectures but its understandable on why it is so. I've learned the terminologies in typography which is very important in this subject as the teacher uses the words a lot. Other than that, I have also learned the history of typography which was very interesting on how it was developed.
Week 2:
Typo_2_Basics
Basics/Describing letterforms (keywords and meanings)
TERMS TO KNOW:
Baseline: The imaginary line the visual base of
the letterforms.
Median line: The imaginary line defining the x-height of letterforms.
X-height: The height in any typeface of the lowercase ‘x’. (in between baseline
and median line)
.png) |
| Figure 4. The basics of lines letterforms diagram |
Stroke: Any line that defines the basic
letterform.
.png) |
| Figure 5. Stroke letterforms diagram |
Apex / Vertex: The point created by joining two
diagonal stems (apex above and vertex below) (midline like-thing)
.png) |
| Figure 6. Apex and vertex letterforms diagram |
Arm: Short strokes off the stem of the
letterform (extra like claw shape)
.png) |
| Figure 7. Arm letterforms diagram |
Ascender: The part where the stem of a lowercase letterform that projects above the median line.
.png) |
| Figure 8. Ascender letterforms diagram |
EXTRAS TO-KNOW
Barb: The half-serif finish on some curved stroke.
Beak: The half-serif finish on some horizontal arms.
Bowl: The rounded part of the letter, closed or open.
Cross bar: The horizonal strokes connects two stems together like ‘A’.
Cross stroke: The horizontal stroke that joins two stems together like ’f’.
Small capitals: Uppercase letter form which is sized to the x-height. (similar size to lowercase)
Uppercase numerals: Numbers the same height and width as uppercase letters.
Lowercase numerals: Numbers aligned with the x-height, similar in height to lowercase letters.
Italics: Letterforms: based on handwriting.
Oblique: Slanted (version/copy) letterform that are not based on handwriting.
TIPS FOR GOOD TYPOGRAPHY:
- Always work with a complete font and really understand on how to use it.
- Choose a type family that has a wide range of typefaces for flexibility.
- Each typeface has its own design qualities that can effectively convey different messages and emotions.
Typo_3_Text_Part 1
Text/Tracking: Kerning and Letterspacing (Textual Formatting)
TERMS TO KNOW:
Kerning: the automatic adjustment of space between the letters
Letterspacing: add space between the letters (they have their individual space)
Tracking: addition and removal of the space in a word or a sentence
TIPS FOR GOOD TYPOGRAPHY:
- Do not kern on large amount of text, very tedious to do so.
- Do not do letterspacing on large amount of text, hard to read
- Do not letterspace with lowercase letters
- Change the typeface if you see the type first and not the words
-The most important thing is the reading, if the design is too much and hard to read, change the typeface.
- Do not do script in all capital letters
- Do a type specimen book (trying out many different combinations like leading any sizes, on screen or printed)
TEXT FORMATING OPTIONS:
Flush left: Each sentence starts at the same point which is on the left but ends wherever the last word on the line ends. It is consistent (paragraph to the left side with a ragged right)
Ragged right: At the right side of Flush left which has a bit of a curve, important to make it smooth
.png) |
| Figure 9. Kerning diagram |
.png) |
| Figure 10. Tracking diagram |
- Do not kern on large amount of text, very tedious to do so.
- Do not do letterspacing on large amount of text, hard to read
- Do not letterspace with lowercase letters
- Change the typeface if you see the type first and not the words
-The most important thing is the reading, if the design is too much and hard to read, change the typeface.
- Do not do script in all capital letters
- Do a type specimen book (trying out many different combinations like leading any sizes, on screen or printed)
TEXT FORMATING OPTIONS:
Flush left: Each sentence starts at the same point which is on the left but ends wherever the last word on the line ends. It is consistent (paragraph to the left side with a ragged right)
Ragged right: At the right side of Flush left which has a bit of a curve, important to make it smooth
Centered: The format of making everything symmetry. The weight of both ends, are equal value (with a ragged right and left)
Centered text might have to avoid since the starting point starts at a different point (use it sparingly)
Flush right: Each sentence starts at the same point which is on the right but ends wherever the last word on the line ends. It is consistent (paragraph to the right side with a ragged left)
Ragged left: At the left side of Flush right which has a bit of a curve, important to make it smooth
Useful in situations for captions, for images.
Justified/Justification: Format of a symmetrical shape, by expanding or reducing spaces between the words. Both sides start and end at the same point. Be careful on big spaces in between the words which is called ‘rivers’. Must avoid possible.
Text/Leading and Line Length
Main mission is to allow easy, prolonged reading and a type should occupy the page as much a photograph does.
How to do so? It is based on these 3 things
1) Type size: The size of
a type should be large enough to read at arm’s length.
2) Leading: The vertical space between lines of a
text, from the bottom sentence baseline to the top sentence baseline, make sure
have a good space so the reader still have their pace.
3) Line length: Make sure that the line length is not extremely long or short
since it impairs reading. A good rule of thumb is to keep line length between 55-65
characters.
.png) |
| Figure. 11 The full basic info for typography diagram |
WHAT I'VE LEARNED IN 2-3:
I learned that typography has many specific terms and that each one of them has its own purpose. Even the tiniest little adjustment can make a big difference on reading. Choosing the right typeface and sizes is only the starting point for a good typography. Above all, readability always come first in any typography design.
Week 3:
Typo_4_ Text_Part 2 (Continuation from Typo_3)
Text Alignment
When using Flush Left or Flush Right, always make sure that the ragged edge is smooth
When using Justified text, make sure that there are no rivers ( large spaces running through the paragraph)
Text / Indicating Paragraphs
Paragraphs can be known with a 'pilcrow'
TIPS FOR GOOD TYPOGRAPHY:
- When line spacing is 12pt, paragraph spacing should be also 12pt. Why? To maintain cross-alignment, to make sure that text lines align evenly across columns.
- Indentation should only be used when the text is justified
- When adjusting kerning or letterspacing, make sure it is adjusted only 3 times above or below the standard spacing
- Tracking should be ideally set to 5
- Having a clear hierarchy of information is very important for readability and organization
EXAMPLE:
If the font size is 10pt, the ideal leading should be 8, 8.5, 9 (around 2-3 points less than the font size)
Difference between Line Space and Leading
Leading: the space between two lines of text
Line space: the distance from the descender of one line to the other descender of the next.
Text / Widows and Orphans
Widow: A short line left alone at the end of a paragraph or column.
Orphan: A short line appearing at the beginning of a new column or page
How to fix? use a forced line break to adjust the text layout.
Text / Highlighting Text
Ways to highlight text:
- Use italics or bold
- Change the typeface or colour
- Create a highlight box behind the text
WHAT I'VE LEARNED IN 4:
From this lecture, I learned how to properly do text formatting, spacing and hierarchy to improve readability and layout.
Week 4:
Typo_5_ Understanding
Letters
Uppercase letterforms are not symmetrical, each backet connecting the serif to the stem has its own unique arc.
 |
| Figure 12. Comparison of two different typeface |
Maintaining the x-height:
Even when typefaces appear similar, in close examination, there are subtle differences in proportion and detail.
Curved strokes like "s" must rise slightly above the median line or sink below the baseline to appear visually balanced with adjacent vertical and horizontal strokes.
 |
| Figure 13. Example on "s" maintaining the height |
Letters / From / Counterform
Counterform: the negative space within and surrounding a letterform, includes both enclosed spaces and the areas between letters.
 |
| Figure 14. Counterforms example #1 |
 |
| Figure 15. Counterforms example #2 |
Counterforms are very important because they make words easier to read.
Variation designing letterforms
 |
| Figure 16. Styles for typography |
Typo_6_Screen&Print
Typography / Different Medium
Print Type vs Screen Type
Type for Print:
- Type was designed long before modern printing
- It is the designer's responsibility to ensure that printed text is smooth, consistent, and easy to read.
Type for Screen
- It is the designer's responsibility to ensure that printed text is smooth, consistent, and easy to read.
Type for Screen
- Typefaces created for digital use are optimized for readability and performance on screens
- Adjustments are often made to improve clarity on different display types and resolutions.
Hyperlink
- A hyperlink is a clickable word that connects to another document or a different section within the same document
- By default, hyperlinks are usually blue and underlined.
Font Size for Screen
- A 16-pixel font size on screen roughly equals the size of printed text in a book or magazine, taking reading distance into account.
Static vs Motion Typography
Static typography: Expresses words with minimal movement. It relies on traditional design elements and offers limited expressive potential.
Motion typography: Brings letterform to life through animation, allowing type to become fluid , kinetic and more dramatic in its expression.
WHAT I'VE LEARNED IN 5-6:
From these two lecture, I learned how typography changes depends on the medium that we are using. Both text for print and text for screens have different needs to make reading easier. It is really up to the designers way to make it easier for people to read. Typography also have its own ways to make it more alive and expressive like motion typography using animation which really helps bringing the life to words.
INSTRUCTION
MY IDEAS:
Since it was a fast paced action i wanted the opacity to be faded. Tug is one of the synonym so make it stretched gradually. Maybe use like a rope like style to make the meaning much better.
2) Scratch
Meaning: mark a surface with a sharp object
Synonym: Score, scrape and roughen
MY IDEAS:
When I think of scratch, I think of claw marks, and very like sketchy and messy movement. Maybe do the faded effect. Add claw marks at the end. Make it scratchy-like.
3) Kick
Meaning: Strike something with your foot
Synonym: Boot, knock and drive
MY IDEAS:
Its a fast movement action so make it faded overtime. Maybe make the letters seem far away. Use the letter K as your "foot" to kick the i. Arrange the words a straight angle towards the side as to show kicking.
4) Step
Meaning: Moving one leg to the the front, or moving one foot to another level.
Synonym: Walk, pace, and stair
MY IDEAS:
Make the letters as steps. Maybe add a certain angle to make it seem 3D-like. Arrange the E into step form.
5) Float
Meaning: Rest on the surface of a liquid, or hover or moving lightly in the air
Synonym: Hover, levitate and hang
MY IDEAS:
Make it like its floating on the water. Use the letter O as a floatie device. Arrange the letters so that the center of the word would start floating.
6) Drip
Meaning: shed small drops of liquid
Synonym: drop, trinkle and leak
MY IDEAS:
Make use of the dot in the alphabet of i to make some sort of dribble or drop. Make the letter i rain, use the italic style to show raining drips of water effect.
IDEATION
The sketches were developed based on my research and observation. Other than that, inspiration was gathered from Pinterest, which helped in exploring different ideas to represent the chosen word.
1) Pull
INSPIRATIONS:
COMMENTS FROM MR MAX:
Pull sketches was rejected. Try to sketch more on the other words since pull was too simple.
2) Scratch
INSPIRATIONS:
MY SKETCHES:
From the word "Scratch", the design was made to appear rough and textured to show the act of scratching. Inspired by the motion of a cat's claws, a slight curve was added at the beginning by using commas "," as claws and stretched across the letters to emphasize the action. Similarly with the word "Pull", the words fades out to convey the action of quick, tugging motion like a cat's scratch.
COMMENTS FROM MR MAX:
The third row sketch of scratch with the claw marks is taken to the final work.
COMMENTS FROM MR MAX:
The first row on the left is taken for the final.
4) Step
INSPIRATIONS:
MY SKETCHES:
For the word "Step", the idea was inspire by the shape, form and repetition of stairs. The concept arranging the words into stair-like shapes to make the word more recognizable, and the letter "E" was designed to resemble a staircase.
COMMENTS FROM MR MAX:
Step was rejected, the sketches were too simple. Ideate more on the other words.
5) Float
INSPIRATIONS:
MY SKETCHES:
For the word "Float", the main inspiration came from the idea of levitation. The letters were arrange to show as if they were hovering or drifting above the ground. The letter "O" was used to represent bubbles or a floatie, supporting the other letters to "float". Another design was explored by turning the "t" into an airplane, emphasizing the concept of flight.
COMMENTS FROM MR MAX:
The second sketch of float on the top right side is taken for the final work.
6) Drip
INSPIRATIONS:
MY SKETCHES:
The main inspiration for the word "Drip" came from the idea of rain. The dot of the letter "i" was designed to resemble a water droplet, while the others are stretched to create the effect of liquid dripping. The design also explored through the element of raindrops, but kept it minimal as advised by the lecturer.
COMMENTS FROM MR MAX:
The second row on the left is taken for the final work.
TASK 1: EXERCISE 1: TYPE EXPRESSION ANIMATION (GIF)
The word "Drip" itself brings the idea of dropping and moving downward, which fits naturally with animation. In the design, the letter "i" is divided into three parts, resembling dripping water. The animation begins with the original, uncut version of the word "Drip", which gradually drops down and transitions into the final designed version, emphasizing the dripping effect. As the animation continues, the word "Drip" drops over the page before slowly returning and transitioning back to it normal, uncut word.
This GIF was made in Procreate to show the idea.
TASK 1 EXERCISE 2, TEXT FORMATTING 2, LAYOUT 3, JPEG (WITHOUT BASELINE):
TASK 1 EXERCISE 2, TEXT FORMATTING 2, LAYOUT 3, JPEG (WITH BASELINE):
.jpg)
FEEDBACK
- Adjustments are often made to improve clarity on different display types and resolutions.
Hyperlink
- A hyperlink is a clickable word that connects to another document or a different section within the same document
- By default, hyperlinks are usually blue and underlined.
Font Size for Screen
- A 16-pixel font size on screen roughly equals the size of printed text in a book or magazine, taking reading distance into account.
Static vs Motion Typography
Static typography: Expresses words with minimal movement. It relies on traditional design elements and offers limited expressive potential.
Motion typography: Brings letterform to life through animation, allowing type to become fluid , kinetic and more dramatic in its expression.
WHAT I'VE LEARNED IN 5-6:
From these two lecture, I learned how typography changes depends on the medium that we are using. Both text for print and text for screens have different needs to make reading easier. It is really up to the designers way to make it easier for people to read. Typography also have its own ways to make it more alive and expressive like motion typography using animation which really helps bringing the life to words.
INSTRUCTION
PROCESS WORK
TASK 1 EXERCISE 1: TYPE EXPRESSION
RESEARCH
We have 6 words to choose from which are:
1) Pull
2) Scratch
3) Kick
4) Step
5) Float
6) Drip
We have to choose 4 but what I did was, I chose did all 6 words so that when I sketch, I can see which one has the best sketch idea.
From these I try to search an synonym and the meaning of it so i can get more ideas of what to do for me sketches.
1) Pull
Meaning: It is a fast paced action to cause movement
Synonym: Tug, jerk, yank and drag
RESEARCH
We have 6 words to choose from which are:
1) Pull
2) Scratch
3) Kick
4) Step
5) Float
6) Drip
We have to choose 4 but what I did was, I chose did all 6 words so that when I sketch, I can see which one has the best sketch idea.
From these I try to search an synonym and the meaning of it so i can get more ideas of what to do for me sketches.
1) Pull
Meaning: It is a fast paced action to cause movement
Synonym: Tug, jerk, yank and drag
 |
| Figure 12. Pulling movement |
MY IDEAS:
Since it was a fast paced action i wanted the opacity to be faded. Tug is one of the synonym so make it stretched gradually. Maybe use like a rope like style to make the meaning much better.
2) Scratch
Meaning: mark a surface with a sharp object
Synonym: Score, scrape and roughen
 |
| Figure 13. Scratch action |
MY IDEAS:
When I think of scratch, I think of claw marks, and very like sketchy and messy movement. Maybe do the faded effect. Add claw marks at the end. Make it scratchy-like.
3) Kick
Meaning: Strike something with your foot
Synonym: Boot, knock and drive
 |
| Figure 14. Kicking action |
MY IDEAS:
Its a fast movement action so make it faded overtime. Maybe make the letters seem far away. Use the letter K as your "foot" to kick the i. Arrange the words a straight angle towards the side as to show kicking.
4) Step
Meaning: Moving one leg to the the front, or moving one foot to another level.
Synonym: Walk, pace, and stair
 |
| Figure 15. Walking up the stairs |
MY IDEAS:
Make the letters as steps. Maybe add a certain angle to make it seem 3D-like. Arrange the E into step form.
5) Float
Meaning: Rest on the surface of a liquid, or hover or moving lightly in the air
Synonym: Hover, levitate and hang
 |
| Figure 16. Floating items |
MY IDEAS:
Make it like its floating on the water. Use the letter O as a floatie device. Arrange the letters so that the center of the word would start floating.
6) Drip
Meaning: shed small drops of liquid
Synonym: drop, trinkle and leak
 |
| Figure 17. Action of dripping |
MY IDEAS:
Make use of the dot in the alphabet of i to make some sort of dribble or drop. Make the letter i rain, use the italic style to show raining drips of water effect.
IDEATION
The sketches were developed based on my research and observation. Other than that, inspiration was gathered from Pinterest, which helped in exploring different ideas to represent the chosen word.
1) Pull
INSPIRATIONS:
 |
| Figure 18. Pull inspiration pt 1 |
 |
| Figure 19. Pull inspiration pt 2 |
 |
| Figure 20. Pull inspiration pt 3 |
MY SKETCHES:
The sketches focus on emphasizing the action of pulling by stretching the letters to visually show movement and tension. The concept was also explored by imagining the word as if it were made of rope or clay being tugged. Towards the end of the word, the fading visual is shown to show a quick and forceful motion.
The sketches focus on emphasizing the action of pulling by stretching the letters to visually show movement and tension. The concept was also explored by imagining the word as if it were made of rope or clay being tugged. Towards the end of the word, the fading visual is shown to show a quick and forceful motion.
COMMENTS FROM MR MAX:
Pull sketches was rejected. Try to sketch more on the other words since pull was too simple.
2) Scratch
INSPIRATIONS:
 |
| Figure 23. Scratch inspiration pt 1 |
 | |
|
 | |
|
From the word "Scratch", the design was made to appear rough and textured to show the act of scratching. Inspired by the motion of a cat's claws, a slight curve was added at the beginning by using commas "," as claws and stretched across the letters to emphasize the action. Similarly with the word "Pull", the words fades out to convey the action of quick, tugging motion like a cat's scratch.
 |
| Figure 26. Scratch sketch |
The third row sketch of scratch with the claw marks is taken to the final work.
3) Kick
INSPIRATIONS:
MY SKETCHES:
For the word "Kick", the design explores the motion and impact of the action kicking through a few visual approaches. One way uses the lower stroke of the letter "K" as a foot, by "kicking" the letter "i" away to show movement. Another way is to scale the letters from small to large to show the trajectory and force of action. To add on, the word "Kick" was shaped to resemble a boot, that really shows the concept.
INSPIRATIONS:
 |
| Figure 27. Kick inspiration pt 1 |
 |
| Figure 28. Kick inspiration pt 2 |
 |
| Figure 29. Kick inspiration pt 3 |
For the word "Kick", the design explores the motion and impact of the action kicking through a few visual approaches. One way uses the lower stroke of the letter "K" as a foot, by "kicking" the letter "i" away to show movement. Another way is to scale the letters from small to large to show the trajectory and force of action. To add on, the word "Kick" was shaped to resemble a boot, that really shows the concept.
 |
| Figure 30. Kick sketch |
The first row on the left is taken for the final.
4) Step
INSPIRATIONS:
 |
| Figure 31. Step inspiration pt 1 |
 |
| Figure 32. Step inspiration pt 2 |
 |
| Figure 33. Step inspiration pt 3 |
MY SKETCHES:
For the word "Step", the idea was inspire by the shape, form and repetition of stairs. The concept arranging the words into stair-like shapes to make the word more recognizable, and the letter "E" was designed to resemble a staircase.
 |
| Figure 34. Step sketch |
Step was rejected, the sketches were too simple. Ideate more on the other words.
5) Float
INSPIRATIONS:
 |
| Figure 35. Float inspiration pt 1 |
 |
| Figure 36. Float inspiration pt 2 |
 |
| Figure 37. Float inspiration pt 3 |
For the word "Float", the main inspiration came from the idea of levitation. The letters were arrange to show as if they were hovering or drifting above the ground. The letter "O" was used to represent bubbles or a floatie, supporting the other letters to "float". Another design was explored by turning the "t" into an airplane, emphasizing the concept of flight.
 |
| Figure 38. Float sketch pt 1 |
 |
| Figure 39. Float sketch pt 2 |
COMMENTS FROM MR MAX:
The second sketch of float on the top right side is taken for the final work.
6) Drip
INSPIRATIONS:
 |
| Figure 40. Drip inspiration pt 1 |
 |
| Figure 41. Drip inspiration pt 2 |
 |
| Figure 42. Drip inspiration pt 3 |
MY SKETCHES:
The main inspiration for the word "Drip" came from the idea of rain. The dot of the letter "i" was designed to resemble a water droplet, while the others are stretched to create the effect of liquid dripping. The design also explored through the element of raindrops, but kept it minimal as advised by the lecturer.
 |
| Figure 43. Drip sketch |
COMMENTS FROM MR MAX:
The second row on the left is taken for the final work.
TASK 1: EXERCISE 1: TYPE EXPRESSION ANIMATION (GIF)
Chosen word to animate is DRIP
RESEARCH:
For my final animation, the word "Drip" was chosen as it was the most suitable for motion.
RESEARCH:
For my final animation, the word "Drip" was chosen as it was the most suitable for motion.
.png) |
| Figure 44. Final word Drip |
 |
| Figure 45. Main inspiration for GIF |
The word "Drip" itself brings the idea of dropping and moving downward, which fits naturally with animation. In the design, the letter "i" is divided into three parts, resembling dripping water. The animation begins with the original, uncut version of the word "Drip", which gradually drops down and transitions into the final designed version, emphasizing the dripping effect. As the animation continues, the word "Drip" drops over the page before slowly returning and transitioning back to it normal, uncut word.
IDEATION:
The lecturer, approved the idea and advised to proceed with the animation using Adobe Illustrator and Photoshop. This was the first time working with these programs for animation, which made the process quite challenging. The frames were created in Illustrator, while the editing and GIF preview were done in Photoshop. It required several rounds of trial and error, especially when adjusting frame sequences and timing.
.png) |
| Figure 46. Process on animating |
.png) |
| Figure 47. Timeline and frames |
A total of 75 frames were used to make the animation as smooth as possible. The frame timing was set to 0.01 seconds and towards the end, adjusted to 0 seconds to enhance the smooth, dripping motion. The slightly slower pace was intentional, to show the natural movement of dripping water that the animation aimed to capture.
TASK 1 EXERCISE 2: TEXT FORMATTING 1
For this exercise, the task was to practice text formatting, including the use of kerning, leading, paragraph spacing and other typographic adjustments. Only the ten fonts provided by the lecturer were to be used when creating the layout designs.
RESEARCH:
The lecturer explain each terms for us to do the text formatting, these are some of the examples.
TASK 1 EXERCISE 1, TYPE EXPRESSION 1, JPEG:
TASK 1 EXERCISE 1, TYPE EXPRESSION 1, PDF:
TASK 1 EXERCISE 1, TYPE EXPRESSION 2, ANIMATION GIF "DRIP":
TASK 1 EXERCISE 2, TEXT FORMATTING 1, JPEG:
TASK 1 EXERCISE 2, TEXT FORMATTING 1, PDF:
TASK 1 EXERCISE 2: TEXT FORMATTING 1
For this exercise, the task was to practice text formatting, including the use of kerning, leading, paragraph spacing and other typographic adjustments. Only the ten fonts provided by the lecturer were to be used when creating the layout designs.
RESEARCH:
The lecturer explain each terms for us to do the text formatting, these are some of the examples.
.png) |
| Figure 48. No kerning example |
.png) |
| Figure 49. With Kerning example |
Kerning: the automatic adjustment of space between the letters
.png) |
| Figure 50. No Leading example |
.png) |
| Figure 51. With Leading example |
Leading: The vertical space between lines of a text, from the bottom sentence baseline to the top sentence baseline
IDEATION:
For each of the ten fonts provided by the lecturer, kerning was applied to ensure that the spacing between letters was even. Leading was also used to all words so that they were properly aligned from side to side.
For each of the ten fonts provided by the lecturer, kerning was applied to ensure that the spacing between letters was even. Leading was also used to all words so that they were properly aligned from side to side.
.png) |
| Figure 52. Outcome for Text Formatting 1 |
TASK 1 EXERCISE 2: TEXT FORMATTING 2, LAYOUTS
We were required to create a minimum of 8 layouts using the same 10 fonts provided by the lecturer. Each layout used typographic adjustments such as kerning, letterspacing and leading to explore different design arrangements. A total of 10 layouts were produced to provide more variety and options to choose from.
Layout #1
 |
| Figure 53. Layout #1 |
HEAD
- Font/s: Futura Std Heavy Oblique and Gill Sans Std Light
- Type Size/s: Futura Std Heavy Oblique (48 pt) and Gill Sans Std Light (30 pt)
- Leading: 13.75 pt
- Paragraph spacing: 4.939 mm
BODY
- Font/s: Gill Sans Std Italic
- Type Size/s: 12 pt
- Leading: 9 pt
- Paragraph spacing: 4.939 mm
- Characters per-line: 53-58
- Alignment: Align left
Page Margins
- 12.7 mm + 12.7 mm + 12.7 mm + 12.7 mm
- Columns: 4
- Gutter: 4.233 mm
Layout #2
Layout #8
FINAL OUTCOMELayout #2
 |
| Figure 54. Layout #2 |
HEAD
- Font/s: Gill Sans Std Bold Italic and Adobe Caslon Pro Bold
- Type Size/s: Gill Sans Std Bold Italic (16 pt) and Adobe Caslon Pro Bold (16 pt)
- Leading: 12.5 pt
- Paragraph spacing: 4.939 mm
BODY
- Font/s: Serifa Std 65 Bold and Serifa Std 55 Roman
- Type Size/s: Serifa Std 65 Bold (11 pt) and Serifa Std 55 Roman (10 pt)
- Leading: 9 pt (for the intro) 11 pt (for the other paragraph)
- Paragraph spacing: 5.027 mm (on the left) 25 mm (in the middle) 4.674 mm (on the right)
- Characters per-line: (27-37)
- Alignment: Align left
Page Margins
- 12.7 mm + 12.7 mm + 12.7 mm + 12.7 mm
- Columns: 3
- Gutter:7mm
Layout #3 (CHOSEN)
Layout #3 (CHOSEN)
 |
| Figure 55. Layout #3 |
HEAD
- Font/s: Univers LT Std 75 Black and Gill Sans Std
- Type Size/s: Univers LT Std 75 Black (49 pt) and Gill Sans Std (25 pt)
- Leading: Univers LT Std 75 Black (40 pt) and Gill Sans Std (25 pt)
- Paragraph spacing: 4.939 mm
BODY
- Font/s: Futura Std Book
- Type Size/s: 11 pt
- Leading: 9 pt
- Paragraph spacing: 4.939 mm
- Characters per-line: (53 - 57)
- Alignment: Align left (all on the left side and the top right side) Align right (on the right side bottom)
Page Margins
- 12.7 mm + 10 mm + 10 mm + 40 mm
- Columns: 2
- Gutter: 4.233 mm
Layout #4
Layout #4
 |
| Figure 55. Layout #4 |
HEAD
- Font/s: Futura Std Bold and Futura Std Medium Condensed
- Type Size/s: Futura Std Bold (75 pt) and Futura Std Medium Condensed (24 pt)
- Leading: 20 pt
- Paragraph spacing: 4.939 mm
BODY
- Font/s: Serifa Std 55 Roman
- Type Size/s: 8 pt
- Leading: 6 pt
- Paragraph spacing: 47 mm (on the left and middle) 55 mm (on the right side)
- Characters per-line: (37 - 44)
- Alignment: Align left
Page Margins
- 12.7 mm + 12.7 mm + 12.7 mm + 135 mm
- Columns: 3
- Gutter: 4.233 mm
Layout #5
Layout #5
 |
| Figure 56. Layout # 5 |
HEAD
- Font/s: Univers LT Std 53 Extended and Univers LT Std 65 Bold
- Type Size/s: Univers LT Std 53 Extended (12 pt) and Univers LT Std 65 Bold (37.829 pt)
- Leading: 43.345 pt
- Paragraph spacing:15.569 mm
BODY
- Font/s: Univers LT Std 45 Light
- Type Size/s: 11 pt
- Leading: 11 pt
- Paragraph spacing: 3.881 mm
- Characters per-line: (41 - 55)
- Alignment: Align left
Page Margins
- 12.7 mm + 12.7 mm + 12.7 mm + 12.7 mm
- Columns: 2
- Gutter: 12.7 mm
Layout #6
- Gutter: 12.7 mm
Layout #6
 |
| Figure 57. Layout #6 |
HEAD
- Font/s: Gill Sans MT Bold and Gill Sans Std Bold Italic
- Type Size/s: Gill Sans MT Bold (81 pt)and Gill Sans Std Bold Italic (23 pt)
- Leading: 20 pt
- Paragraph spacing: 4.939 mm
BODY
- Font/s: Gill Sans Std Regular
- Type Size/s: 12 pt
- Leading: 10 pt
- Paragraph spacing: 10 mm
- Characters per-line: (34 - 50)
- Alignment: Align left
Page Margins
- 30 mm + 30 mm + 12.7 mm + 30 mm
- Columns: 2
- Gutter: 4.233 mm
Layout #7
- Gutter: 4.233 mm
Layout #7
 |
| Figure 58. Layout #7 |
HEAD
- Font/s: Janson Text LT Std 75 Bold
- Type Size/s: 18 pt and 14.3 pt
- Leading: 13.75 pt
- Paragraph spacing: 4.939 mm
BODY
- Font/s: Janson Text Lt Std and Janson (other paragraph) and Text LT Std 76 Bold Italic (caption for image)
- Type Size/s: 12 pt
- Leading: 10 pt
- Paragraph spacing: 5.292 mm
- Characters per-line: (45 - 51)
- Alignment: Align left
Page Margins
- 30 mm + 12.7 mm + 12.7 mm + 12.7 mm
- Columns: 2
- Gutter: 4.233 mm
- Gutter: 4.233 mm
Layout #8
 |
| Figure 59. Layout #8 |
HEAD
- Font/s: Futura Std Bold and Futura Std Medium
- Type Size/s: Futura Std Bold (16 pt) and Futura Std Medium (15 pt)
- Leading: 14 pt
- Paragraph spacing: 4.939 mm
BODY
- Font/s: Futura Std Heavy (for intro) and Futura Std Light (other paragraph)
- Type Size/s: Futura Std Heavy 11 pt (for intro) and Futura Std Light 10 pt (other paragraph)
- Leading: Futura Std Heavy 10 pt (for intro) and Futura Std Light 9 pt (other paragraph)
- Paragraph spacing: Futura Std Heavy 3.528 mm (for intro) and Futura Std Light 3.175 mm (other paragraph)
- Characters per-line: (42 - 50)
- Alignment: Align left
Page Margins
- 25 mm + 20 mm + 20 mm + 40 mm
- Columns: 3
- Gutter: 4.233 mm
Layout #9
- Gutter: 4.233 mm
Layout #9
 |
| Figure 60. Layout #9 |
HEAD
- Font/s: Futura Std Heavy and Futura Std Light Oblique
- Type Size/s: Futura Std Heavy (36 pt) and Futura Std Light Oblique (22 pt)
- Leading: 13.75 pt
- Paragraph spacing: 4.939 mm
BODY
- Font/s: Janson Text LT Std 55 Roman
- Type Size/s: 11 pt
- Leading: 9 pt
- Paragraph spacing: 3.175 mm
- Characters per-line: (38 - 54)
- Alignment: Align left
Page Margins
- 105 mm + 35 mm + 12.7 mm + 12.7 mm
- Columns: 2
- Gutter: 4.233 mm
Layout #10
- Gutter: 4.233 mm
Layout #10
 |
| Figure 61. Layout #10 |
HEAD
- Font/s: Univers LT Std 49 Light Ultra Condensed and Univers LT Std 59 Ultra Condensed
- Type Size/s: Univers LT Std 49 Light Ultra Condensed (60 pt) and Univers LT Std 59 Ultra Condensed (18 pt)
- Leading: 19.75 pt
- Paragraph spacing: 4.939 mm
BODY
- Font/s: Univers LT Std 67 Bold Condensed (caption for image) and Univers LT Std 55 Roman (other paragraph)
- Type Size/s: 12 pt
- Leading: Univers LT Std 67 Bold Condensed 14.4 pt (caption for image) and Univers LT Std 55 Roman 10 pt (other paragraph)
- Paragraph spacing: 3.528 mm
- Characters per-line: (65 - 72)
- Alignment: Align left
Page Margins
- 80 mm +12.7 mm + 12.7 mm + 12.7 mm
- Columns: 4
- Gutter: 6 mm
- Gutter: 6 mm
TASK 1 EXERCISE 1, TYPE EXPRESSION 1, JPEG:
TASK 1 EXERCISE 1, TYPE EXPRESSION 1, PDF:
TASK 1 EXERCISE 1, TYPE EXPRESSION 2, ANIMATION GIF "DRIP":
TASK 1 EXERCISE 2, TEXT FORMATTING 1, JPEG:
TASK 1 EXERCISE 2, TEXT FORMATTING 1, PDF:
TASK 1 EXERCISE 2, TEXT FORMATTING 2, LAYOUT 3, JPEG (WITHOUT BASELINE):
TASK 1 EXERCISE 2, TEXT FORMATTING 2, LAYOUT 3, JPEG (WITH BASELINE):
.jpg)
TASK 1 EXERCISE 2, TEXT FORMATTING 2, LAYOUT 3, PDF (WITH BASELINE AND WITHOUT):
FEEDBACK
Week 1
General feedback: Set up e-portfolio and watch 0 and 1 lectures. Make sure to download the 10 typefaces at Teams. Update all of the lecture notes. Choose 4 words from the 6 words given. Start with 3 sketches for each of the 4 words chosen. Make sure to have 12 sketches in the end and update with Mr. Max.
General feedback: Set up e-portfolio and watch 0 and 1 lectures. Make sure to download the 10 typefaces at Teams. Update all of the lecture notes. Choose 4 words from the 6 words given. Start with 3 sketches for each of the 4 words chosen. Make sure to have 12 sketches in the end and update with Mr. Max.
Week 2
General feedback: Basic introduction to Adobe Illustrator was given. The teacher showed us what each icon does and how to navigate through the app.
Specific feedback: Fix on the word float until it is approved. Start on digitizing the sketches into adobe illustrator and show to teacher in WhatsApp.
Week 3
General feedback: Update on the blog (put reasons why we design the fonts like that and how) and add PDF and JPEG versions for the task 1. A tutorial has given on how to use the app Photoshop and how to animate frame by frame.
Specific feedback: The chosen word is DRIP so do animation on the word DRIP and send to teacher for improvements.
Week 4
General feedback: An introduction of InDesign has been given. One on one tutorial on how to do exercise 1 has also been given.
Specific feedback: Animation for the word DRIP is accepted. Put the GIF into the blog. Start watching the exercise lectures that has been given
Week 4
General feedback: An introduction of InDesign has been given. One on one tutorial on how to do exercise 1 has also been given.
Specific feedback: Animation for the word DRIP is accepted. Put the GIF into the blog. Start watching the exercise lectures that has been given
Week 5
General feedback: Finish all task 1 and finish the blog then check back with Mr. Max for approval.
Specific feedback: All designs are good and creative, only need to change layout 3 title spacing. Other layouts are all approved. E-portfolio is clean, compact and strong.
REFLECTIONS
Experience
This was my first time seriously exploring Typography. I used to think Typography was just about typing words, but I've learned that it's so much more than that. It follows specific rules and design principles to make the text visually effective and easy to read. Working with new software like Adobe Illustrator, Photoshop and InDesign was challenging at first, but with guidance from my lecturer and help from my friends, I managed to complete the tasks on time. I also relied on Google and Youtube for tutorials to solve technical issues while learning how to edit in Illustrator.
One of the biggest challenges was getting used to Illustrator's many tools and icons, but I'm grateful that our lecturer took the time to teach us step by step. The most complicated assignment was the animation task, where we had to use both Illustrator and Photoshop. Since the frames had to be edited in Illustrator and preview in Photoshop, there was a lot of back and forth to make the animation smooth. Thankfully, online tutorials helped me understand the process better.
Observations
Through these tasks and exercises, I realized how small adjustments in Typography such as kerning and leading can make a huge difference in readability and overall design. I noticed how structure, balance and spacing work together to create flow and clarity in the text.
Findings
Experience
This was my first time seriously exploring Typography. I used to think Typography was just about typing words, but I've learned that it's so much more than that. It follows specific rules and design principles to make the text visually effective and easy to read. Working with new software like Adobe Illustrator, Photoshop and InDesign was challenging at first, but with guidance from my lecturer and help from my friends, I managed to complete the tasks on time. I also relied on Google and Youtube for tutorials to solve technical issues while learning how to edit in Illustrator.
One of the biggest challenges was getting used to Illustrator's many tools and icons, but I'm grateful that our lecturer took the time to teach us step by step. The most complicated assignment was the animation task, where we had to use both Illustrator and Photoshop. Since the frames had to be edited in Illustrator and preview in Photoshop, there was a lot of back and forth to make the animation smooth. Thankfully, online tutorials helped me understand the process better.
Observations
Through these tasks and exercises, I realized how small adjustments in Typography such as kerning and leading can make a huge difference in readability and overall design. I noticed how structure, balance and spacing work together to create flow and clarity in the text.
Findings
I learned that typography isn't just about the fonts, it is about the attention to detail and precision. Every letter, space and line matters. I've also learned to be more careful when adjusting the text, since tiny changes can affect how people read and perceive text. The lectures were very helpful too, especially since the lecturer explained each terms clearly and showed visual examples to help us understand better.
FURTHER READINGS
Extra reading:
MyFonts.com
Based on my reading in MyFonts.com, the website tells us a lot about the history on fonts in its early evolution of roman letters.
Back in the day, Roman capital letters were carved onto stone monuments for a formal and meant to last to convey important messages.
As years went by stone carving was used less and less and then 3 major handwriting styles emerged for everyday use.
1) Square Capitals: Stone engravings but written more quickly.
MyFonts.com
Based on my reading in MyFonts.com, the website tells us a lot about the history on fonts in its early evolution of roman letters.
Back in the day, Roman capital letters were carved onto stone monuments for a formal and meant to last to convey important messages.
As years went by stone carving was used less and less and then 3 major handwriting styles emerged for everyday use.
1) Square Capitals: Stone engravings but written more quickly.
 |
| Figure 63. Square Capitals example |
2) Rustic Capitals: Narrower and simpler than square capitals. In this style it saves space and time when making documents.
3) Roman Cursive: A quicker way of writing "running hand", designed for speed and is used for business and quicker writing.
Later on, the Roman cursive introduced ascenders and descenders (parts of letters that is above or below the baseline) which then influenced lowercase letterforms.
My comments:
It fascinating to see how letters have evolved over the years and how the way we write either fast or slow can really influence their shapes. I never realised that something simple as handwriting speed could lead to a huge change on how letters are formed. It also made me appreciate how now the modern typography still carries the early writing styles a bit.
 |
| Figure 64. Rustic Capitals example |
 |
| Figure 65. Roman Cursive example |
My comments:
It fascinating to see how letters have evolved over the years and how the way we write either fast or slow can really influence their shapes. I never realised that something simple as handwriting speed could lead to a huge change on how letters are formed. It also made me appreciate how now the modern typography still carries the early writing styles a bit.
Comments
Post a Comment