Typography Task 1 | Exercises

Week 01 (30/3/21) - Week 05 (27/04/2021)
Shamiella Baziella Binti Mohamad - 0333104
Bachelor of Mass Communication (Hons) (Digital Media Production)

---

LECTURES

Week 01: Introduction/Briefing
30/03/2021

During our first class, Mr. Vinod and Mr. Sam introduced themselves and explained briefly the module. Mr Vinod then walks us through the Typography Facebook group as we will be utilizing the platform for this module. At the same time, step-by-step instructions were given taught on how to use Blog along with creating our E-portfolio. The E-portfolio comes in handy where we have to update constantly throughout the semesters, where we will be compiling all of our design-related assignments, submissions as well as keeping track of our progression. 

Blog Shortcuts:

• Enter: paragraph space
• Shift + Enter: line break
• Change coding hr to br: horizontal rule

• Google Drive>Files> Embed Item: insert pdf 

• Picture/Image/Sketch: Figure 1.0, Description (Date)

After setting up E-portfolio, we then proceeded on our first task, type expressions. We were asked to download the 10 typefaces fonts that will be used for our modules. As for our first task, we were told to ideate and sketch the words that we have listed down on the Facebook polls. On the other hand, as for our pre-recorded lecture- Mr. Vinod introduced on what is typography, typography's history as well as the differences between font and typeface. The 2 main typography terms are font and typeface. Mr. Vinod clearly explained how those terms are very different and are similar as to how I thought it was. 

• Font: an individual font or weight within the typeface

• Typeface: refers to an entire family that has related characteristics and styles. 

Week 02: Feedback discussions/ E-portfolio progression/ Lecture
06/04/2021

Second of week class started with Mr. Vinod and Mr sam checking our progression on our E-portfolio. We then were allocated to different breakout rooms in order to give feedback on our classmates sketches. Mr. Vinod and Mr sam taught us briefly how to digitize the words on AI for our next progression check. As for our pre-recorded lecture, we were taught about the development of typography and how typography was developed over time, the key concept covered are as below:

• Early letterform development (Phoenician to Roman) 

Figure 1.1: Evolution from Phoenician letter

Figure 1.2: Boustrophedon- Greek Writing style from right to left and left to right

• Development of the hand script from 3rd-10th century 

(compressed version of square capitals, rustic capitals, Roman cursive, Uncials, Half-Uncials, Charlemagne)

Figure 1.3: Example of the rustic capitals 

• Blackletter to Gutenberg's type

Figure 1.4: The Gutenberg bible 

Week 03: Digitising Feedback Discussion + Animation, Lecture

13/04/2021 

In this week's class, as usual we were allocated in different breakout rooms to gives feedbacks on our classmate digitising draft. Then, we were taught on how to animate the words, step-by-step instructions were given on the animation process through Adobe Illustrator and Adobe Photoshop. As for our practical session, we were asked to animate our words within the time given. 

As for this week's lecture, the lecture was about basic typography mainly on describing and identifying letterforms of a specific typefaces. Below are some key-point for the basic typography:

Figure 1.5: Basics of letterforms 

• Baseline: imaginary line the visual base of the letterforms

• Median: imaginary line defining the x-height of letterforms

• X-height: height in any typeface of the lowercase "X"

• Stroke: any lines define the basic letterforms

• Apex (above) / Vertex (below): point by joining two diagonal stems

• Arm: shot strokes of the stem either horizontal or inclined upward

• Ascender: the stem of a lowercase hat projects above the median

• Barb: half-serif finish on curved strokes

• Beak: half-serif finish on horizontal arms

• Bowl: rounded form describes a counter; may be open or closed

• Bracket: the base of the letterform on the baseline; transition between serif and the stem

• Cross bar: connects two stems stroke; horizontal stroke that joins two stems together 

• Cross stroke: horizontal stroke joins two stems together (lowercase letterforms)

• Crotch: interior space where two strokes meet

• Descender: anything below the baseline

• Ear: stroke extending out from the body of the letterform

• Em: the width of an uppercase "M" (gap between words)

• En: half of the size of an em 

• Finial: non-serif terminal of the stroke

• Ligature: combination of join fonts/ two or more letterforms

• Link: stroke connects the bowl and the loop of a lowercase "g"

• Stress: orientation of letterform, indicated by thin stroke in round forms

• Swash: flourish extends the stroke of the letterforms *often found in wedding fonts* 

(^^ NEVER USE SWASH IN CAPITAL LETTERS ^^)

• Terminal: self-contained finish of a stroke without a serif

Type family (full font): a family that has many different typefaces

• Bold, Regular, Semi-Bold, Extended and etc

Type family elements: contains more than 26 letters, to numerals and a few punctuation marks

• Uppercase, Lowercase, Small Capitals, Uppercase Numerals, Lowercase Numerals, Italic, Punctuation/Misc Characters and Ornaments

Typefaces:

• Roman, Italic, Oblique, Boldface, Light, Condensed, Extended 

Figure 1.6: Examples of Typefaces 

Week 04:E-Portfolio Progression Check & Lecture

20/04/2021

As for this week lecture, we learned about text mainly on kerning and letter spacing.

Part 1: Kerning and Letter Spacing

• Kerning: automatic adjustment of space between letters.

• Letter spacing/tracking: add space between the letters, addition and removal space in a sentence.

Figure 1.7: Examples of Kerning and Without Kerning

Figure 1.8: Differences between Tracking and Kerning

Figure 1.9: Types of Tracking (Normal, Loose and Tight tracking)

Formatting Text:

•  Flush left-ragged right (asymmetrical format handwriting)

•  Centered- ragged right and left (symmetry format) 

•  Flush right-ragged left (format emphasis on the end of line as opposed to its starts, eg: captions)

•  Justified- (symmetrical shape on the text)

Figure 2.0: Examples of Formatting Text

• Texture- x-height resides between baseline and median

• Type size-readability and comprehension of the text, text type should be large enough to be read easily at arm length

• Leading- space between baselines

• Line Length- a good rule of thumb is to keep line length between 55-65 characters

Figure 2.1: Examples of x-height and leading

Type Specimen Book

• samples of typefaces in various different sizes, a type specimen book on screen is to provide an accurate reference for type, type size, leading, type line length and etc

Figure 2.2: Example of Type Specimen Book

Part 2: Text
(Indicating Paragraphs)

Pilcrow (¶): indicate a new paragraphs 

10 pt size, leading 12, paragraph spacing 12 >maintain cross alignment 

Figure 2.3: Example of Line Space vs Leading

Widow: short line of type left alone at the end of a column of text

Orphan: short line of type left alone at the start of new column

Figure 2.4: Example of Widow & Orphan

(Highlighting Text)

• Italics, Bold, Bold and different typefaces, Colours (black, cyan, magenta, yellow)

• Create a box, Quotation Marks; bullets, create a clear indent. (prime is not a quote)

(Headline within Text)

• A Head: indicates a clear break between the topics within a section

• B Head: indicate a new supporting argument or example for the topic

• C-Head: highlights specific facets of material within B text

Figure 2.5: Examples of A Head, B Head and C Head

Cross Alignment: cross aligning headlines and captions with text type reinforces the architectural sense of the page (the structure) < Lecture Video: Typo 4 Pt 2 43 min (clear explanation on cross alignment)

Week 5: Text Formatting Progression Check + Lecture

(27/04/2021)

This week's lecture was all about understanding letterforms. 

• Uppercase letterforms in fact os not symmetrical (difference of stroke weight and with)

Fogure 2.6: Two different stroke weights of the Baskerville stroke form 

Figure 2.7: Difference of the width between left & right stroke

• Maintaining x-height

x- height; size of  the lowercase letterforms. 

- curved strokes, such as 's' must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Figure 2.8: Examples of the curved strokes

Figure 2.9: Example of the median & baseline

• Counterform

The spaces contains by the strokes of the letterform and the space between when two letters are joined to form words. 

Figure 3.0: Examples of the counterforms of words and letters 

In order to understand the form and the counter of letter, it is better to analyse and examine them in close detail as it provides on how balanced it is- between the from and counter. 

Figure 3.1: Example o f the letterforms details in letter-making

• Contrast

The most powerful dynamic in design- based on a format devised by Rudi Ruegg. 

Figure 3.2: Examples of letters/contrast 

---

INSTRUCTIONS

TASKS

Task 1:Type Expression 

For this exercise, we did listed a few words that we suggested on the Facebook polls. The words that were chosen are; slice, punch, wave, eat, point, scream and etc. We were told to choose 4 word and express them accordingly. I decided to choose eat, slice, scream, scream and point. Below are few of my sketches that I did roughly on a paper. 

Week 1: Sketch

Figure 1.1:Idea sketches (02/04/2021)

Week 2: Digitalisation

Below are the four digitised words that I did illustrate through AI

Figure 1.2: First attempt on digitising (07/04/2021)

As I did received few feedbacks on my first digitising, I did some amendment on the 'EAT' word, as Mr Vinod did mentioned that only minor graphics elements are allowed, my classmates suggested that I should redesign and change the design. Hence, I did showed my classmates a few designs and this is what we decided on. Mr Vinod and Mr Sam did commented on my 'SLICE' word as the I looks like 'T', therefore, I did changed and below are the final results of my digitising. 

Figure 1.3: Final digitising after feedbacks (13/04/2021)

 

Figure 1.4:Final digital PDF version (13/04/2021)

Week 3: Animation

For this exercise, we were required to animate our chosen words, and I decided to animate the word 'Slice' for the animated type expressions.

Figure 1.5: Progress in Illustrator (20/04/2021)

Figure 1.6: Animating Progress in Photoshop (20/04/2021)

Figure1.7: Final Animation on Slice (20/04/2021)

Task 2: Formatting Text

As for our second task, we were required to do 4 exercises in regards of the formatting text tasks. 

Part 1: Kerning & Tracking 

We were asked to use 10 typefaces font that have been given to since the beginning of class, and typed out our name using the 10 typefaces and adjust the kerning and letter spacing accordingly. 

 

Indesign shortcuts:

• Kerning: option + right/left key 

• Tracking (letter spacing): select whole sentence, option + right/left key

• Units & Increments: controls the movements of kerning/tracking; indesign > preferences 

Figure 1.8: Progress on Kerning and Tracking Tasks (25/04/2021)

Figure 1.9: Final progress on Kerning and Tracking (25/04/2021) 

Part 2: Font Size, Line Length, Paragraph Spacing & Leading

We were given a text on the Facebook post and from there, we were required to do the exercise based on Mr Vinod's tutorial on formatting text (part 2-4). 

Part 2 Requirements:

• Grid system (good layout depend on margin space) 

• Columns (2-4) 

• Point size (between 8-12 pt)

• Line length (55-65 characters per line)

• Leading ( 2-3 pt larger than font size)

• Paragraph spacing= leading

Figure 2.0:Text Formatting progress pt 2 (26/04/2021)

Part 3: Text Field, Paragraph Spacing, Ragging & Alignment 

Part 3 Requirements:

• Classify the hierarchy of information 

• Place image/s

• Re-manipulate the margins/grid system (depends on text/image)

• Kerning & tracking (2-3 times) 5/1000

• Alignment 

Figure 2.1: Text Formatting progress pt 3 (26/04/2021)

Part 4: Baseline Grid & Cross Alignment

• Baseline grid: sits in line (zoom 75%)

• Baseline grid>grids & guides> show baseline grid

• Cross Alignment: text left/right align in one line

• preferences > grid > increment (11pt) > threshold (50%)

• Select body text> right click/cmd b, text frame options> baseline option (offset:leading), general (leading)

Figure 2.2: Outcome on Formatting Text (26/04/2021)

After receiving feedbacks from Mr Vinod and Mr Sam as well as my classmates, I did some amendments based on their feedbacks.

Figure 2.3: Progression on the amendment (26/04/2021)

Figure 2.3: Final Outcome on Formatting Text (26/04/2021)

Figure 2.4: Final PDF Text Formatting Task 1 & Task 2 (26/04/2021)

and that concludes Task 1!

---

FEEDBACKS

Week 1

General Feedback: All images/sketches must be taken or scanned well with good and natural, even light without shadows before uploading it on the e-portfolio. The images/sketches must be labeled accordingly as such: Figure 1: Description (date).

Specific Feedback: No specific feedbacks. 

Week 2

General Feedback: No graphic elements and excessive distortion were allowed as it would ruins its originality in expressing typographically, however minor graphical elements are allowed for very minimal design. We were given the time to give opinions and feedbacks to our classmates, in regards of their designs. 

Specific Feedback: A few of the designs strongly fits the literal meaning and expressions of the words, and a few could possibly be improved. 

Week 3

General Feedback: Incorrect format (must be labeled /description & outline box), the overuse of distortion. 

Specific Feedback: All designs fits the expression well. Below are the overall feedbacks I received from my classmates:

1. EAT- Visual graphics for EAT could be improvised as the use of pac-man might be to visual. Hence I did amend and change which then only focuses on the words and they said its much better and clearer with the use of the words only. 

2. SLICE- Depicts the sword for slice and represents a clear idea of the the words. 

3. POINT- The use of needle as 'I' alongside with the thread, gives it strong idea and fits the words.

4. SCREAM- Clearly represent the word 'SCREAM' and a minor detail (scream face) on the letter M gives it a clear objectives. 

Week 4

General Feedback: The E-portfolio should be updated constantly as Mr Vinod and Mr Sam will check the progression from time to time. 

Specific Feedback: Mr Vinod and Mr Sam commented on my slice animation as the "I" (sword) represents like T. Hence, I did amend and deleted the sword handle. I also did asked my classmates and they agreed that I should deleted the sword handle. 

Week 5

General Feedback: Keep it simple, avoid adding too many image as it will distract the text. 

Specific Feedback: Text formatting, eye movement and hierarchy of information were overall good. Mr Vinod advised me to use only regular fonts and not bold font. Ragging is fine but need to be polish, line length, leading and paragraph spacing just fine. Need to work on cross alignment. 

---

REFLECTION

Week 1:

• Experience: Having literally ZERO skills in design and taking design as my minor, I would say its pretty tough as we (including myself) are new to design and typography in general. Felt overwhelmed with the workload. Will see how am I progressing till the end of the semester and hopefully I survived typography... (wish me luck :'))

• Observation: I found out that theres so more to learn in typography than just letters and words. Hence, I need to keep updated with the lectures and seek help from my lecturers and classmates. 

• Findings: I realised that typography isn't just about words and letters, it's about how emotions/feelings conveyed into words. 

Week 2:

• Experience: Mr Vinod and Mr Sam taught us on how to digitise our words through AI after we all done sketching our words and receiving feedbacks from our classmates. 

• Observation: I realised that my classmates have very different styles in expressing their words in such a unique way that I wouldn't think so. However, few of my classmates have very similar design concept for our type expression as a few of my designs was slightly similar with my classmates and I was worried that that my idea would seem unoriginal due to that. 

• Findings: I found out that the moment I started sketching/creating my type expression, I relied too much on graphical elements in order to fits its expression.  

Week 3:

• Experience: I enjoyed the animation session where I get to finally animate my words, it does take a while for me to get used with animating and kind of struggling in the beginning. But with time and the help from my friend and lecturers, I did managed to get the hang of it. 

• Observation: I noticed how it is easier to animate static words rather than animate the words with movements, and shifting back and forth constantly from AI to PS is quite frustrating in order to fix a certain frames that doesn't seem fit in a first place. 

• Findings: I found out that the animating is a very lengthy process and requires a WHOLE lot of patience and focus. 

Week 4:

• Experience: This week's class is mainly on E-portfolio progression check. 

• Observation: Mr Vinod and Mr Sam reviewed everyone's work and almost everyone's, including me. Did some amendment on my final animation after I received feedbacks from Mr Vinod and Mr Sam as well as my classmates. 

• Findings: Most of my classmates animation are nicely done!

Week 5:

• Experience: It seems easier to do the formatting task but it does takes a whole lot of time in order to achieved a nicely done text formatting. 

• Observation: I found out that text formatting task is very difficult compared to the previous exercise as  text formatting is a very lengthy process with so much details. 

• Findings: Typography is all about details and it will be the death of me. Therefore, I need to do a lot of practices for a better outcome.

---

FURTHER READING

Stop Stealing Sheep & Find Out How Type Works by Eriek Spiekerrmann

Figure 2.5: Stop Stealing Sheep & Find Out How Type Works- Eriek Spiekermann

A guide to typography as this book relates to the everyday life into our everyday situations. This book presented in a really fun and enjoyable way as they provide plenty pictures related to our daily life. Through this book, Eriek Spiekermann did a breakdown on a certain topics and the basic principles of typography and how type is used in various sectors of the community. 

Figure 2.6: Design With Type - Carl Dair

This book examines the basic components of type, type relationships mainly on his explanations of the 7 dimensions of contrast, space and hierarchy. This book is valuable and useful as a foundation for beginners who just started learning typography as it takes reader through a study of typography that starts with the individual letter and proceeds through the word.