Typography - Task 1: Exercises

4.4.2023 - 2.5.2023 / Week 1 - Week 5
Chan Wan Qing / 0350928 / BA of Design (HONS) in Creative Media
Typography
Task 1 (Exercises)

---

INDEX:

1. Lectures

2. Class Summary

3. Task 1 / Exercises

    Exercise 1 - Type Expression

    Exercise 2 - Text Formatting

4. Feedbacks 

5. Reflection

6. Further Readings

---

LECTURES

Typo_0_Introduction

In this lecture, Mr Vinod introduce us about what we will be learning throughout this module. Mr Vinod explained to us how typography is widely use in all the industries such as animation, website designs, app designs, signage designs, labels, logos and so on. Therefore, typography is also applicable to other modules or our next semesters. 

From this lecture, I am able to learn that typography has evolved more than 500 years, from calligraphy to lettering, lettering to typography. From the explanation by Mr Vinod, calligraphy means the writing styles; whereas lettering means drawing out the letters. 

In this lecture, I also learnt about the terminology of typography, which are font and typeface.

• Font: the individual font or weight within the typeface

Fig.1.1 Font

• Typeface: the entire family of fonts/weights that share similar characteristics/styles 

Fig.1.2 Typeface

At the end of the lecture, Mr Vinod said that there are many different explanation about the terminology of typography but we will stick to this explanation. He also explained that in this semester, we will be learning about type creation, type expression and type arrangement.

Typo_1_Development

A) Early Letterform Development: Phoenician to Roman 

• Writing - scratching into wet clay with sharpened stick/carving into stones with chisel
• Modern Latin and Early Arabic are derived from Phoenician

Fig.1.3 Evolution from Phoenician letter

• Writing directions
  - Phoenicians: Right to left 
  - Greeks: Boustrophedon (Right to left, left to right) 
     *As they change the direction of reading, they changed the orientations of letterforms

Fig.1.4 Boustrophedon style of writing

• Etruscan (and then Roman)
  Quality of their strokes: a change in weight from vertical to horizontal, a broadening of stroke at start and finish

Fig.1.5 Evolution from Phoenician to Roman

B) Hand Script from 3rd - 10th Century C.E.

• Square Capitals 
  - Written version that can be found in Roman monuments
  - Letterforms have serifs added to the finish of the main strokes 

  
  Fig.1.6 4th or 5th century square capitals

• Rustic Capitals 
  - Compressed version of square capitals 

        

Fig.1.7 Late 3rd - mid 4th century rustic capitals

• Cursive Writing Forms
  - Forms were simplified for speed; beginning of lowercase letterforms

     

Fig.1.8 4th century Roman cursive

• Uncials (Small letters)
  - Incorporate some aspects of Roman cursive hand

     

Fig.1.9 4th - 5th century uncials

• Half-uncials 
  - formal beginning of lowercase letterforms 

       

Fig.1.10 C.500 half-uncials

• Charlemagne 
  The first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. He entrusted this task to Alcuin of York, Abbot of St Martin of Tours. The monks rewrote the texts using both majuscules (uppercase), miniscule, capitalization and punctuation which set the standard for calligraphy for a century.

       

Fig.1.11 C.925 Caroline miniscule

C) Blackletter to Gutenberg's Type 

• Textura: a condensed strongly vertical letterform (Northern Europe)
• Rotunda: a rounder and more open-handed letterform (Southern Europe)

Fig.1.12 C.1300 Blackletter (Textura)

• Gutenberg's style includes skills of engineering, metalsmithing, chemistry

D) Text Type Classification 

Fig.1.13 Text type classification

Typo_2_Text (Part 1)

A) Tracking - Kerning & Letterspacing 

• Tracking: Addition and removal of space in a word or sentence
• Kerning: Automatic adjustment between letters 

Fig.1.14 Kerning

• Letterspacing: Adding spaces between letters 
• Normal Tracking - Loose Tracking - Tight tracking

Fig.1.15 Tracking

B) Text Formatting 

• Flush Left 
  - each line starts from same point but ends wherever the last word ends // ragged right 

Fig.1.16 Flush left

• Centered
  - imposed symmetry upon the text 

Fig.1.17 Centered

• Flush Right
  - emphasise on the end of a line and opposed its start 

Fig.1.18 Flush right

• Justified 
  - imposes a symmetrical shape on the text (by expanding or reducing spaces between words)

Fig.1.19 Justified

C) Texture 

Type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height or lighter stroke. Sensitivity to these differences in colour is fundamental for creating successful layouts.

Fig.1.20 Anatomy of a typeface 

• Grey value: text on a white page 
  - Compositional requirement - Ideal text to have a middle gray value

Fig.1.21 Different typefaces with different grey values

D) Leading and Line Length 

• Text Size
  - Should be large enough to be read at arm's length

• Leading: Spaces between adjacent lines of the typeface
  - Text that is set too tightly encourages vertical eye movement; a reader can easily lose track
  - Type that is set too loosely creates striped patterns that cause distraction

Fig.1.22 Tight leading and loose leading

• Line Length: Number of characters in a line
  - A good rule of thumb is to keep the line length between 55-65 characters

D) Type Specimen Book

Type specimen book provides an accurate reference for type, type size, type leading, type line length etc.

Fig.1.23 Sample type specimen sheet

Typo_3_Text (Part 2)

A) Indicating Paragraphs 

• Pilcrow (¶): A holdover from medieval manuscripts seldom use today 

Fig.1.24 Pilcrow

• Line Space (Leading*)
  - If the line space is 12pt, then the paragraph space is 12pt
  - To ensure cross-alignment across columns of text

Fig.1.25 Line space

Fig.1.26 Line space vs leading

• Standard Indentation 
  - The indent is the same size of line spacing or same as point size of text

Fig.1.27 Standard indentation

• Extended paragraphs
  - Creates unusually wide column of text 

Fig.1.28 Extended paragraphs

B) Widows and Orphans

• Widows: short line of type alone at the end of a column of text 
• Orphans: short line of type alone at the start of new column

Fig.1.29 Widows and orphans

C) Highlighting Text

• Italic/Bold/Colour (Same Typeface) 
  
  
  
  Fig.1.30 Italic/bold/colour
  
  
  
  
• Different Typeface 

Fig1.31 Different typeface

• Placing a field of colour

Fig.1.32 A field of colour

• Quotation Marks/Bullets 

Fig.1.33 Quotation marks/bullets

D) Headline with Text

• A Heads 
  - Indicates clear break between the topics within a section 

Fig.1.34 A heads 

• B Heads 
  - Indicates a new supporting arguments or example for the topic at hand
  - Should not interrupt the text as strongly as A heads do 

Fig.1.35 B heads 

• C Heads 
  - highlights specific facets of material within B head text 
  - Don't interrupt the flow of reading 

Fig.1.36 C heads

E) Cross Alignment 

Cross aligning headlines and captions with text type reinforces the architectural sense of the page—the structure—while articulating the complimentary vertical rhythms.

Fig.1.37 Cross alignment

Typo_4_Basic

A) Describing Letterforms

• Baseline: The imaginary line at the base of the letterforms
• Median: The imaginary line defining the x-height of letterforms
• X-height: The height in any typeface of the lowercase 'x'
• Stroke: Any line that defines the basic letterform
• Apex / Vertex: The point created by joining two diagonal stems
• Arm: Short strokes off the stem of the letterform (horizontal: E, F, L; inclined upward: K, Y)
• Ascender: The portion of the stem of a lowercase letterform that projects above the median
• Barb: The half-serif finish on some curved stroke
• Beak: The half-serif finish on the same horizontal arms
• Bowl: The rounded form that describes a counter
• Bracket: The transition between the serif and the stem
• Cross Bar: The horizontal stroke in a letterform that joins two stems together
• Cross Stroke: The horizontal stroke in a letterform that joins two stems together
• Crotch: The interior space where two strokes meet
• Descender: The portion of the stem of a lowercase letterform that projects below the baseline
• Ear: The store extending out from the main stem or body of the letterform
• Em/en: Originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typeface; an en is half the size of an em
• Finial: The rounded non-serif terminal to a stroke
• Leg: Short stroke off the stem of the letterform (at the bottom: L; inclined downward: K, R)
• Ligature: The character formed by the combination of two or more letterforms
• Link: The stroke that connects the bowl and the loop of a lowercase G
• Loop: The bowl created in the descender of the lowercase G (in some typefaces)
• Serif: The right-angled or oblique foot at the end of the stroke
• Shoulder: The curved stroke that is not part of a bowl
• Spine: The curved stem of the S
• Spur: The extension that articulated the junction of the curved and rectilinear stroke
• Stem: The significant vertical or oblique stroke
• Stress: The orientation of the letterform, indicated by the thin stroke in round forms
• Swash: The flourish that extends the stroke of the letterform
• Tail: The curved diagonal stroke at the finish of certain letterforms
• Terminal: The self-contained finish of a store without a serif, it may be flat, flared, acute, grave, concave, convex or rounded as a ball or a teardrop (see finial)

Fig.1.38 Describing letterforms (PDF)

B) The Font 

• Uppercase and Lowercase 

Fig.1.39 Uppercase & lowercase

• Small Capitals: Uppercase letters drawn to x-height of the typeface 
  

Fig.1.40 Small capitals

• Uppercase Numerals: Same height of as uppercase letters
• Lowercase Numerals: Numerals set to x-height with ascenders and descenders 

Fig.1.41 Uppercase and lowercase numerals

• Italic: Refers back to fifteenth century Italian cursive handwriting
• Punctuation, Miscellaneous Characters
  - It is important to ensure that all the characters are available in a typeface before choosing the
    appropriate type

Fig.1.42 Punctuation, miscellaneous characters

• Ornaments: Used as flourishes in invitations or certificates
  - Usually provided as a font in a larger typeface family (Adobe Caslon Pro)

Fig.1.43 Ornaments

C) Describing Typefaces

• Roman: Uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as ‘Book’.

• Italic: Named for 15th century Italian handwriting on which the forms are based. Oblique conversely is based on the roman form of typeface.

• Boldface: Characterized by a thicker stroke than a roman form. It can also be called ‘semibold’, ‘medium’, ‘black’, ‘extra bold’, or super.

• Light: A lighter stroke than the roman form. Even lighter strokes are called ‘thin’.

• Condense: A version of the roman form, and extremely condense styles are often called ‘compressed’.  

• Extended: Extended variation of a roman font.

Fig.1.44 Describing typefaces

D) Comparing Typefaces 

*Take note on the differences but not similarities

Beyond the gross differences in x-height, the forms display a wealth of variety, in line weight, relative stroke widths and in feeling. For any typographer these feelings connote specific use and expression.

The Rs display a range of attitudes, some whimsical, some stately, some mechanical, others calligraphic some harmonious and some awkward.

Fig.1.45 Comparing typefaces

Typo_5_Understanding 

A) Letterforms

• Uppercase 'A' (Baskerville & Univers)
  

The uppercase letter forms suggest symmetry, but in fact they are not. Both Baskerville and Univers demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Baskerville: Two different stroke weights of the Baskerville stroke form; each bracket connecting the serif to the stem has a unique arc

Univers: The width of the left slope is thinner than the right stroke

Fig.1.46 Uppercase 'A' - Baskerville (right) & Univers (left)

• Lowercase 'a' (Helvetica vs Univers)

A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two. 

Fig.1.47 Lowercase 'a' - Helvetica (right) & Univers (left)

B) Maintaining x-height

Curved strokes, such as in ‘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.

Fig.1.48 Maintaining x-height

C) Form and Counterform 

Counterform (or counter)—the space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them. How well are the counters handled determines how well the words hang together—how easily we can read what’s been set.

Fig.1.49 Form and counterform

We could examine the counterform of letters by enlarging each letter and analysing them. It could give us a glimpse into the process of letter-making.

Fig.1.50 Understanding form and counterform

D) Contrast 

The simple contrasts produce numerous variations:
- small + organic; large + machined; small + dark; large + light; etc…

Fig.1.51 Contrast 

Typo_6_Screen & Print

A) Print Type vs Screen Type 

• Type for Print
  - Type was designed intended for reading from print long before we read from screen. The text should be smooth, flowing, and pleasant to read
  - Ex: Caslon, Garamond, Baskerville (elegant, intellectual, highly readable at small font size) 

Fig.1.52 Type for print

• Type for Screen
   - Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments
  - A taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, modified curves and angles for some designs, more open spacing (for smaller size type faces)

Fig.1.53 Type for screen

• Hyperactive Link / Hyperlink
  A word, phrase, or image that you can click on to jump to a new document or a new section within the current document. Found in nearly all Web pages. Text hyperlinks are normally blue and underlined by default.

• Font Size for Screen
  16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance. Because we read books pretty close — often only a few inches away — they are typically set at about 10 points. If you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens.

Fig.1.54 Font size for screen (left) vs print (right)

• System Fonts for Screen / Web Safe Fonts 
  - Each device comes with its own pre-installed font selection which is largely based on its operating system
  - Web safe fonts appear across all operating systems. They are a small collection of fonts that overlap from Windows to Mac to Google
  

  - Web safe fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

• Pixel Differential between Devices 
  The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too, because they have different sized pixels.

Fig.1.55 Pixels differential between devices

B) Static vs Motion 

• Static Typography
  Static typography has minimal characteristics in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.

Fig.1.56 Static typography

• Motion Typography 
  Temporal media offer typographers opportunities to “dramatize” type, for letterforms to become “fluid” and “kinetic”. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type.

Fig.1.57 Motion typography - Se7en (1995) title sequence

---

CLASS SUMMARY

Week 1 / Introduction & Briefing

In the first week, Mr Vinod required us to join the typography module group on Facebook so that we are able to get all the files, information and announcements through the group. We are required to download all the 10 fonts from My Times as we will be using them throughout the whole semester in our exercises and projects. In the class, Mr Vinod guided us to watch the video of e-portfolio brief and create a blog according to the steps to record our learning progress. Mr Vinod also explained to us about the module information booklet to us clearly. After that, we started to choose the words for our first task. At last, Mr Vinod brief us about what he expected us to complete until Week 2.

Week 2 / Exercise 1 

In week 2, Mr Vinod introduced himself and showed us some of his design works, including photographs, type designs (from the process to the outcome) and more. It is interesting to listen to Mr Vinod's design process as I can also gain some experiences from these process. 

After that, Mr Vinod gives us his feedbacks about our artworks after we posted in Facebook. From the feedback Mr Vinod gave to me and other peers, I learned a lot and found it interesting to understand their designs which have different perspectives and ideas with my point of views. We were asked to fill in our feedback in the Google Sheet provided by Mr Vinod. 

Mr Vinod also gave us some guides on digitising our sketches. He demonstrated a few tools in Adobe Illustration to show us how can we use them in our exercises. 

Week 3 / E-portfolio & Exercise 1

In week 3, Mr Vinod started the class with checking and providing feedbacks to our e-portfolio, which is our blog. We are required to keep updating our blog for our classes and our tasks weekly, so Mr Vinod advised us to progress the blog after every classes. 

Then, we proceeded to the exercises, type expressions, continuously from last week, this week, we are required to show our digitised version of our words. I listened to the comments Mr Vinod gave to other peers so that I can improve myself and avoid myself from doing the same mistakes, as I have to redo and amend some of my works too. 

After that, Mr Vinod brief us about what we should be doing this week and what will he expect from us next week. He advised us to finish the type digitisation in these 2 days as we have enough time to amend it and think about our directions. After that, we will need to continue to work on the animation part of this exercise. He required us to watch the video he demonstrated to us and choose 1 or 2 word to work on it. 

Week 4 / Exercise 1 & E-portfolio & Exercise 2

In week 4, we were supposed to show our final progress for our first exercise, which is the animation part of the type expression exercise. Mr Vinod gave us advices and feedbacks so that we are able to improve our work. After giving feedbacks, we were given some time to improve our works and make our final adjustments on the animation of the word. 

Mr Vinod also gives some feedbacks as he sport checked our blogs. He also explained to us how are we going to proceed on our next task on next week. He urged us to watch the lecture videos before we proceeded to the next exercise as in the next exercise, we will be using the information and knowledge in the lectures. For exercise 2, we are going to complete and submit it next week. Therefore, Mr Vinod told us that it is very important for us to keep our blog updated and also be prepared for the next task, text formatting, by watching the lecture videos on text formatting and also follow the videos to complete the pre-exercises before we proceed. 

Week 5 / Exercise 2

In week 5, we started our class with our self introduction which we could not do as there was not enough time in week 1. Mr Vinod required us to introduce ourselves about where are we from, our last education institutions. 

After that, Mr Vinod required us to post our text formatting exercise on Facebook. He gives us feedbacks and advices based on our layouts. I wrote down the feedbacks given by Mr Vinod on other peers in case it could be applied in my work as general feedbacks just like few past weeks. We also discussed on the submission date of our Task 1: Exercises 1 and 2. Mr Vinod also briefed us about what we should submitted in the e-portfolio. 

Mr Vinod then briefed us about our new task (Task 2). We had to download the editorial text option for our second task. Mr Vinod also gives us advices on things we should consider when doing task 2. He showed us some examples and explained to us about how we can express the title and the steps to complete this task. 

---

INSTRUCTIONS

TASK 1: Exercise 1 - Type Expression

For the first exercise, we have to choose 4 words from the 7 words we have voted in the first class which are rain, fire, crush, water, dissipate, freedom, sick and sketch out the chosen words in a manner that allows the meaning of the word to become visible. We are not allowed to use colours in our exercises and can only use the10 typefaces provided to us in the digitisation phase. 

1. Sketches 

Mr Vinod advised us to choose and sketch out 5 words in case one of them get rejected. The 5 words I chose are fire, water, crush, freedom and dissipate. In the beginning of this stage, I tried to think of anything related about the word such as visual, meaning and so on. After that, I started to sketch out my ideas digitally.

Fire: For the sketches of fire, I used bolded typeface for this word so that it can catch attention. The sketches of this word are inspired by fire emoji. 

Fig.2.1 "Fire" sketches (11.4.2023 - Week 2)

Water: I tried to use different approach on the sketches of water including wave form, water drip and reflection of water.

Fig.2.2 "Water" sketches (11.4.2023 - Week 2)

Crush: For the word crush, I tried to approach through the definition of the word. Crush means to press or squeeze with a force that destroys or deforms. The idea is the letter C (bolded) crushing on ‘rush’. 

Fig.2.3 "Crush" sketches (11.4.2023 - Week 2)

Freedom: For the first sketch, I used different variation of size, typeface to express the meaning of freedom; whereas other sketches show the meaning of escaping to obtain freedom.

Fig.2.4 "Freedom" sketches (11.4.2023 - Week 2)

Dissipate: The idea of these sketches is designed by the definition of the word, disappearing. The sketches are like the word is fading out slowly by decreasing their opacity. 

Fig.2.5 "Dissipate" sketches (11.4.2023 - Week 2)

2. Digitisation

After sketching out my ideas, I chose 4 words, which are water, crush, freedom and dissipate for my digitisation process. The reason I exclude fire is because the sketches of the word fire will need to be distorted while digitising and we are not allowed to do so because we should keep the shape of the typefaces of the letterforms. I watched the videos provided by Mr Vinod about digitisation and have a few attempts. 

Fig.2.5 Attempts on digitising (1) (11.4.2023 - Week 2)

After receiving feedbacks from Mr Vinod, I decided to digitise the other few sketches which express the meaning of the word and choose the best one out of the few versions. I also decided to make som amendments on these attempts.

Fig.2.6 Attempts on digitising (2) (11.4.2023 - Week 2)

Crush

The idea of this design is that 'C' crushing on 'rush'. So I started with choosing the typeface, Univers LT Black Font to show a 'heavier C'. [Fig.2.7] As the first one doesn't really express the meaning of crush, I rotate the letter 'r' and 'h' as they are squeezed out by 'C'. After that, I wanted to express the meaning more, so I make the font size of 'u' and 's' smaller as 'C' is pressing on 'u' and 's'. After receiving feedbacks from Mr Vinod, he suggested that I can make the 'C' more heavier and larger so that it shows that the whole 'C' is crushing on the 'rush'.

Fig.2.7 'Crush' digitisation process (18.4.2023 - Week 3)

Dissipate

For the word 'dissipate', I used knife tool in Adobe Illustration like what Mr Vinod had demonstrated in the class. The idea of this is the word slowly dissipating in pieces. [Fig.2.8] In the first attempt, I only applied the dissipating effect on the word 'D', but after I zoom out, I think it does not show the effect that clear and I found out that the pieces are too close to each other. After that, I tried to extend the area of the dissipating effect on each letter. In the last pic, the dissipating effect is stronger as I made more spaces between the small pieces and decrease the opacity of them. 

Fig.2.8 'Dissipate' digitisation process (18.4.2023 - Week 3)

Freedom

For the word 'freedom', I used different typefaces to express the meaning of freedom. I accepted the advices from Mr Vinod and used different font sizes and letterforms for each letter. [Fig.2.9] In the first picture, I tried to arrange the letters on different baseline, however, after I put the word into the box, I feel like it somehow does not show the meaning of freedom as the letters are too close to each other. Therefore, I seperated the letters and rotate some of them so that there are more spaces between them to show freedom. After feedbacks from Mr Vinod, he suggested me to make the letters not like flying, and make it them in one line as the letters with different typefaces or font can express individual differences/freedom. 

  

Fig.2.9 'Freedom' digitisation process (18.4.2023 - Week 3)

Water

For the word 'water', I used reflection to express the word. The typeface I chose for this word is Futura Std as I think this typeface can show the effect of reflection the best. [Fig.2.10] In the first attempt, I created the reflection of water by decreasing the opacity into 20%. However, the reflection is too clear and it does not look like it is reflection on water. So, I added the effect of diffuse glow to make the reflection looks more alike with reflection on water. As Mr Vinod said that this looks more like shadow so I made some adjustments on the reflection (last pic). 

 

Fig.2.10 'Water' digitisation process (18.4.2023 - Week 3)

Attempts

Fig.2.11 First attempt of type expressions (18.4.2023 - Week 3)

Fig.2.11 Second attempt of type expressions (18.4.2023 - Week 3)

Fig.2.11 Third attempt of type expressions (18.4.2023 - Week 3)

Final Type Expressions

Fig.2.12a Final type expression - JPEG (18.4.2023 - Week 3)

Fig.2.12b Final type expression - PDF (18.4.2023 - Week 3)

3. Animation 

After digitisation, we are required to choose 1 word out of the 4 and make it into a gif. After we are done with digitisation, Mr Vinod requested us to watch a tutorial video by him which he demonstrated on how to create an animation using Adobe Illustrator and Adobe Photoshop. 

I chose the word 'Crush' for the animation part. I followed the steps shown in the video and make the first attempt on animation of 'Crush'.

Fig.2.13 First attempt of animation of 'Crush' (18.4.2023 - Week 3)

In the second attempt, I tried to make the 'C' larger, maximise it to the size of the art board and adjust the time frame to 0.1s in Adobe Photoshop. 

Fig.2.14 Second attempt of animation of 'Crush' (18.4.2023 - Week 3)

There are total 11 time frames in the second attempt for the word 'Crush'. 

Fig.2.15 Animation timeline (2nd attempt)

After receiving feedbacks from Mr Vinod, I made some adjustments on the animation. I made the 'C' stayed on the word 'rush' and the word slowly cracking. 

Fig.2.16 Third attempt of animation of 'Crush' (25.4.2023 - Week 4)

I also tried on different timeframes for each frame to see which of them give the best effect. 

Fig.2.17 Animation timeline (3rd attempt)

After receiving feedbacks from Mr Vinod, I made the 'C' to have a little bounce at the end of the animation. [Fig.2.18] But I feel like the bounce is a little bit awkward as I made the it bump up as a whole, so I amended it by making the 'C' bouncing from the base (without leaving the base). 

Fig.2.18 Fourth attempt of animation of 'Crush' (25.4.2023 - Week 4)

Final Animated Type Expression

Fig.2.19 Final animated type expression (25.4.2023 - Week 4)

Fig.2.20 Final animation timeline

TASK 1: Exercise 2 - Text Formatting 

In exercise 2, we are required to create one final layout that addressed different areas within text formatting such as type choice, type size, leading, line-length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans and cross-alignment. Before we started this exercise, we need to watch the lecture videos and complete the pre-exercises according to the videos using Adobe InDesign. 

Text Formatting 1/4: Kerning & Tracking

Fig.2.21 Text formatting with kerning (left) vs without kerning (right) (25.4.2023 - Week 4)

Fig.2.22 Comparison of text formatting with and without kerning (25.4.2023 - Week 4)

Text Formatting 2/4: Font Size, Line-Length, Leading & Paragraph Spacing

- Font size (for A4): 8 to 12 pt 
- No. of characters in one line length: 55 to 65 characters
- Leading:
   - Body text: +2 to 3 points of the typeface point size (depends on the typefaces)
   - Header: double point sizes of leading for body text
- Paragraph spacing: same with leading 

Fig.2.23 Font size, line-length, leading & paragraph spacing exercise (25.4.2023 - Week 4)

Text Formatting 3/4: Alignment, Paragraph Spacing, Text Fields & Ragging

- Tracking: +3/-3 to reduce ragging (line)

- Alignment: Left align (preferred) or justify (use hyphenation to/and avoid rivers) 

Fig.2.24 Alignment, paragraph spacing, text fields & ragging exercise (25.4.2023 - Week 4)

Text Formatting 4/4: Cross Alignment & Baseline Grid

- Maintain cross alignment
- Avoid widows and orphans

 

Fig.2.25 Cross alignment & baseline grid exercise (25.4.2023 - Week 4)

Layout #1 

I followed the text formatting lecture videos step by step and arranged them into my first layout. I tried using different font sizes to match with the range of line length for numbers of characters before I started to arrange the layout. After that I started to do tracking for each line to reduce ragging. I found that tracking is a little hard as I needed to make the the end of the lines smoother but at the same time, I also need to avoid widows and orphans. I also adjusted the margin as I wanted the layout to looks more comfortable and appealing. 

Fig.2.26 Layout #1 details (line length & cross alignment) (25.4.2023 - Week 4)

Fig.2.27 Layout #1 process (25.4.2023 - Week 4)

Fig.2.28 Layout #1 before & after tracking (25.4.2023 - Week 4)

Fig.2.29 Layout #1 (25.4.2023 - Week 4)

Fonts: Gill Sans Std (Regular - body text; Bold - headline; Italic - byline; Light Italic - captions)
Point size: 10 pt (body text), 9 pt (captions), 30 pt (headline)
No. of characters in a line length: Average 61
Leading: 12 pt (body text), 24 pt (headline)
Paragraph spacing: 12 pt
Alignment: Left align
Columns: 2
Margins: 3p0 

Layout #2 

Fig.2.30 Layout #2 cross alignment (25.4.2023 - Week 4)

Fig.2.31 Layout #2 process (25.4.2023 - Week 4)

Fig.2.32 Layout #2 before & after tracking (25.4.2023 - Week 4)

Fig.2.33 Layout #2 (25.4.2023 - Week 4)

Fonts: Gill Sans Std (Regular - body text; Light Italic - captions), Janson Text LT Std (Bold - headline; Italic - byline)
Point size: 11 pt (body text), 10 pt (captions), 30 pt (headline)
No. of characters in a line length: Average 64
Leading: 14 pt (body text), 28 pt (headline)
Paragraph spacing: 14 pt
Alignment: Left align
Columns: 2
Margins: 3p0 

Layout #3 

Fig.2.34 Layout #3 cross alignment (25.4.2023 - Week 4)

Fig.2.35 Layout #3 before & after tracking (25.4.2023 - Week 4)

Fig.2.36 Layout #3 (25.4.2023 - Week 4)

Fonts: Janson Text LT Std (Roman - body text; Bold - headline; Italic - byline & captions)
Point size: 10 pt (body text), 9 pt (captions), 35 pt (headline)
No. of characters in a line length: Average 59
Leading: 13 pt (body text), 26 pt (headline)
Paragraph spacing: 13 pt
Alignment: Left align
Columns: 2
Margins: 3p0 

Layout #4

For the third layout, the arrangement is similar with layout #1, but I tried using different typefaces and
font size for this particular layout. 

Fig.2.37 Layout #4 cross alignment (25.4.2023 - Week 4)

Fig.2.38 Layout #4 before & after tracking (25.4.2023 - Week 4)

Fig.2.39 Layout #4 (25.4.2023 - Week 4)

Fonts: Janson Text LT Std (Roman - body text; Bold - headline; Italic - byline & captions)
Point size: 10 pt (body text), 9 pt (captions), 35 pt (headline)
No. of characters in a line length: Average 62
Leading: 13 pt (body text), 26 pt (headline)
Paragraph spacing: 13 pt
Alignment: Left align
Columns: 2
Margins: 3p0 

Development on Layout #4:

As Mr Vinod advised us to choose a typeface that related to Helvetica, which is developed from serif typeface, so I chose layout 4 as my final text formatting layout. After receiving feedbacks from Mr Vinod, I downsized the font size of the abbreviations from 10 pt to 9.5 pt so that the abbreviations do not stand out from the whole paragraph. 

Final Text Formatting

Fig.2.40 Final layout without grids - JPEG (2.5.2023 - Week 5)

Fig.2.41 Final layout with grids - JPEG (2.5.2023 - Week 5)

Fig.2.42 Final layout without grids - PDF (2.5.2023 - Week 5)

 
Fig.2.43 Final layout with grids - PDF (2.5.2023 - Week 5)

HEAD

Font: Janson Text LT Std (Bold - headline; Italic - byline)
Type Size/s: 35 pt (headline), 10 pt (byline)
Leading: 26 pt (headline)
Paragraph spacing: -

BODY

Font: Janson Text LT Std (Roman - body text; Italic - captions)
Type Size/s: 10 pt (body text)(9.5 pt for capital letters and numbers), 9 pt (captions)
Leading: 13 pt 
Paragraph spacing: 13 pt 
No. of characters in a line length: 62 characters
Alignment: Left aligned

Columns: 2
Margins: 3p0 
Gutter: 1p0

---

FEEDBACKS

Week 2

Questions:
1. Are the explorations sufficient?
2. Does the expression match the meaning of the word?
3. On a scale of 1–5, how strong is the idea?
4. How can the work be improved?

General Feedback:

Type Expressions: We should avoid using typefaces when sketching out ideas. Besides, we should also minimise using graphic elements in the designs as we should not be using them. My designs are overall fine and acceptable to continue for digitisation.

Specific Feedback:

Type Expressions: Some of my sketches are not following the typefaces that are given, therefore while digitising it, the outcome may not come out as how I sketched it, such as the curve parts of the first idea sketch of 'water'. Small distortion is allowed for the fourth sketch of the word 'crush' as it can express the meaning of the word. Mr Vinod also suggested to use different typefaces, font sizes, letterforms for the 1st sketch of 'freedom'. The first idea of the word 'dissipate' is great, but it may also have small distortion which is acceptable while digitising it.

Week 3 

Questions:
1. Do the expressions match the meaning of the words?
2. Are the expression well crafted (crafting/lines/shapes)?
    a. Do they sit well on the art-board
    b. Are the composition engaging? Impactful?
3. Are there unnecessary non-objective elements present?
4. How can the work be improved?

General Feedback:

Blog:
The title of the blog should be 'Typography - Task 1: Exercises'. 

Type Expressions:
Avoid distortion and try to use more spaces of the box, avoid using too many graphic elements.

Specific Feedback:

Blog:
For my blog, I should add lines between each section to make it easier to read. Besides, I should add jump link in the index. Tips from Mr Vinod is that in case I wanted to add more figures in between, so I can put 'Fig.0.0' first, and amend them after I finished the whole task or before the submission. 

Type Expressions:
The reflection of water looks like shadow, but not reflection from water. The word 'Crush' and 'Dissipate' can be larger. The word 'Freedom' is expressing individual freedom/differences, so can make it within one text box.

Week 4

General Feedback:

Blog:
Use an off-white background so that the figures with white background can be seen clearly. 

Type Expressions:
When creating animation, it is best to increase a few seconds at the last frame.

Specific Feedback:

Type Expressions: Mr Vinod suggested to let the 'C' to stay on the words and let them crash. When the words started to crash, the 'C' can be moved down. After improving, Mr Vinod also suggested that I can add a little bound on the 'C' after it reaches the bottom.

Week 5

Question
1. Is kerning and tracking appropriately done?
2. Does the font size correspond to the line-length, leading & paragraph spacing
3. Is the alignment choice conducive to reading?
4. Has the ragging been controlled well?
5. Has cross-alignment been established using base-line grids?
6. Are widows and orphans present?

General Feedback:

Text Formatting:
Choose an image that is relevant to the text and avoid choosing image with text; avoid widows and orphans; ensure constant paragraph spacing.

Specific Feedback:

Text Formatting:
If there is abbreviation in capital letters, downsize the font of the capital letters (eg: normal font size - 9 pt, caps letters font size - 8.5 pt) or use small caps. 

---

REFLECTION

Experiences

Throughout these few weeks, we had to complete two exercises, type expressions and text formatting, and also watch the lecture videos posted by Mr Vinod. These exercises had helped us to gain basic knowledge in Typography. The first exercise, type expression, is a pretty fun challenge for me, from the sketches, digitisation until the animation stage. We have to complete the task stage by stage and did it according to the rules, such as use only the 10 provided typefaces, no distortions and graphics. As sketching the ideas and digitising them have quite a huge difference, so it is a challenge for me to make them look exactly like the sketches. We completed the exercises week by week, with the advices from Mr Vinod for us to learn actively, we are able to explore more ideas and works from the other peers and gained experiences from the feedbacks given. In exercise 2, we had to apply our theoretical knowledge through practical exercise. We had to explore different layouts and follow the rules in text formatting. 

Observations
Through the digitisation and animation stages, I observed that I am able to familiarise myself with Adobe Illustration and Adobe Photoshop through the exercises lecture videos or some tutorial videos on YouTube. It is fun for me to be able to learn new things and skills. I also found that text formatting is a fun exercise where we can test ourselves whether we absorbed the knowledge we learned in the classes and videos. Besides, I noticed that I am able to learn the theoretical knowledge from the lecture videos by Mr Vinod. In the lectures Mr Vinod delivered, he will show us how kerning, line and paragraph spacing and more are done and from there, I am able to learn and develop my practical knowledge together with the exercises we did. 

Findings
Through these 5 weeks of completing exercises and receiving feedbacks, I realised that typography is the art and technique of how we arranged the letters and/or words so that they can be expressed  according to the meaning and when they are being displayed, they are legible, readable and appealing. From the given exercises, I also discovered that there is several key elements in typography such as typeface, font, kerning, leading, tracking, paragraph spacing, alignment and so on to make the typography design to look effective and appealing.

---

FURTHER READINGS

Fig.5.1 Typography, Referenced (2012)

Typography, Referenced is the ultimate source of typographic information and inspiration, documenting and chronicling the full scope of essential typographic knowledge and design from the beginnings of moveable type to the present "golden age" of typography. 

The contents of this book are divided into 12 chapters, including type history and timeline, type design and development, type classification and identification, type designers, type foundries and more. I think this book is very related to what we are learning in this module and it can provide us more extra information about typography. 

Chapter 1: Type History and Timeline

In this chapter, the book explains about the history of type dates back to the ancient Greeks according to the timeline, from its start through 2010.

Sixteenth Century

According to this book, Garamond was the most distinguished type designer of that time, perhaps of the entire Renaissance period. Garamond was popular and particularly often used for book printing and body text. However, new French designs and styles created by English, Dutch, and Italian foundries began to replace Garamond’s type as the design of choice among printers. Active from 1545 to 1589, Granjon is credited with introducing italic type form as a complement to the roman faces popular at the time.

 

Fig.5.2 Types designs in sixteenth century

Early Nineteenth Century

In 1816, William Caslon IV, designed the first sans serif font, creating the English serifed design, Caslon, though at the time it was not widely accepted nor popularized. Many claim that the design for this sans is based on the Greek lapidary letters of the fifth century.

In 1818, Bodoni’s Manuale (completed by his wife after his death) showed the quintessential modern type. Today, there are hundreds of Bodoni revival designs based on those shown in this benchmark of typography.

In 1844, R. Besley & Co. Type Founders released Clarendon as a heavy face to accompany standard text composition in directories and dictionaries. Clarendon became popular as an advertising display face, eventually copied by other foundries.

Fig.5.3 Types designs in early nineteenth century

In this chapter of this book, it explains all kinds of type designs according to timeline more detailed from century to century. It is interesting to read the stories of each types and this allows me to remember the types easier from the stories behind the types.