TYPOGRAPHY _TASK 1 EXERCISES 1&2

 ______________
TYPOGRAPHY 
29 August 2022 - 3 October 2022/ Week 1 - Week 6
Christine Tan Yuen Yan / 0344039
Typography GCD60104 / Bachelor of Design (Hons) in Creative Media 
Task 1 Exercise 1 & 2 (Type Expression & Text Formatting)
__________

Images were taken from:https://blog.shillingtoneducation.com/what-is-typography/

Week 1 - Lecture 1 
On 29 August, in my first Typography class with Mr Vinod, Mr Vinod explained the Module Information Booklet, rules during the course, what are expectations and assignments & assessment guidelines. Furthermore, at the end of our class, we still have ample time hence each of the students was required to stand up and introduce ourselves to the class to get to know each other more. Personally, I think it's better to have the section so we can know each other 

Font: The individual font or weight within the typeface.
Typeface: The entire family of fonts/weights that share similar characteristics and styles. 
 
Typography: Development and TImeline
1) The early stage of letter form development: Phoenician to Roman
Initially writing meant scratching into wet clay with a sharpened stick or carving into stone with a chisel. The forms of uppercase letterforms (for nearly 2000 years the only letterforms) can be seen to have evolved out of these tools and materials. At their core, uppercase forms are simple combinations of straight lines and pieces of circles as the materials and tools of early writing required. 

figure 1.1, Phoenician to Roman (week 1 29.8.2022)

figure 1.2, Early letter form of Phenician to Roman

figure 1.3 Evolution from the Phoenician letter  (week1 29.8.2022)


Writing direction: 
Phoenician: Right to left. 
Greeks: 'Boustrophedon' (how the ox ploughs), read alternately from right to left and left to right. The same goes for the direction of the letterforms. 
Like the Phoenicians, the Greeks did not use letter space or punctuation.


figure 1.4, Direction of writing for the Greeks, 'Boustrophedon'  (week1 29.8.2022)


figure 1.5, Greeks letters  (week 1 29.9.2022)

figure 1.6, Greek fragment, stone engraving (date unknown), (week1 29.8.2022)

2) Hand script from 3rd - 10th- century C.E. 

figure 1.7, 4th/5th century: Square capitals, (week1 29.8.2022)

Square capitals: Written letterforms found in Roman monuments. These forms have serifs added to the finish of the main strokes.



figure 1.8, Late 3rd - mid 4th century: Rustic capitals, (week 1 29.9.2022)

Rustic capitals: Compressed version of square capitals, allowed for twice as many words on a sheet of parchment and took far less to write. Faster and easier to do, but was slightly harder to read due to its compressed nature. 



figure 1.9, 4th century: Roman cursive, (week1 29.8.2022)

Roman cursive: Written for everyday transactions, forms were simplified for speed. Roman cursive is the beginning of lowercase letterforms. 



figure 1.10, 4th - 5th century: Uncials, (week 1 29.9.2022)

Uncials incorporated some aspects of the Roman cursive hand. Uncials - small letters. The broad forms of uncials are more readable at small sizes than rustic capitals. 



figure 1.11, C.500: Half - uncials, (week1 29.8.2022) 

Half-uncials mark the formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet. 



figure 1.12, C. 925: Caliline minuscule, (week1 29.8.2022)

Charlemagne's, 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), minuscule, capitalization and punctuation which set the standard for calligraphy for a century. 



Blackletter to Gutenberg's type 

figure 1.13, C. 1300 Blackletter (Textura), (week1 29.8.2022)

With the dissolution of Charlemagne's empire came regional variations upon Alcuin's script. In northern Europe, a condensed strongly vertical letterform known as Blackletter or textura gained popularity. In the south, a rounder more open hand gained popularity, called 'rotunda;. The humanistic script in Italy is based on Alcuin's minuscule. 

3. Text type classification (Dates of origin approximated to the nearest quarter century)


figure 1.14, 1450 Blackletter,(week1 29.8.2022) 
Examples: Cloister Black; Goudy Text  


figure 1.15, 1475 Oldstyle,(week1 29.8.2022) 
Examples: Bembo; Caslon; Dante; Garamond; Janson; Jenson; Palatino


figure 1.16, 1500 Italic, (week1 29.8.2022) 
Since the 16th century, all text typefaces have been designed with accompanying italic forms.  

figure 1.17, 1550 Script, (week1 29.8.2022) 
Forms now range from formal and traditional to casual and contemporary. Examples: Kuenstler Script; Mistral; Snell Roundhand.


figure 1.18, 1750 Transitional, (week1 29.8.2022) 
Thick-to-thin relationships were exaggerated and brackets were lightened. Examples: Baskerville; Bulmer; Century; Time Roman 


figure 1.19, 1775 Modern,(week1 29.8.2022) 
This style represents a further rationalization of old-style letterforms. Serifs were unbracketed, and the contrast between thick and thin strokes was extreme. English versions (like Beli) are also known as Scotch Romans and more closely resemble transitional forms. Example: Bell; Bodoni; Caledonia; Didol; Walbaum


figrue 1.20, 1825 Square Srrif/ Slab Serif, (week1 29.8.2022) 
With little variation between thick and thin strokes, these faces responded to the newly developed needs of advertising for heavy type in commercial; printing. As they evolved, the brackets were dropped. Example: Clarendon; Memphis; Rockwell; Serifa 

figure 1.21, Sans Serif, (week 1 29.9.2022)
Variation tended towards either humanist forms (Gill Sans) or rigidly geometric (Futura). Strokes were feared to suggest the calligraphy origins of the form (Optimal). Sans serif is also referred to as grotesque (from the German word Grotesk) and Gothic.
Examples: Akzidenx Grotesk; Grotesk; Gill Sans; Franklin Gathic; Frutiger; Futura; Helvetica; Meta; News Gothic; Optima; Syntax; Trade Gothic; Unicers. 


figure 1.22, 1990 Serif/ Sans Serif, (week1 29.8.2022)                
this style enlarges the notion of a family or typefaces to include both serif and sans serif alphabets (and often stages between the two). Examples: Rotis; Scala; Stone 


Week 2_Lecture 2 
Typography: Text

1. Kerning and Letterspacing 
Kerning: Automatic adjustment of space between letters. 
Tracking: The addition and removal of space in a word or sentence. 
Letter spacing: To add space between letters.

             
                       figure 2.1, without kerning                          figure 2.2, With kerning


            
                           figure 2.3, Without kerning                            figure 2.4, with kerning


              
figure 2.5, Normal  tracking, loose tracking and tight tracking, (week 2,5.9.2022)


2. Formatting Text 

figure 2.6, Flush left, (week 2,5.9.2022)

Flush left: Closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends whenever the last words on the line ends. Spaces between words are consistent throughout the text, allowing the type of creating an even grey value. 


figure 2.7, Centered, (week 2,5.9.2022)

Centered: Imposes symmetry, equal value and weight to both ends of any line. It transforms fields of text into shapes, thereby adding a pictorial quality. Centred 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. 


figure 2.8, Flush right (week 2,5.9.2022)

Flush right: Place 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. 


figure 2.9, Justified (week 2,5.9.2022)

Justified: Imposes symmetrical shape on the text, achieved by expanding or reducing spaces between words and sometimes, between letters. The resulting openness of line can occasionally produce 'rivers' of white space running vertically through the text. Careful attention to line breaks and hyphens is required to amend this problem. 



3. Texture 

figure 2.10, Anatomy of a typeface (week 2,5.9.2022)


figure 2,11, DIfferent typefaces, different grey values (week 2,5.9.2022)

Compositional requirement: Ideal text to have a middle grey value. Different typefaces have different grey values, some lighter, some darker. The best choice would be to choose the middle grey value. 


4. Leading and Line Length 
Type size: The text type should be large enough to be read easily at arm's length.


figure 2.12, Leading and line length (week 2,5.9.2022)

Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily lose track. A type that is set too loosely creates striped patterns that cause distractions. 

Line Length: Shorter lines require less leading; longer lines are more. Keep the line length between 55 - 65 characters. Extremely long or short line lengths impair reading, 



5. Type Specimen Book 
A type specimen book shows samples of typefaces in various different sizes. It provides an accurate reference for type, type size, type leading, type line length, etc. 

figure 2.13 Sample Type Specimen Sheet,(week 2,5.9.2022)


Week 3 _ Lecture 3 
6. Indicating Paragraphs 
Pilcrow (§): A holdover from medieval manuscripts seldom use today.
line space (leading*): Between the paragraphs. If the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text. 

figure 3.1 Line spacing vs Leading, (week 3,12.9.2022)

figure 3.2, Standard indentation,(week 3,12.9.2022)

Standard Indentation: Indent is the same size of the line spacing or the same as the point size of the text. 

figure 3.3, Extended paragraphs, (week 3,12.9.2022) 

Extended paragraphs create unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it. 



7. Widows and Orphans 

figure 3.4, Widows and orphans, (week 3,12.9.2022)

Widow: Short line of the type left alone at the end of a column of text. 
Orphans: Short line of the type left alone at the start of a new column, 



8. Highlighting Text 

figure 3.5, Highlighting text with quotation marks, (week 3,12.9.2022)

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.

figure 3.6, Prime and quote, (week 3,12.9.2022)

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 substituted, They were later known as 'dumb quotes '. 


9. Headline within Text 

figure 3.7, A heads, (week 3,12.9.2022)

The A head indicates a clear break between the topics within a section. 

figure 3.8, B heads, (week 3,12.9.2022) 

The B head here is subordinate to the A head. B heads indicate a new supporting argument or example 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. 

figure 3.9, C heads, (week 3,12.9.2022)

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

figure 3.10, Hierarchy in a sequence of subheads, (week 3,12.9.2022)


10. Cross Alignment 

figure 3.11, Cross Alignment, (week 3,12.9.2022)

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 _ Lecture 4 
Typography _ Basic 

1. Describing letterforms
Baseline: The imaginary line is the visual 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'. 
Strokes: Any line that defines the basic letterform. 

     
         figure 4.1 letterforms and strokes, (week 4,19.9.2022)

figure 4.2, Apex / Vertex, (week 4,19.9.2022)

Apex / Vertex: The point created by joining two diagonal stems (apex above and vertex below) 

figure 4.3, Arm, (week 4,19.9.2022) 

Arm: Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y). 

figure 4.4, Ascender, (week 4,19.9.2022)

Ascender: The portion of the stem of a lowercase letterform that projects above the median. 

    
        
figure 4.5, Bard                                                              figure 4.6, Beak                               
Barb: The half-serif finish on                   Beak: The half-serif finish on horizontal arms     
some curved stroke. 

figure 4.7, Bowl, (week 4,19.9.2022)

Bowl: The rounded form that describes a counter. The bowl may be either open or closed. 

figure 4.8, describes letterforms. (week 4,19.9.2022)

2. The font 
Uppercase and lowercase, small capitalism Uppercase and lowercase numerals, Italic, Punctuation and Miscellaneous characters, Ornaments. 

figure 4.9, Small capitals, (week 4,19.9.2022)
 
Uppercase letterforms draw to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called an expert set. 

figure 4.10, Uppercase numerals/lining figures. (week 4,19.9.2022)
Same height and set the same kerning width. 

figure 4.11, Lowercase numerals/old-style figures or text figures. (week 4,19.9.2022)

Set to x-height with ascenders. Best used when using upper and lowercase letterforms. 


figure 4.12, Italic. (week 4,19.9.2022)

Italics refer back to 15th-century Italian cursive handwriting. Oblique is typically based on the roman form of the typeface. 

figure 4.13, Italic vs Roman. (week 3,12.9.2022)

figure 4.14, Ornaments. (week 4,19.9.2022)

Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Caslon Pro.) 


3. Describing Typefaces 

figure 4.15, Describing typefaces. (week 4,19.9.2022)

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 the 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: An extended variation of a roman font. 


4. Comparing Typefaces 

figure 4.16, Comparing typefaces. (week 4,19.9.2022)                  

Differences in x-height, line weight, form stroke widths and feeling. Feelings connote specific use and expression. Examining typefaces allows us to know how we feel about certain types and see the appropriateness of type choices. 


Week 5 _ Lecture  5 
Typography_Letters 

1. Understanding letterforms 


figure 5.1, Univers 'A' . (week 5, 26.9.2022) 

The uppercase letterforms may appear symmetrical, but close examination shows that the width of the left slope is thinner than the right stroke. Both Baskerville (previous) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive. 

figure 5.2, Baskerville 'A' (week 5, 26.9.2022) 

The uppercase letterforms suggest symmetry, but it is not symmetrical. Two different stroke weights of the Baskerville stroke; more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc. 

figure 5.3, Helvetica vs Univers. (week 5, 26.9.2022)  

The complexity of each individual letterform is neatly demonstrated by examining the lowercase 'a' of two 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. 


2. Maintaining x-height


figure 5.4, Median and baseline. (week 5, 26.9.2022) 

X-height: The size of the lowercase letterforms. 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. 


3. Form / Counterform 

                                       
figure 5.5, Form/Counterform. (week 5, 26.9.2022)  

Counterform (or counter) - the space describes and is 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. 


4. Contrast 
figure 5.6, Contrast. (week 5, 26.9.2022) 


Week 6_Lecture 6 
Typography in Different Medium 

1. Print Type Vs Screen Type 

Figure 6.1 Type for print. (week 5, 28.9.2022)                 

The type was designed for reading from print long before the screen. It's the designer's job to ensure that the text is smooth, and flowing. and pleasant to read. Good typefaces for print: Caslon, Garamond, Baskerville. Because of their characteristics which are elegant and intellectual but also highly readable when set in small font size. 

figure 6.2, Type for screen. (week 5, 28.9.2022)    

Typefaces intended for use on the web are optimized and often modified to enhance readability and performance on screen 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. 

Another important adjustment - especially for typefaces intended for smaller sizes - is more open spacing. All of these factors serve to improve character recognition and overall readability in the non-profit 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 new document or a new selection within the current document. Found on 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. 

System Fonts for Screen/ Web Safe Fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdane, Georgia, Palatino, Garamond. 

figure 6.3, Pixel difference between devices. (week 5, 28.9.2022)    

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. 

figure 6.4, Billboard showing static typography.(week 5, 28.9.2022)    

Instruction 
<iframe src="https://drive.google.com/file/d/1ztqJbm_B1AheCMoZOAoubo-s4DpXzzem/preview" width="640" height="480" allow="autoplay"></iframe> 

Task 1 Exercise 1 - Type of Expression
We gave out our ideas in class and voted on 6 words in total which are Tired, Freese, Slam, pain, Sticky and Screech. We need to select 4 words, design and express the word. I selected the words Tired, Freese, Slam, Screech and Sticky. 

1) Sketches 
My idea for my drafts is 
Tired#1 is as if the tired is hanging on the baseline. 
Tired #2 I was trying to demonstrate the tiredness as if no energy thus I created the wave with the word. 
Screech #1 the idea was like a high-pitch tone as when screech it means to like something that is high pitch volume and it is a bit harsh. 
Screech #2 as the idea was to showcase the screeching voice coming out of the mouth. 

figure 1.1, tired#1, tired #2, screech#1, screech#2 (Week 1 , 29.8.2022)

2) Sketches 

figure 1.2, slam#1, slam#2, sticky #1, sticky#2 (Week 1 , 29.8.2022)
My idea for 
Slam#1 I was trying to show that the word M is the letter that can showcase a loud sound when a door was slammed. 
Slam#2 is that normally slam the first impression is that slam on the door hence I created slam#1 as a more direct expression that a slam would happen when someone slammed on their door. 
Sticky#1 the idea was to express the letter as if they are unseparated hence neither vertically nor horizontally they will always stick together. 
Sticky#2 the idea is similar to Sticky#1 just the font is designed differently. 
 

Week 2: Digitalization 
We are assigned to create a digital word for every four words that we have chosen, and hereby below is the digital work that I have tried.

1) Digitalization sketch 
Actually, we were told to export the artboard so it will look more presentable, however, I made a mistake as I did not save it, hence the file was lost, and fortunately, I screenshot the drafts before, thus the presence of figure 1.3 to figure 1.6 does not presentable. 
figure 1.3, sticky#1, slam#1 (Week 2, 5.9.2022)

The idea for sticky #1 was trying to show that the words are sticking together, and the slam #1 I was trying to present the door by using the word 'slam' as generally when we think of slam it's either the anime "slam dunk' or the expression way of 'slam the door' 

                               
figure1.4, slam#2, slam#3, (Week (Week 2, 5.9.2022)

Slam #2 is to present a door slammed but the font is smaller and the Slam #3 is to show that the word 'M' also is a loud expression of slam. 

figure 1.5, tired#1, tired #2, (Week (Week 2, 5.9.2022)

My idea for tired #1 was trying to present that we are out of energy and cannot walk straight so we need to lie down instantly that kind of expression. For tired#2, it is like when we are tired we will be very lazy, very dizzy that kind of feeling. 

figure 1.6, screech#1, screech#2(Week 2, 5.9.2022)

For screech #1, my idea was to present a car that stops instantly or drives recklessly and leaves a tyre mark behind. My draft idea for screech #2 is to present a car and the screech is the sound of the tyre. 

figure 1.7 readjustment of tired#1, tired#2, screech#1, screech#2 (Week 2, 8.9.2022)

After receiving feedback from Mr Vinod, I changed the font given by Mr Vinod, for screech#1 I changed the font and for screech#2 I changed it into a tyre shape. 

figure 1.8, readjustment of slam#1, slam#2, slam#3, sticky#1, sticky#2 (Week 2, 8.9.2022)

figure 1.9, re-adjustment of 'tired' #1 & 2 (week 3, 15.9.2022) 

After receiving feedback from Mr Vinod, I decided to change the alignment of tired. 

Final Type Expression in JPEG  
figure 1.10, Final Outcome in JPEG (Week 3, 15.9.2022) 

Final Type Expression in PDF
       
figure 1.11Final Type Expression in PDF, (Week 3, 15.9.2022) 

Week 3 Task Type Expression Animation 
 
attempt gif#1 screech (Week 3, 12.9.2022)

My first attempt at a gif is 'screech' as I took the advice that the word 'screech' can be like presenting a tyre mark, hence tried to animate it, but I feel that something is amiss. The gif is lacking the impact of 'screech'. 

animation timeline 'screech'  (Week 3, 12.9.2022)
The 'gif' used 19 frames because I wanted the animation to be fast so as to have the effect of burning rubber. 

I feel that the word 'screech' does not work out well, so I tried on another which is 'tired'. 
attempt gif #2, 'tired' ,(Week 3, 12.9.2022)
The 'tired' seems more represented as "falling down so it does not fit well the word, the 'tired' should fall on the baseline and not fall right away to the bottom. Thus it can be changed to at least fall under the baseline moreover the 'tired' at the beginning is too wavey, hence is not suitable. Can change the word not begin with a wavey form, an attempt to present the word 'tired' begin on centre. 

animation timeline gif #2 'tired' (Week 3, 12.9.2022)
I used 14 frames to show the effect that 'tired' wave it till down and feel exhausted hence all the letters fell down. 

attempt gif #3, 'tired' (Week 4, 23.9.2022)

The expression is too slow so I re-adjust it faster like changing the timeline either to 'no delay' or just '0.1 seconds' 

Final Animated Type Expression 
Final Animated Type Expression. (Week 5, 26.9.2022)

Final Animated Type Expression _ Timeline (Week 5, 26.9.2022)

Week 4 Task 1: Exercise 2 - Text Formatting: Kerning and Tracking 

For the exercise, we are assigned to create one final layout by practising different areas of text formatting such as Kerning, Leading, Paragraph Spacing Alignment, etc, this exercise will help us to have a better understanding and enhance our skills in the paragraphing arrangement. We will practice the exercise with the application; Adobe Indesign. 

For the exercise, we are only allowed to use the ten type of font that is given by Mr Vinod which is Bembo Std, ITC Garamond Std, Janson Text LT Std, Adobe Caslon Pro, ITC New Baskerville Std, Bodoni Std, Serifa Std, Futura Std, Gill Sans and Univers LT Std.  

Lecture 1/4 of Text Formatting: Kerning and Tracking

figure 3.1 Text formatting without kerning,
week 4 (24/9/2022)

figure 3.2, before and after kerning and point change for Adobe Caslon (Italic)
(week 4, 24/9/2022)

             figure 3.3, before and after kerning and point change for Bodoni, 
(week 4, 24/9/2022)

             figure 3.4, before and after kerning and point change for Futura Std (light), 
(week 4, 24/9/2022)

             figure 3.5, before and after kerning and point change for  ITC New Baskerville Std
(week 4, 24/9/2022)

             figure 3.6, before and after kerning and point change for  ITC Garamond Std
(week 4, 24/9/2022) 

figure 3.7, before and after kerning and point change for  Janson Text Lt Std
(week 4, 24/9/2022)

             figure 3.8, before and after kerning and point change for  Serifa  Std
(week 4, 24/9/2022)

             figure 3.9, Text formatting with kerning, (week 4, 24/9/2022) 


Lecture 2/4 of Text Formatting 
Notes that Mr Vinod highlighted during lectures and class. 
Create a new document on 'file', 
- To create the margins and columns go to the layout 'Margin & Column' and the size of the 'top' 'bottom' 'left' 'right' so we can choose either top and bottom one of it is different or the left and right, pick either one. 
- Leading: +2 points of point size/ +2.5 or +3 depending on the typeface. Typefaces have different x-heights and thus may extend over the baseline grid. 
-Body text: it can be negative and positive space has to be equal. 
- Line length: it should be around 55 - 65 for body text and 35 for subtext. 
- Heading: Double point size and leading of body text. 
- Paragraph spacing should be the same as the leading.
-Keep text width the same for the same text of information. If they differ it will confuse the audience, will distract their attention and think is a separate piece of information.
-Do not exceed +3 or -3 for tracking to reduce ragging (line).
-Turn off hyphenation. If turning on hyphenation, ensure there are not too many else of tracking adjustments must be made.
- We can either use left alight or left justify. Though left alignment is preferred. 
- Do not use justify, and ensure there are not many rivers (large awkward space between the words). 
- Maintain the cross alignment.
- Avoid widows and orphans. 

figure 3.10, Layout Progress, (Week 4 25/9/2022) 

The one that has a star on it is the final layout that I have decided on. 

Font: Janson Text Lt Std 
Type Size: 11pt (body text), 35pt (heading)
Leading: 10.1  (body text), 42pt (heading) 
Paragraph spacing: 4mm
Line length: 54pt 
Alignment: Left align-justify 

Margins: 12.9mm
Columns: 2 
Gutter: 5mm

Final Text Formatting with grids in JPEG 
figure 3.11, Final Task 1:Exercise 2 with grids in jpeg, (week 4, 25/9/2022) 

Final Text Formatting without grids in JPEG
figure 3.11, Final Task 1:Exercise 2 without grids in jpeg, (week 4, 25/9/2022)

Final Text Formatting with grids in PDF
figure 3.11, Final Task 1:Exercise 2 with grids in pdf, (week 4, 25/9/2022)

Final Text Formatting_without grids in PDF
figure 3.11, Final Task 1:Exercise 2 - without grids in pdf, (week 4, 25/9/2022)

Feedback 

Week 1 
Feedback_Type Expression' 
On 5th September. it is our second class for 'Typography' and we were asked by Mr Vinod to present our sketch work on the platform; Zoom, hence everyone took turns to present their work. For my work, I received feedback from Mr Vinoor, hence for the word 'screech' the expression can be like a tyre scratch, thus for the 'screech' font can be from light font to bold font.  Besides that, the word 'screech' illustrated by the mouth does not work out as the word does not fit the shape of the mouth and it is too illustrative, Moreover, as I was listening to Mr Vinor giving feedback to other classmates, I realised I should create more variety of options. 

Week 2_Type Exspression 
Feedback from Mr Vinod: Some words are not using the font that is given hence need to change it, 
Tired#1 It does not seem like it is tired hence not acceptable.
Tired#2 Okay, Sticky#1 okay.
Slam#1 is okay. 
Slam#2 is a good try to create a door by using the words.
Slam#3 the font is not used that is given, but it is okay. 
Screech#1 the word is not using the font given hence needs to change however the ideas are good as the font is from light grey to black.
Screech#2 can be improvised as creating a tyre shape instead of typing out the word and creating the shape on top of it.  

Week 3_Type Expression 
Feedback from Mr Vinod: The animation of tired can be readjusted as instead of falling down to the floor it can be falling on the baseline due to if the words fall straight from high to down it will be more like expressing the word "falling" and not "tired" 

Week 4 
Feedback from Mr Vinod: 
General feedback: My blog is not completed yet and the lecture notes are not completed needed to be updated. And the order of my blog needs to be readjusted.
Specific feedback - the animation for 'tired' try to make it straight and when it falls not fall from high to down due to it looking like the word 'falling'. instead of 'tired' hence it should fall below the baseline.
Week 5
General feedback: The format of the paper should be A4, and should not have colour images, font should be the same. 
Specific feedback: Need to adjust the paragraph spacing, the body text is small (can be bigger), (can replace the image to word), and the body text is too close to the image

Reflection
Experience 
In my first class, we were assigned homework that we need to pick 4 words that is discussed among the class and sketch our idea out, following on week 2, finally, we can digitalize the words that is chosen by ourselves, it was quite a challenge as before the class I knew nothing about Adobe Illustration hence I need to families myself with Adobe illustration, I even search some tutorial video through youtube. Although the process is a bit hectic, 'fun' too along aside from the process, absorbing something that I have not encountered before is thrilling as well. The most frustrating part was in week 2, after presenting my sketch to Mr Vinod, I realised my font was wrong it was not the 10 types of font given by Mr Vinod, it is my mistakes that I did not read properly on the instruction, thus I need to redo all of my sketches, change the font and do some adjustment from the feedback. This exercise opened up my mind, sometimes word itself has tons of ways to express it. 

The exercise of Kerning is very interesting as I always thought once we typed sentences and that's it, there isn't anything to readjust except the font itself, however, turns out it is not just the font but also kerning too, as while fonts may be optimized to beautify particular combinations of letters, compromises are unavoidable, and even the best automated kerning cannot eliminate the awkward spacing. 

Observations  
Throughout this exercise, I understand the font families and using related fonts it can help develop unity in designs, and respect font integrity, as we should never distort the shape or natural dimensions of a font unless it's being used for a specific purpose. Fonts are carefully designed, and distorting them destroys the harmony that others spent months or even years perfecting. 

Findings 
I find that I need to pay more attention to the details as Typography is using words itself to express the message that an author is trying to deliver to his/her audience, To satisfy audiences, we need to also critique our work strictly and always be open-minded on someone feedbacks, Our lecturer Mr Vinod, his mantra is "To determine either the layout is good or not, can half-close your eyes."


Further Reading 


A book recommended readings in the module information booklet, I did explore with the book "Typographic designs: Form and Communication" I released that the impact of an effective typographic message cannot be easily measured due to typographic ephemera are rhetorical, influencing the context of social, political and economic events. 

Reference:
Carter, R, Day, Meggs, P.B, Maxa S & Sanders, M (2015). Typographic design: Form and Communication. Hoboken, New Jersey: John Wiley & Sons, Inc. 

Chapter 6: A Multidimensional Language (page 124) 
Figure1.1, Chapter 6: A Multidimensional Language 
'Les mots en liberte futuristes. (Designer: Filippo Marinetti)

The Futurist manifesto, written by the Italian poet Filippo Marinetti in 1909, profoundly influenced thinking in Europe and Russia. Futurism praised technology, violence, danger, movement, and speed. Futurist typography, known as "free typography," demonstrated these ideas in a highly expressive manner. In figure 1.1, The child of a scream was expressed in bold type, and quick impressions were intensified through Italics. Letters and words raced across the page in dynamic motion. 

Figure1.2, Chapter 6: A Multidimensional Language 
Cover of the first issue of Der Dada (Editor: Raoul Hausmann) 

The typographic message is verbal, visual, and vocal. While typography is read and interpreted verbally, it may also be viewed and interpreted visually, heard and interpreted audibly. It is a dynamic communication medium. The typographic message became a multifaceted and expressive form of communication. Typography needs to be read, seen, heard, felt and experienced. 

figure 1.3, Solidarity logotype (Desinger: Jerry Janiszewki)

The symbol of the solidarity expressed by Polish workers, the social statements made with graffiti in urban environments and all the typography on billboards aimed at passing motorists all operate as purposeful messages directed towards a predetermined audience within a specific context. 

As a dynamic representation of verbal language, typography must communicate. This functional role is fulfilled when the receiver of a typographic message clearly and accurately understands what is in the mind of the transmitter. Thus the most effective typographic messages result from the combination of logic and intuitive judgement. 

figure 1.3, (Designer: Donna Funk) 

Two terms important to the understanding of signs are denotation and connotation. When considering the meaning of typographic signs, denotation refers to objective meaning. Typographic signs are both verbal and visual. 

The book presents variations of characteristics in letterforms and how designers show their ideas and deliver their messages to audiences.



Comments