Typography Task 1 : Exercise 1 & 2

30.03.2022 - 27.04.2022 ( week 1 - week 5 )
Len Hoi Yee / 0353430
Typography / Bachelor of Design in Creative Media 
Task 1 : Exercise 1 & 2 

---

LECTURE
Week 1 -Introduction to Typography 

I have watched Mr. Vinod's lecture video on youtube about the introduction to Typography. Through this lecture video, I have learnt that I must have an open mind to receive criticism, feedback, regardless it is from my peers, lecturers, or strangers. 

Paul Ryan says that it is difficult to teach art, but it is easy to teach processes that are necessary to create good art, processes that develop to create good art. 

"Learning is never easy, get used to taking criticism, be persistent and determined." - Mr. Vinod

 

Typography : The art and technique of arranging type to make written language legible, readable and appealing when displayed. Typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols, created by the process. 

Font : The individual font or weight within a typeface, I.e: Georgia Regular, Georgia Italic and Georgia Bold. 

Typeface : The various families that do not share characteristics, I.e: Georgia, Arial, Times New Roman, Didot and Futura. 

Typography : Development and Timeline

Early letterform development: Phoenician to Roman 

Fig. 1.1 Phoenician to Roman

Figure 1.2 Evolution of Phoenician letter to Arabic and to Modern Latin. 

The Greeks 

Figure 1.3 Greeks' alternatively form of text reading

• 'boustrophedon', which means they read alternatively from right to left and left to right. 
• did not use letter space or punctuations.

Fig. 1.4 Greek fragment, stone engraving. (Date unknown) 

 

Figure 1.5 Square Capitals 

Square capitals 

• have broader edge and have thick and thin strokes 
• serifs are added
• developed in the 5th century 

Figure 1.6 Rustic capitals  

Rustic capitals

• a compressed version of square capitals 
• requires lesser time to write
• harder to read 
• pen or brush is held at an angle of approximately 30 degreee off the perpendicular 

Hence. both square and rustic capitals were typically reserved for documents of some intended performance. the development of lowercase letterforms is from the result of writing fast. 

Fig 1.7 Uncials 

Uncials

• have aspects of the Roman cursive hand 
• small letters
• broad forms of uncials are more readable at small sizes than rustic capitals 

The formal beginning of lowercase letterforms 

Fig 1.8 Half-uncials

Half-uncials

Half-uncials marks the formal beginning of lowercase letterforms. After several improvement and development through years, eventually forms the lowercase letterforms. 

Fig 1.9 Charlemagne 

Charlemagne 

• The first unifier of Europe since the Romans 
• He introduced majuscules (uppercase), miniscule, capitalisation and punctuation
• to standardise and convey messages more accurately and precisely

How Blackletter developed into Gutenber's type

Fig 1.10 Blackletter (textura) 

Blackletter (textura)

Blackletter (textura) is a more condense strongly vertical letterform gained popularity in the northern Europe. However, in the south, a rounder and more open hand gained popularity, called 'rotunda'. 

Fig 1.11 Gutenberg  

Gutenberg, the person who 

• invented modern-day printing press, skilled in engineering, metalsmithing,and chemistry. 
• gathered all the skills to build pages that accurately mimicked the work of the scribe's hand, the Blackletter of northern Europe.
• developed little metal matrices that he could put together, and form the word, and then form sentences 

Fig 1.12 Humanist script to roman type 

Fig 1.13 Dutch printing   

Text Type Classification

 

Typeforms have developed in response to prevailing technology, commercial needs, and esthetic trends. Certain models have endured well past the cultures that spawned them. The following typeform classification here, based on one devised by Alexander Lawson only covers the main form of text type. 

Fig 1.14 1450 Blackletter 

1450 Blackletter is the earliest printing type, its forms were based upon the hand-copying styles that were then used for books in northern Europe. 

Example: Cloister Black, Goudy Text 

 

Fig 1.15 1475 Oldstyle

1475 Oldstyle

Based upon the lowercase forms used by Italian Humanist Scholars for book copying ( themselves based upon the ninth- century Caroline minisule ) and the uppercase letterforms found inscribed on ROman ruins, the forms evolved away from their calligraphic origins over 200 years, as they migrated across europe, from Italy to England.

Examples: Bembo, Caslon, Dante, Garamound, Janson, Jenson , Palatino 

 

Fig 1.16 1550 Script 

1550 Script  

• not appropriate in lengthy text settings.
• very decorative in nature
• not suitable to be used in large amount of text 
• not been designed to write in capital letters

Fig 1.17 1750 Transitional 

1750 Transitional was achieved in part due to advances in casting and printing. 

• a refinement of oldstyle forms
• thick to thin relationships were exaggerated 
• brackets were lightened

Examples: Baskerville, Bulmer, Century, Time Roman 

Fig 1.18 1775 Modern

1775 Modern 

English versions ( like Bell ) are also known as Scotch Romans and more closely resemble transitional forms.

• represents a further rationalisation of oldstyle letterform
• Serifs were unbracketed 
• contrast between thick and thin strokes were extreme 

Examples : Bell, Bodoni, Caledonia, Didot, Walbaum 

Fig 1.19 1825 Square Serif 

1825 Square Serif / Slab Serif 

• originally heavily bracketed serif
• little variation between thick and thin strokes 
• responded to the newly developed needs of adversiting for heavy type in commercial printing 
• brackets dropped as they evolved 

Examples: Clarendon, Memphis, Rockwell, Serifa

1900 San Serif 

• typefaces that eliminated serifs all together 
• became wide-spread until the beginning of the twentieth century 
• San serifs is referred to as grotesque 

Examples: Akzidenz Grotesk, Grotesk, Gill Sans, Frankli Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothic, Univers 

1990 Serif / Sans Serif 

 Fig 1.20 1990 Serif / Sans Serif 

• enlarges the notion of a family of typefaces to include both seirf and sans serif alphabets 

Examples: Rotis, Scala, Stone 

Week 2 - Typography: Text

Kerning and Letterspacing 

Fig. 2.1 difference between  Kerning and letterspacing

Fig. 2.2 Normal tracking, loose tracking and tight tracking

Kerning - adjusts the space between individual letterforms
Tracking - the addition and removal of space in a word or sentence 
Letterspacing ( tracking ) - adjusts spacing between the letters

Uppercase letterforms are drawn to be able to stand on their own, whereas lowercase letterforms require the counter form created between letters t maintain the line of reading 

Fig. 2.3 Normal tracking and loose tracking for uppercase and lowercase letters 

Fig. 2.4 Tight tracking 

Formatting Text

Fig. 2.5 Flush left 

Flush left 

This format most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but 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. 

Fig. 2.6 Centered 

Centered 

This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It transforms fields of text into shapes, thereby adding a pictorial quality to the material that is non-pictorial by nature. Because centered type creates such a strong shape on the page, it's important to amend line breaks so that the text does not appear too jagged. 

Fig. 2.7 Flush right 

Flush right

This format places emphasis on the end of a line as opposed to its start. It can be useful in situations ( like captions ) where the relationship between text and image might be ambiguous without a strong orientation to the right. 

Fig. 2.8 Justified

Justified

Like centering, this format imposes a symmetrical shape on the text. Itis achieved by expanding or reducing spaces between words and, sometimes, between letteers. The resulting openness of lines can occasionally produce ' rivers' of white space running vertically through the text. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible. 

Type that calls attention to itself before the reader can get to the actual words is simply interference and should be avoided. Quite simply if you see the type before you see the words, change the type.

Fig. 2.9 Difference between the effectiveness of typeforms in conveying words 

Texture

Fig. 2.10 Anatomy of a typeface 

Leading and Line Length

Fig. 2.11 Leading and Line Length  

Type size: Text type should be large enough to be read easily at armd lenth - imagine yourself holding a book in your lap. 

 

Leading:Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place, however type that is set too loosely creates striped patterns that distract the reader from the material at hand.

Line Length: Appropriate leading for text is as much a function of the line length as it is a question of type size and leading. Shorter lines require less leading; longer lines more. A good rule of thumb is to keep line length between 55-56 characters. Extremely long or short lines lengths impair reading. 

Fig. 2.12 Examples using Adobe Jenson Typeface 

Type Specimen Book

A type specimen book 

• shows samples of typefaces in various different sizes. 
• no one can make a reasonable choice of type without printed pages showing samples of typefaces at different sizes
• to provide an accurate reference for type, type size, type leading, type line length, etc.
• should create a field that can occupy a page or screen. 
• it is often useful to enlarge type to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below. 

Fig. 2.13 Sample type specimen sheet 

Week 3 - Typography: Text 

Indicating Paragraphs

'pilcrow' (¶)

Fig. 3.1 Example of 'pilcrow' 

line space between paragraphs 

Fig. 3.2 Example of line space between paragraphs 

When the line space is 12pt and the paragraph space is 12pt, this ensures cross- alignment across columns of text. 

Fig. 3.3 Line space vs Leading 

Indentation 

Fig. 3.4 Standard indentation 

Extended paragraphs 

Fig. 3.5 Extended paragraphs

Widows and Orphans 

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

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

Fig. 3.6 Widows and Orphans 

• both widows and orpahns are considered serious gaffes 
• make sure that no column of text starts with the last line of the preceding paragraph. 

Highlighting Text

Fig. 3.7 Highlighting texts with typefaces 

Fig. 3.8 Highlighting texts with colour 

Fig. 3.9 Highlighting texts with background colour

• When highlighting text by placing a field of clour at the back of the text, maintaining the left reading axis ( right example )  of the text ensures readability is at its best. 

Fig. 3.10 Highlighting texts with typographic elements 

Fig. 3.11 Highlighting texts with quotation marks  

Quotation marks, like bullets, can create a clear indent, breaking the left reading axis. Compare the indented quote at the top with the extended quote at the bottom. 

Fig. 3.12 Highlighting texts with quotation marks 

A prime is not a quote. the prime is an abbreviation for inches and feet. Due to the limited number of keys on a typewriter, they were subtituted, They were later known as ' dumb quotes '. 

Headline within Text

Fig. 3.13 A heads 

A heads 

A heads indicates a clear break between the topics within a section. In the above exa,ples ' A ' heads are set larger than the text, in small caps and in bold. 

Fig. 3.14 B heads 

B heads 

The B head here is subordinate to A heads. B heads indicate a new supporting argument or exmaple for the topic at hand. As such they should not interrupt the text as strongly as A heads do. Here the B heads are shown in small caps, italic, bold serif, and bold san serif. 

Fig. 3.15 C heads

C heads 

C heads highlight specific facets of material within B head text. They don't interrupt the flow of reading. C heads in this configuration are followed by at least an em space for visual separation. 

Fig. 3.16 Hierarchy in a sequence of subheads 

Putting together a sequence of subheads = hierarchy 

Cross Alighnment

Fig. 3.17 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. 

Week 4 - Typography: Basic 

Describing letterforms 

The Font

To work successfully with type, you should make sure that you are working with a full font and you should know how to use it. 

Uppercase

Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures. 

Lowercase

Lowercase letters include the same characters as uppercase.

 

Small Capitals 

Fig. 4.1 Small Capitals 

• Uppercase letterforms draw to the x-height of the typeface. 
• Found in serif fonts as part of what is often called expert set. 
• Do not confuse real small caps with those artificially generated. 

Uppercase Numerals 

Fig. 4.2 Uppercase Numerals 

• Also called lining figures
• same height as uppercase letters and all set to the same kerning width. 
• most successfully used with tubular material or in any situation that calls for uppercase letters. 

Lowercase Numerals 

Fig. 4.3 Lowercase Numerals 

• Known as old style figures or text figures 
• set to x-height with ascenders and descenders. 
• Far less common in sans serif type-faces than in serif. 

Italic 

Fig. 4.4 Italic 

Fig. 4.5 Italic vs Roman 

Italic small caps are almost always only roman. Italic refers back to 15th century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface. 

Punctuation, Miscellaneous characters 

 Fig. 4.6 Punctuation, Miscellaneous characters

Miscellaneous characters can change from typeface to typeface. It's important to ensure that all the characters are available in a typeface before choosing the appropriate type. 

Ornaments 

 Fig. 4.7 Ornaments

• used as flourishes in invitations or certificates 
• provided as a font in a larger typeface family. 
• only a few traditional or classical typefaces contain ornaments fonts as part of the entire typefaces family ( Adobe Caslon Pro )

Describing Typefaces

 Fig. 4.8 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: Characterised 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, and extremely condense styles are often called 'compressed'. 

Extended: An extended variation of a roman font. 

Comparing Typefaces

Fig. 4.9 Comparing typefaces 

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 'R' display a range of attitudes, some whimsical, some stately, some mechanical, others calligraphic some harmonious and some awkward. 

Week 5 - Typography: Letters

Understanding Letterforms

Fig. 5.1 Baskerville 'A'

The above 'A' is not symmetyrical. It is easy to see the two different stroke weights of the Baskerville stroke form; more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc. 

Fig. 5.2 Univers 'A'

The above 'A' may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. 

Both Baskerville and Univers demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive. 

Fig. 5.3 Helvetica and Univers 

The complexity of each individual letterform is neatly demonstrated by examining the lowercase 'a' of 2 seemingly similar sans-serif typefaces -  Helvetica and 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.  

Maintaining x-height

Fig. 5.4 Maintaining x-height 

The x-heioght generally describes the size of the lowercase letterforms. However 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. 

Form / Counterform

Fig. 5.5 Form / Counterform

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 the counters are handled the counters when you set type determines how well words hang together.

Contrast

Fig. 5.6  Contrast

Dynamic design is important and produced by applying elements of Graphic Design. 

Week 6 - Typography in Different Medium

Print Type Vs Screen Type

Print Type

Fig. 6.1 Print Type

• Versatile, easy-to-digest classic typeface, has neutrality and versatility that makes typesetting with it a breeze.
• designed intended to ensure that text is smooth, flowing and pleasant to read, even when set at small font size. 

Examples of good typeface for Print : Caslon, Garamond, Baskerville

Screen Type

                          Fig. 6.2 Screen Type

• Optimised and often modified to enhance readability and performance onscreen in a variety of digital environments. 
• This can include a taller x-height ( or reduced ascenders and descenders ), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs.
• More open spacing to improve character recognition and overall readability in the non- print environment, which can include the web, e-books, e-readers and mobile devices. 

Hyperactive Link / Hyperlink 

• a word, phrase, or image that you can click on to jump to a document or a new section within the current document. 
• found in nearly all web pages, allowing users to click their way from page to another. 

Font Size for Screen 

    Fig. 6.3 Differences between font size of screen (left) and printc (right) type

• 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. 

System Fonts for Screen/Web Safe Fonts 

• Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

Pixel Differential Between Devices 

Fig. 6.4 Pixel Differential Between Devices 

The screens used by our PCs, tablets, phones, and TVs are not only different sizes, but the text yousee on-screen differs in proportion too, because they have different sized pixels. Even within a single device class there will be a lot of variation. 

Static Vs Motion 

Static Typography

Fig. 6.5 Static Typography 

It has minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expression potential of dynamic properties. 

Motion Typography 

Fig. 6.6 Motion Typography

• temporal media offer typographers opportunities to "dramatise" type, for letterforms to become "fluid" and "kinetic".
  
• often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack.

Film title credits present typographic information over time, often bringing it to life through animation. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type. 

---

Instructions 

 

Task 1: Exercise 1 - Type Expression

For this exercise, we are assigned to create a type expression of the given words : cough, pop, wink, explode, grow.

Certain rules are to be followed to complete this task :

• no graphical elements are allowed  
• only black and white colours are allowed
• we have to download and install the 10 typefaces and apply on this task

Week 1 - Sketches 

These are the rough hand-drawn sketches that i did on week 1. The words that i picked are cough, pop, explode and wink. 

Fig. 7.1 " Cough" Type expression sketches, Week 1 (30.3.2022)

#1: I made 3 coughs just like the comic impression just like when someone coughs they cough 3 times.
#2: The idea of coughing hard and suffering from coughing, that's why there is many cough words, some are even inverted position.
#3: A megaphone shape, where the size of letters are enlarging letter by letter. 
#4: The letter 'O' is illustrated as a tongue, because tongue is also part of the mouth, so i figured i could do that.

Fig. 7.2 " Pop" Type expression sketches, Week 1 (30.03.2022)

#1: I did the comic or cartoon form of impression, where the "pop" word is expressed loudly

#2: Just a simple font that I sketched with curves at the end of every stroke. 

#3: I made the first letter 'P' into a lollipop and remain the other letters normal to let the lolipop 'p' be the focus. 

Fig. 7.3 " Explode" Type expression sketches, Week 1 (30.03.2022)

#1: I have illustrated the letter ' L ' as if a bomb and made the font into more round and bold. 

#2: I have enlarged the size of the word and made the letter ' O ' into a bomb. 

Fig. 7.4 " Wink" Type expression sketches, Week 1 (30.03.2022)

#1: I added 3 strokes on top of the letter ' I ' to act as the eyelashes while doing the "wink" action.
# 2: For both " wink", I have drawn 1 opened eye and 1 closed eye to replace the letter ' I , for the bottom "wink" i have made it in mirror form. It's as if both are in opposite form, the open eye with words in proper readable form, but the closed eye with words in mirror form. 

Week 2 - Type Expression Digitalisation 

Later, i designed the ideas that are my favourite for each word digitally using the Adobe Illustrator app. After considering Mr.Vinod's feedback, I did sketches digitally and try out the ideas he suggested. 

First Attempt: 

Fig. 7.5 Type expression digital sketches, Week 3 (11.04.2022)

Cough 

Fig. 7.6 First attempt on " Cough" Type expression digital sketches, Week 3 (11.04.2022)

Pop

Fig. 7.7 First attempt on " Pop" Type expression digital sketches, Week 3 (11.04.2022)

Explode

Fig. 7.8 First attempt on " Explode" Type expression digital sketches, Week 3 (11.04.2022)

Wink

Fig. 7.9 First attempt on " Wink" Type expression digital sketches, Week 3 (11.04.2022)

Second Attempt ( After week 3 progress discussion) : 

After receiving feedback from MrVinod, I have decided to rework on my "cough" and "pop". I have moved all my sketches to the template provided and reworked on the ones that i wasn't satisfied with. So, for  ' Pop' i went for the one and only sketch, 'Explode' i opt for the #3, 'Wink' i went for #1,and lastly for 'Cough' i did a new sketch. 

Fig. 7.10 Second attempt on all type expression digital sketches, Week 3 (15.04.2022)

Third attempt: 

After the week 3 progress discussion with Mr. Vinod, I have decided to change 'Cough' again, because in week 3 while we start working on animation, I realised that I couldn't get the desired result. 

 

Fig. 7.11 Third attempt on 'Cough' type expression digital sketches, Week 4 (22.04.2022)

Final Type Expression

Meanwhile for 'Pop', while i was working on the animation, I did some changes due to the spiral- looking 'p' doesn't give out the "pop" effect. Hence, i have changed it to a regular 'pop" type expression, then later on i will work on the animation to properly express the effect. 

Fig. 7.12 Final Type Expression - JPEG, Week 4 (23.04.2022)

 

Fig. 7.13 Final Type Expression - PDF, Week 4 (23.04.2022)

Week 3 - Type Expression: Animation

During class, Mr. Vinod gave us time to work on our animation. So i decided to opt for 'Cough' for my animation type expression. However, after several tries on working on 'Cough' animation type expression, I gave a shot at trying out 'Pop'.

Cough 

First Attempt 

Fig. 8.1 First attempt on ' Cough' Animation Type Expression,Week 3 (13.04.2022)

Fig. 8.2 First 'Cough' Animation Type Expression , Week 3 (13.04.2022)

Second Attempt

However, the result does not fully bring out the "cough" effect, it seems like they just appear. So i did a second attempt.

Fig. 8.3 Second 'Cough' Animation Type Expression, Week 3 (15.04.2022)

Pop

First attempt 

Fig. 8.4 First attempt on 'Pop' Animation Type Expression, Week 4 (18.04.2022)

Fig. 8.5 First 'Pop' Animation Type Expression, Week 4 (18.04.2022)

I feel it's too slow and it doesn't give the 'pop' effect. So i decided to make another attempt. 

Second attempt 

Fig. 8.6 Second attempt on 'Pop' Animation Type Expression, Week 4 (18.04.2022)

For this attempt, i decided to add the pop effect, however i feel the blinking O blinks too much. 

Third attempt 

Fig. 8.7 Third attempt on 'Pop' Animation Type Expression, Week 4 (18.04.2022)

So i have increased the speed as well as decrease the amount of blinking times of the blinking ' o '.

Fourth attempt 

Fig. 8.8 Fourth attempt on 'Pop' Animation Type Expression, Week 4 (18.04.2022)

Fifth Attempt 

After showing my fourth attempt to Mr. Vinod, i was not satisfied with my work and i wanted to perfect it, so even though i figured i could spare more time on working on this piece of work. I have taken down the spiral-looking 'p' and changed the font into the normal one, then i work on the animation in order to perfectly bring out the "pop" effect. 

Fig. 8.9  'Pop' Animation Type Expression Animation Frame Timeline, Week 4 (22.04.2022)

Fig. 8.10 Fifth attempt on 'Pop' Animation Type Expression, Week 4 (22.04.2022)

I have changed the 'pop' to a normal 'pop' using Futura Std Light and enhanced the effect of "pop".  

Final Animated Type Expression

Fig. 8.11 Final Animated 'Pop' Type Expression, Week 4 (22.04.2022)

Week 4 - Task 1 : Exercise 2 - Text Formatting

For Exercise 2, we were to create one final layout addressing different areas of text formatting, such as kerning, leading, paragraph spacing, alignment, etc. This exercise will help us practice and develop our skills in spatial arrangement and information hierarchy. We are to use the Adobe InDesign app for this exercise. Also, we were only allowed to use the only ten typefaces provided to complete this task. 

Part 1 

Fig. 9.1 Kerning and Tracking, Week 4 (23.04.2022)

While practising kerning and tracking, i sometimes get confused with the fonts and i had to take a look from a further distance to have a better view on it. I have tried to equalise the fonts used like semibold, bold, condensed, italic, roman, book, ultra condensed, in order for me to be able to learn the differences using different types of font from each typefaces.

Fig. 9.2  Kerning and Tracking, Week 4 (23.04.2022)

I have used 'false italic' to increase the italic fonts to look more slanted and cursive. 

Part 2

We are to format the article " I am Helvetica" by John Doe. After watching Mr. Vinod's lecture video, i have jotted down the important notes that we should use while formatting text. 

Notes: 

• Leading: +2 points of point size / +2.5 or +3 depending on the typeface. Typefaces have different x-height thus may extend over the baseline grid.
• Body text: Negative and positive space has to be equal ( middle gray value )
• Font size: 8-12 pts 
• Line length: 55-65 (body text), 35 (subtext) 
• Headings: double point size and leading of body text. 
• Paragraph spacing same as leading
• keep text width the same for the same text of information
• Try not to exceed +3/-3 for tracking to reduce ragging (line) 
• Turn off hyphenation. If turning on hyphenation, ensure there are not too many else tracking adjustments must be made.
• Either use left align or left justify. Though left alignment is preferred
• When using justify, more kerning and tracking need to be done to ensure there aren't many rivers ( large awkward spaces between the words ) 
• Maintain cross alignment with grids
• Avoid widows and orphans

First attempt 

                 Fig. 10.1 With kerning and tracking (left) and Without kerning and Tracking (right),                      Week 4 (23.04.2022)

From the comparison above, I can see that kerning and tracking is really important when formatting a text, as it provides tidiness and appeal, in terms of readability. 

Fig.10.2 Layout progress, Week 4 (23.04.2022)

Fig. 10.3 Layout #1, Week 4 (23.04.2022)

Fig. 10.4 Layout #2, Week 4 (23.04.2022)

Fig. 10.5 Layout #3, Week 4 (23.04.2022)

Fig. 10.6 Layout #4, Week 4 (23.04.2022)

Fig. 10.7 Layout #5, Week 4 (23.04.2022)

Fig. 10.8 Layout #6, Week 4 (23.04.2022)

Fig. 10.9 Tracking ,Week 4 (23.04.2022)

Adjusting tracking to reduce ragging.

Fig. 10.10 Leading ,Week 4 (23.04.2022)

Adjusting leading to ensure the texts are on the baseline grid.  

Final Type Format 

Fig. 10.11 Final Type Format- JPEG,Week 5 (27.04.2022)

Font: Bodoni Std
Typeface: Roman, Book Italic, Bold, Book
Font size: 28 pt (heading), 10 pt (body text), 9 pt (sub-heading and caption)
Leading: 24 pt, 12 pt, 11 pt
Paragraph Spacing: 12 pt
Average characters per line: 55 ~ 62
Alignment: Left
Margins: 12.7mm (top, left, right), 22mm (bottom)
Columns: 4
Gutter (for columns) : 5 mm 

Fig. 10.12 Final Type Format - PDF ,Week 5 (27.04.2022)

Fig. 10.13 Final Type Format ( Grid ) - PDF ,Week 5 (27.04.2022)

Feedback

Week 2 ( 06.04.2022 ) 

General feedback: You must not add any graphics or illustrations to ur sketches because it is typography. Try avoiding it. 

Specific feedback: Mr. Vinod liked the idea of my ' pop ' sketch because it looked like a lollipop and also the cough #2. He also suggested some opinion on how to perfect it. He told me which one i could opt for the next step.

Week 3 ( 13.04.2022 )

Mr. Vinod told me that my 'cough' doesn't give out the impression of coughing, no matter how many " cough " words i have, the main point of animation is to mimic the reality. 

Week 4 ( 20.04.2022 )

Specific feedback:When I showed my fourth attempt of 'pop' animation to Mr. Vinod, he thinks that it could be better. Mr Vinod said:"what does the spiral-looking 'P' do when i wanted to show the concept of a lollipop, when i also wanted to show the 'pop' effect. 

" Sometimes adding on extra move and making it complicated, or make it special doesn't really bring out the effect. Simplicity works in way, being simple is what it is."

Mr Vinod suggested changing the font to a normal 'pop' and also showed some samples done by seniors for me as reference. 

Week 5 ( 27.04.2022 )

General feedback:  For Text Formatting, do not put the heading in the middle. Avoid orphans. . Export both final outcomes in grid form and in the normal form. Remember to export the images are exported in 300 ppi.

Specific feedback:  For E-portfolio, make sure the sketch images are taken under sunlights where there are no shadows. Make sure the PDF files uploaded are accessible for everyone. Overall, E-portfolio is fine. 

Reflection

Experience

Throughout this exercise, I definitely have gained new knowledge and got closer to understanding design. During this exercise, I had a tough time dealing with the type expression, especially animation. I was struggling with animation for weeks as the results i did was not satisfying enough to submit. I had to redo the frames, editing each frame to ensure every detail is shown in order to make the gif looks real. Because animation is about mimicking reality, so it was a challenge for me to come up with unique ideas to avoid having similar work with my classmates. It definitely is frustrating when my work is not satisfying and does not meet my expectations as coming up with unique ideas and to make it stand out is not as easy as a piece of cake, and of course, I gave a lot of time and thoughts into this exercise in order to perfect it . Hence, I did a lot of attempts, trying out new styles to make things look appealing, sometimes even adding on extra moves, however, I have come to understand that simplicity is beauty too, sometimes when the work is simple enough to convey the message to people then it works, sometimes adding on extra moves might disturb its natural beauty. 

For text formatting exercise, it is also quite challenging for me as well, as i have to be the designer and also the audience at the same time, i have to think twice about whether this works well for others or just me myself, it also took me some time to do some research to come up with different compositions. Overall, it was an interesting and challenging task for me, as i have learnt to use Adobe Illustrator, InDesign and Photoshop to do typography, a lot of functions that can be done digitally and i was able to experience it on my own so i dont have to always wonder how work is done by designers out there. In my mind, all the curiosities and question marks are gone but are filled with experience and lessons i have learnt. 

Observation 

In this exercise, i have noticed that typography has a huge relation with design elements, such as visual hierarchy, balancing, harmony, shapes and etc. For example, from the text formatting exercise, i can see that visual hierarchy is shown from the title to body text to the picture. Also, i have realised that while doing animation, each movement requires a frame, and to do a certain effect requires a lot of frames only to get the desired result. 

Findings 

Never have i ever thought that there were so many rules in typography that are to be followed such as the font size, leading, and paragraph spacing and etc. These are correlated with each other; how type relates to grids and images from page to page, how type sizes relate to each other, how pictures relate to each other and how parts relate to the whole.

 I realised that I have to remember every single rules and detail and try to explore more ideas on how to improve my work, I always have to find validation from my peers and lecturers which i think i should expose myself to more typography related work in order to be more confident with my own design.  To sum it up , every detail matters and will affect the final result, therefore we must have a lot of patience and can't mess around when comes to Typography. 

Further Reading

Fig. 11.1 The Vignelli Canon 

Mr. Vinod has recommended some books for us to read to understand more about Typography, and i have chosen the book 'The Vignelli Canon' by Massimo Vignelli.

Fig. 11.2 The Vignelli Canon, Semantics (pg 10&11) 

I totally agree with the writer about Semantics. I think that whenever we design something it has got to have a purpose, its meaning. Then from there, we start to do research on the assignment that we are working on to get a better understanding about the project. After having our research done, we only have a correct direction that leads us to the final result. All these are processes in designing work. In my own experience, the more findings i do and suggestions i received from my peers, i feel connected and the ideas will just pop out in my mind, because just like what Semantics means, in design, means to understand the subject in all aspect; to relate the subject to the sender and receiver, which is something important as we have to connect ourselves with people out there, only we are able to design something that receivers are able to accept. 

Fig. 11.3 The Vignelli Canon, Syntactics (pg 12) 

From this, I can relate it to Task 2: Text Formatting, as all the syntactics elements revolve around each other such as how type relates to grids and images from page to page, font size, and leading will affect each other if we have chosen the wrong pts, the text will not be on the baseline grid. 

Fig. 11.4 The Vignelli Canon, Discipline (pg 16) 

Indeed, a designer requires a lot of commitment and determination as it is a job that requires long progress work. One has to be able to accept criticisms and judgements and then work over and over again just to get a satisfactory result. It does not allow procrastination, irresponsibility and laziness but requires constant effort and determination. I feel a person's attitude reflects on their work.

Fig. 11.5 The Vignelli Canon, Ambiguity (pg 16) 

I always tend to enhance the expression of the design which is good, it helps to enhance the appearance and outstands from the others, however sometimes it will backfire and turns out to be too extra and uncessary things will disturb the original meaning of the piece of work. Hence, an appropriate amount of ambiguity should be considered while doing design work, or sometimes simplicity is good to go.