Typography - Task 1 Exercise

27.8.2021- 24.9.2021 / Week 1 - Week 5
Hansel Ribowo / 0850008 / Bachelor of Design in Creative Media
Typography
Task 1 Excercise

---

Lectures

Week 1: Introduction To the Module and E-Portofolio

We began our first class with an introduction of the module of our upcoming activities. Mr Vinod open the class by explaining the facebook group that we should join to know the latest news from him, after that he explain about module information booklet and he told us to make E-portofolio and he explain to us how to make the good one by watching hes video from youtube. At the end of the class he gave us task to choose 4 words and from facebook poll and we had make 3 sketch from each words.

Week 2: Type Expression

Typography: Basic/Describing letterforms

• Baseline: The imaginary line the visual base of the letter forms.
• 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.
• Aper / Vertex: The point created by joining two diagonal stems (apex above and vertex below).
• Arm: Short Strokes off the stem of the letterform, either horizontal (E,F,L) or 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.
• Bowl: The rounded from that describes a counter. The bowl may be either open or closed.
• Bracket: The transition between the serif and the stem.
• Cross Bar: The horizontal stroke in a letterform that joins two stems together.
• Crotch: The interior space where two strokes meet.
• Ear: The store extending out from the main stem or body of the letterform.
• Em/en: Origonally refering to the width of an uppercase M, and em is now the distance equal to the size of the tyface. An en is half size of an em. Most often used to describe em/en spaces and em/en dashes.
• Final: The rounded non-serif terminal to a stroke.
• Ligature: The character formed by the combination of two or more letterform.
• Link: The stroke that connects the bowl and the loop of a lowercase G.
• Loop: in some typefaces, the bowl created in descender of the lowercase G.
• Serif: The right-angled or oblique foot at the end of the stroke.
• Shoulder: The curved stroke that is nor part of the bowl.
• Spine: The curved stem of the S.
• Spur: The extension the articulates the junction of the curved and rectilinear stroke.
• Stem: The significant vertical of oblique stroke.
• Stress: The orientation of the lettrform, indecated by the thin in round forms.
• Swash: The flourish that extends the stroke of the letterform.
• Tail: The curved diagonal stroke at the finish of certain letterform.
• Terminal: The self-contained finish of a stroke without a sent.

Typography: Basic/The Font

• Uppercase: Capital letters, including certain accented vowels, the C cedilla and n tilde,and the a/e and o/e logatures.
• Lowercase: Lowercase letters include the same characters as uppercase.
• Small Capitals: 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 expert set.
• Uppercase Numerals: also called lining figures, these numerals are the same height as uppercase letters ad are all set to the same kerning widht
• Lowercase Numerals: Also known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders.
• Italic: Most fonts today are producted with a matching italic. The forms in a italic refer back to fifteenth century italian cursive handwriting. Oblique are typically based on the roman form of the typeface.
• Punctuation, miscellaneous characters: Although all fonts contain standerd punctuation marks, miscellaneus to be characters can change from typeface to typeface.
• Ornaments: Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family.

Typography: Basic/Describing typeface

• Roman: The letterform is so called because the uppercase forms are derived form inscriptions of Roman monuments.
• Italic: named for fifteenth century italian handwriting on which the forms are based.
• Boldface: Characterized by a thicker stroke than a roman form. Depending upon the relative stroke widths within the typeface.
• Light: A lighter stroke than the roman form. Even lighter strokes are called 'thin'.

Week 3: Type Expression and Animation

For week 3 we began our class with reviewing our final digital typhography and Mr Vinod give us a lot of feedback and after that Mr Vinod teach us how to do animation with adobe illustrator and photoshop from the video that he gave us.

Week 4: Text Formating

For our week 4 we learn about formating a text and we should see youtube video how to formating a text

Text Formating 1:4 (Kerning and Tracking)

• Kerning: Its not letter spacing bbut refers to the automatic adjustment between letters.

Fig 1.1 Before Kerning, Week 4 (22/9/2021)

Fig 1.2 After Kerning, Week 4 (22/9/2021)

• Tracking : Theres 3 Tracking. Normal tracking, loose tracking, and tight tracking.

Note:

1. Font size (8–12)
2. Line Length (55–65/50–60 characters)
3. Text Leading (2, 2.5, 3 points larger than font size)
4. Ragging (left alignment) / Rivers (Left Justification)
5. Cross Alignment
6. No Widows / Orphans

Fig 1.3 Before Using Kerning, Week 4 (22/9/2021)

Fig 1.4 After Using Kerning, Week 4 (22/9/2021)

• Flush Left: 
  - Space beetwen word are consistent through the text.
  - Most closely mirrors the asymetrical experience hand writting.
• Centered:
  - It's important to amend line breaks so that the text does not appear too jagged.
  - it transforms fields of text into shapes, thereby adding a pictorial quality to material that is non-
  pictorial by nature.
  - This format imposes symmetry upon the text.
• Flush Right:
  - Can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right.
• Justified:
  - This format imposes a symmetrical shape on the text.
  - The resulting openness of lines can occasionally produce 'rivers' of white spaces running vertically through the text.
• Text / Texture
  - A good typographer has to know which typefaces best suits the message at hand.
  - Type with relatively generous x-height or relatively heavier stroke width produces a darker mass on the page than smaller x-height or lighter stroke.

Typography: Leading and Line Length

• Type Size
  - Text type should be large enough to be read easily at arms length - imagine yourself holding a book in your lap.
• Leading
  - Type that is set too loosely creates stripped 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 question of type size and leading.
  - A good rule of thumb is to keep line length between 55-65 characters.
• Type Specimen Book
  - A Type specimen book is to provide an accurate reference for type, type  size, type leading, type line length.
  - The best screen is still an electronic approx. of the printed page.
  - Shows samples of typefaces. You can only determine choice on screen when its final version is to read on screen.

Typography: Indicating Paragraphs

• Linespace: The base line of one sentence  to the other sentence.
• Leading : Space between 2 sentences.
• Standart Indentention 
  - Used to save some spaces.
  - Don't use ragging on the right (remember to always use justify if you're using indentation).
• Window
  - Is a short line of type left alone at the end of a column of text.
  - Break line endings through out paragraph so that the last line of paragraph is not noticeably short.
• Orphan
  - Is a short line of type left alone at the start of new column.
• Highlighting Text 
  - Making it bold, italic, change the typeface or has a different colors.
  - When changing the typeface, you need to adjust depends of the point size.
  - You can also create box of text to highlight text.
  - It is also necessary occasionally to place certain typographic elements outside the left margin of a column of type to maintain a strong reading axis.
• Headline Within Text
  - Make sure to signify the relative importance of these heads and their relationship to each other.
  

---

Instructions

---

Practical

Week 1: Type Expression Sketch

For the first week exercises, Mr Vinod told us to choose 3 words and theres 1 mandatory word "Terror" from the facebook poll and make 3 sketches from each of those latters.

The words that i choose:

• Terror
• Layers
• Glitch
• Water

The sketches that i make :

Fig 2.1 Terror Sketches, week 1 (30/8/2021)

Fig 2.2 Layers Sketches, week 1 (30/8/2021)

Fig 2.3 Glitch Sketches, week 1 (30/8/2021)

Fig 2.4 Water Sketches, Week 1 (30/8/2021)

So here i try to make the sketch for the 4 words in paper.

Week 2: Type Expression Digital

For week 2 Mr Vinod told us to do the digital design from our sketches

Fig 2.5 Digital Design, week 2 (6/9/2021)

Here i make the sketch to digital with adobe illustrator.

Fig 2.6 Digital Design Fixed, Week 2 (6/9/2021)

Here the result after i get a feedback i change the terror and layers design.

Final Digital Design

Fig 2.7 Final Digital 4 Words Design, Week 2 (6/9/2021)

Fig 2.8 Final 4 Words Digital Design, Week 2 (6/9/2021)

Week 3: Type Expression and Animation

For week 2 Mr Vinod told us to choose 1 from the 4 words for my animation and i choose glitch for that

Fig 2.9 Glitch Animation, Week 3 (16/9/2021)

Fig 2.10 Animation Timeline, Week 3 (16/9/2021)

Here i choose glitch to be animate becauese i think its more simple than the others and this how much fram did i use to make the animation.

Final Animation

Fig 2.11 Final Animation 'Glitch', Week 3 (17/9/2021)

Fig 2.12 Final Animatin, Week 3 (17/9/2021)

Week 4:

For our week 4 our lecture gave us a task to formating a text

Fig 2.13 Layout Sketch 1, Week 4 (22/9/2021)

Fig 2.14 Layout Sketch 2, Week 4 (22/9/2021)

Fig 2.15 Layout Sketch 3, Week 4 (22/9/2021)

Fig 2.16 Layout Sketch 4, Week 4 (22/9/2021)

Fonts: Adobe Carlson Pro (Bold, Bold Italic, Italic).

Point Size: 24 pt(Heading) , 10pt(subheading) , 10pt (body text)

Leading: 11 pt(body text), 22 pt(heading).

Allignment: Left align

Here i try to do a diffrent layout for my text formating and i choose the last one for my layout.

Final Text Formating

Fig 2.17 Final Text Formating, Week 4 (22/9/2021)

Fig 2.18 Final Text Formating, Week 4 (22/9/2021)

---

Feedback

Week 1: 

General Feedback: Mr Vinod want us to watch the e-portofolio first so we can make a good portofolio with a proper structure, and Mr Vinod suggest to do not use black color for the background.

Week 2: 

General Feedback: We need to update the blog every week before the lecture,and we should take note to every feedback that we get.

Specific Feedback: all the design is good but the Layers design can explore more, and my terror design missing 1 r.

Week 3:

General Feedback: We need to show the expresion of the word that we design and we should not use too much distortion in our design.

Specifik Feedback: The word glitch layers and terror is lack of exploration and i need to recreate it, for my blog the sketch its hard to see.

Week 4:

General Feedback: When we learning dont be affraid of getting critics from the lecture or other students because critics will make our design better.

---

Reflection

Week 1:

 Exercise: The typography class were unlike other class, everything seem to be more structural and organized. At first i feel a little bit confused with all the information about the e-portofolio, but after i do it one by one and watch the tutorial video from the lecture and i feel the class not that bored anymore.

Observations: I observed that in typography class i need to be more pay attention to the detail, i learned that i must watch the lectures videos more often and i need to note the important thing from the lecture videos.

Findings: I find that in typography i need to get use to be more pay attention to the detail in every thing to make a good e-portofolio, and i find that taking notes from the lecture video or while Mr Vinod says in class really help to make a good documentation and get the important things.

Week 2: 

Exercise: The digital typography design is so diffrent than the traditional one and at first i think it is so hard to do in digital but, when i try and learning to do it i think its not that hard and i think its fun.

Observations: I observed that in digital typography i need to read more that i usually do and i need to searching on internet to get better at it.

Findings; I find that digital typography design is more complicated but if i learn from mr Vinod video from youtube and always do more research so i can understand it.

Week 3: 

Exercise: The animation typography design is more simple than i thought but at first i really confused how to make it but after i watch video that Mr Vinod give us i can do it easily.

Observation: I observed that in animation typography i need to fucus on every movement to make my animation move smoothly and describe the word that i choose.

Findings: I find that animation typography is look simple but its complicated but i can learn from Mr Vinod video to understand it.

Week 4:

For the text formating task is a bit diffrent from the other task because we must arrange a text with adobe indesign cc, at first i think its simple to arrange a good composition for the text but Mr Vinod give us youtube video how to arrange the text properly so after that i know its not that simple to arrange a text with aplikation but its fun to do and because the video i can understand how to arrange properly.

---

Further Reading

Fig 3.1 Typographic Design : Form and Communication (2015)

Reference:

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

Fig 3.2 Pg. 76 Typographic Design : Form and Communication (2015)

Grids may consist of primary and secondary divisions of space. For example, the grid used in this book consists of two columns as the dominant structure, with an optional structure of six columns (note the visible grid lines on this page). Concurrent grids not only provide added flexibility, they also enable the designer to layer typographic elements, achieving the illusion of three-dimensional space.