Labels

Typography - Task 1: Exercises

September 22nd 2025 - October 20th 2025 / Week 01 - 05

Ayah Zaher Abdullah Al Harmally / ID No.0381658

Typography / Bachelors of Design in Creative Media / Taylor's University

 

LECTURES

Week 1:

Introduction to the module

• Subject outline & expectations
• Learning & Assignment objectives
• Students responsibilities
• Assignments & assessment methods

Lecture 1: Typo_0_Eportfolio Briefing

Lecture 2: Typo_0_Introduction

Lecture 3: Typo_1_Development

 

Week 2:

The evolution of typography

• Overview (West) type usage & prod.

• Distinctions between the terms “Font”, “Typeface”, and “Type Family”.

• The great pioneers.

Lecture 4: Typo_3_Text_Part1

Feedback: Apply context to sketches. Tend to the composition and size of the text. 

 

Week 3:

Type structure, family and anatomy

• Letterform and structure

• Typeface, typestyle, family type

Feedback: Digitalize the sketches that have been approved onto Adobe Illustrator and animate it.

 

 

 INSTRUCTIONS

 

 

 

Week 1:  We're introduced to the module by watching Youtube videos that Mr. Vinod had specifically made to guide us through the module. Our given task is to create an e-portfolio and 4 sketches based on 6 words by next week’s class.

 

Lecture 1: Typo_0_Eportfolio Briefing

  • Tutorial on creating an e-portfolio using Google Blogger.
  • Instructions on embedding the MIB (Module Information Block) into the e-portfolio.

 

Lecture 2: Typo_0_Introduction

  • Typography is essential for clear, visually appealing information design.
  • Typography includes choice of typeface, size, spacing, and layout, beyond just selecting fonts.
  • Important for various media: websites, apps, logos, ads, books, posters.
  • Mr. Vinod covered typography’s role in communication and skill development (attention to detail, composition).
  • Explained history of typography and the difference between font (specific style/size) and typeface (broader family).
  • Digital tools have made typography accessible but sometimes reduced quality.
  • Proficient use of typography enhances clarity and impact of messages.

Lecture 3: Typo_1_Development


Early Letterform

  • The Phoenician alphabet, developed around 1200 BCE, was one of the first phonetic writing systems with symbols representing sounds rather than words.
  • It had 22 letters, written right to left, and influenced later alphabets such as Greek, Hebrew, and Arabic.
  • Greeks adapted the Phoenician alphabet around 800 BCE, adding vowels and standardizing letters into capital forms.
  • Romans later adopted the Greek alphabet, reformulated some letters, and used only capital letters initially, influenced by writing tools like the reed pen.
  • Writing tools like sharp sticks on clay and chisels on stone shaped early capital letters, mostly using straight lines and curves.
  • Typography evolved over 500 years with innovations from Greeks and the invention of Gutenberg’s printing press spreading written knowledge.
  • Mr. Vinod encouraged his students to also explore local designers' contributions beyond Western influences in typography.​

​

 


figure 1.1
The Phoenician Alphabet Evolution 


 Hand-scripts

     


Square Capitals (figure 1.2): 
  • Found in Roman monuments.
  • Serifs added to the finish of main strokes.
  • Stroke width achieved by reed pen held at around a 60 degree angle. 

Rustic Capital (figure 1.3): 
  • Compressed version of square capitals.
  • Allowed for twice as many words.
  • Brush or pen held at around an angle of 30 degrees.
  • Faster and easier to write, hard to read due to them being compressed. 

Roman Cursive (figure 1.4):
  • Written in cursive hand and simplified for speed. 
Uncials (figure 1.5):
  • Incorporated aspects of Roman cursive hand. (Especially in the shapes of A, D, E, H, M, U and Q
  • "Unica" is Latin for a twelfth of anything. Scholars think uncials refer to one inch high letters. 
  • More readable in small sizes.
  • Doesn't have a lower and uppercase. 
Half-Uncials (figure 1.6):
  • The beginning of lowercase letterforms
  • Formalization of cursive. 
Caloline Minuscule (figure 1.7):
  • Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. 
  • Monks rewrote the texts using both majuscules (uppercase), miniscule, capitalization and punctuation.
  • Texts have various ways of  writing, could get lost in translation. 
Blackletter (Textura) (figure 1.8): 
  • It became popular in Northern Europe after the breakup of Charlemagne's empire.
  • The Rotunda style (More rounded form), is mostly used in Southern regions. 



Text Types

Figure 1.9
Text Types 


Week 2:


Lecture 4: Typo_3_Text_Part 1


Tracking: Kerning and Letterspacing 



Figure 2.0
Kerning



Kerning: The automatic adjustment of spaces between letters.

Letterspacing: Adding space between the letters. People use letterspacing in uppercase letters as a breathing room.

Tracking: Addition and/or removal of space in a word or sentence.


Indesign:


Columns: How much to add in a grid system.

Margins: Space around the text where it's placed.

To increase size: Command + Shift + '>' Key

To decrease size: Command + Shift + '<' Key (Pressing the 'Option' key makes it faster)

To turn off margins and columns: Command + ';'
To reduce space: Option + Left arrow

To add space: Option + Right arrow

How much space can be added / subtracted: Edit preferences > Change the setting in 'Kerning/Tracking'



 Figure 2.1
Normal Tracking, Loose tracking and tight tracking.



Designers typically add spacing to uppercase letters, but avoid adding extra spacing to lowercase letters in running text because it harms legibility and word shape recognition.



 Figure 2.2
Letter Space Breaking Counter Forms


Formatting Text 

 


 Figure 2.3
Formatting Text Types

   Flush left:

  • Format mirrors the asymmetrical experience of handwriting.

  • Each line starts at the same point, ends wherever the last word on the line ends.

  • Spaces between words are consistent throughout the text, allowing the type to create an even gray value.

Centered:

  • Symmetrical layout.

  • Shapes fields of text into visual forms.

  • Ragged edges on both sides.

  • Harder to read, as lines start at slightly different points.

Flush Right:

  • Exact opposite of flush left.

  • Commonly used in captions to create specific alignments.

Justified Alignment:

  • Produces a symmetrical text block by expanding or contracting spaces between words or letters.
    Can create "rivers" of white space (long vertical gaps).
  • Hyphens are added to break words and minimize these gaps.


 Figure 2.4
The Anatomy of a Typeface




Leading & Line Length
Setting text involves balancing readability with effective page occupancy, much like composing a photograph.

Type Size
  • Large enough for easy reading at arm's length.
Leading
  • Controls vertical eye movement.
  • Proper spacing prevents loss of focus.
Line Length
  • Shorter lines reduce reading effort.
  • Ideal length: approximately 55-65 characters.
  • Extremely long or short lines disorient the reader.


 Figure 2.4
Type Specimen Sheet




Lecture 5: Typo_4_Text_Part_2

Indicating paragraphs



 Figure 3.0

Type of Paragraph Indicators

 

Pilcrow

  • A glyph (¶) traditionally used to mark paragraph breaks.

  • Less common in modern digital design.


Paragraph Spacing Guidelines

  • If line space is set to a specific length, maintain consistent paragraph space.

  • Ensures smooth cross-spacing between adjacent text blocks.


Indentations

  • Used in newspapers to save space due to high printing costs.

  • Best suited for justified layouts.

 Line Space vs Leading



Figure 3.1
Line Space vs Leading

Leading: Space between two lines of text (measured from baseline to baseline).

Line Space: Distance from the baseline of one line to the descender of the line below.



 Widows and Orphans



Figure 3.2
Widows and Orphans


Widow

  • A short line left alone at the end of a column or page.

Orphan

  • A short line left alone at the start of a new column or page.

Forced line break (InDesign): Shift + Enter.

  • Rebreak line endings across the paragraph to prevent short final lines.




Highlighting Text



Figure 3.3
Ways of Highlighting Text


Headlines


Figure 3.4
Headline Types

A Head: Marks a break between major topics in a section.

B Head: Subordinate to the A Head (secondary level).

C Head:
  • Highlights material within B Head content.
  • Less commonly used.
 
 Week 5

Typography & Text Formatting Basics

Margin Space

  • Space surrounding the page content.

  • Equal margins don't always create an appealing document.

Text Size Guidelines

  • Optimal range: 8-12 points.

Paragraph Spacing

  • Base on point size and character count to determine proper leading.

InDesign Practical Tips

Placing Images

  • File → Place → Select and add image.

Linking Paragraphs Across Columns

  • Click the + sign (when remaining text is out of view).

  • Click target column to flow text.

Checking Kerning/Tracking

  • Open Character Formatting Controls.

  • Highlight text and view Tracking value. 

 


Ex.1

This task requires selecting four words and visually expressing their meanings through typography in Adobe Illustrator, using exactly the 10 provided fonts in black and white. One word must be animated in Photoshop to amplify its concept. Mr. Vinod had reviewed our work and gave us multiple examples of digitalized sketches. He explained thoroughly what it is to be expected for the upcoming week.

We've decided on these six words:

1. Burn
2. Glitch
3. Noisy
4. Bleed
5. Squish
6. Shake



Sketches:
I've chosen the 4 words: Bleed, Squish, Noisy and Glitch.



Figure 4.0
4 Type Expression Sketches/Concepts Draft



Figure 4.1
Refined Type Expression Sketches/Concepts


I then had to pick one version of each word. 



Figure 4.2
4 Final Type Expression Sketches/Concepts


Animation:

Had to initially switch up the frames.


Figure 4.3
Glitch Animation Draft


Input into Photoshop.




Figure 4.5
Final Glitch Animation 

 


Final Outcome:



Figure 4.6
Type Expressions [JPEG]



Figure 4.7
Type Expressions [PDF]



Figure 4.8
Final Glitch Animation  

 


Ex 2:

I learned kerning and tracking from Mr. Vinod's lectures and his YouTube tutorial, then practiced these techniques in InDesign by applying them to my own name across the 10 given fonts.

Figure 5.0
Kerning Practice w/ 10 Fonts

Familiarizing myself with InDesign whilst following Mr. Vinod's lectures 


Figure 5.1
Using InDesign

I was able to come up with 3 different layouts.


Figure 5.2
3 Formatting Drafts 

I eventually decided to end up with the layout shown below. The amount of text, negative space, the image sizing and positioning works really well.

Figure 5.3
Final Formatting Design 

 


HEAD
 - Font/s: Bembo Std/Bold/Semibold Italic
 - Type Size/s: 36 pt/20 pt
 - Leading: 38.5 pt/22.5 pt
 - Paragraph spacing: 2.5 pt 

 

BODY
 - Font/s: Bembo Std/Regular
 - Type Size/s: 9 pt
 - Leading: 11.5 pt
 - Paragraph spacing: 2.5 pt
 - Characters per-line: 65
 - Alignment: Left 

 

Page Margins

- Margin Top: 12.7 mm

- Margin Bottom: 50 mm

- Margin Inside + Outside: 12.7 mm
 - Columns: 4
 - Gutter: 5 mm


Figure 5.4
Final Formatting Design Without Grid Lines [JPEG]




Figure 5.5
Final Formatting Design Without Grid Lines [PDF]



Figure 5.6
Final Formatting Design With Grid Lines [JPEG]


Figure 5.7
Final Formatting Design With Grid Lines [PDF]

Feedbacks


Week 5:

General Feedback: The body text should not be in bold nor italic. Elements such as leading and spacing between letters should be used properly to form a good outcome. If one was to justify text alignment then rivers should be avoided.

Week 4:

General Feedback: Mr Vinod has stated that we should regularly update our e-portfolio to avoid rushing and compiling all our works together at the last minute. He has also stated that we shouldn't overdo our animations. The main focus is the font.

Week 3:

General Feedback: Make your own choices when coming up with final works. Don't wait for Mr. vinod to pick and choose. 

Specific Feedback: I did what was said in the general feedback. I came in assuming I had to have multiple drafts and ideas laid out. My different variations of "Noisy" and "Glitch" were good, I just had to pick one. "Bleed" and "Squish" on the other hand, I was advised to decrease the distortion, pick one and then get back to him.

Week 2: 

General feedback: Mr. Vinod had reviewed our work and gave us multiple examples of digitalised sketches. He explained thoroughly what it is to be expected for the upcoming week. 

Specific feedback: Mr. Vinod took a liking to my different variations of the word "Glitch." I was advised to add more emphasis on both "Noisy" and "Shake" as they lacked it. Was also advised to focus on composition when it comes to "Noisy" and "Squish" as positioning is something to be mindful of.

 

 




Labels:

Comments

Post a Comment