Typography - Task 1: Exercise 1 & 2

29/8/2022 - 26/9/2022 / Week 1 - Week 5
Azriq Anwar Bin Saprudin / 0353272
Typography / Bachelor of Design (Hons) in Creative Media
Task 3: Type Design and Communication

---

LECTURES

Week 1 - Lecture 1

Brief on Module Information Booklet. Mr. Vinod introduces the Typography Facebook group that contains the resources needed. Also the class were setting up the e-portfolio.

Typography: Development and Timeline

1. Early letterform development: Phoenician to Roman

Fig. 1.1 Evolution from Phoenician letter, Week 1 29/8/2022

Initially, scratching into wet clay with pointed stick or cutting into stone with a chisel were the first methods of writing. These tools and materials may be observed to have developed into the shapes of uppercase letterforms. Uppercase forms are essentially a basic mix of straight lines and circles, as necessitated by the materials and instruments of early writing.

Fig. 1.2 Letterform development from Phoenician to Greek to Roman, Week 1 29/8/2022

Simplified versions were introduced known as cursive letterforms. These were a starting of lowercase letterforms due to its result of speed.

Fig. 1.3 Uncials, Week 1 29/8/2022

Fig. 1.4 Half-Uncials, Week 1 29/8/2022

Uncials, often known as tiny letters, borrow aspects from Roman cursive. This specific letterform has both caps and lowercase letters. The beginning of lowercase letterforms is also marked by half-uncials.

Fig. 1.5 Caloline Miniscule, Week 1 29/8/2022

For a century, the monks replicated the words in uppercase, lowercase, capitalisation, and punctuation, establishing the handwriting standard.

Fig. 1.6 Blackletter (Textura), Week 1 29/8/2022

Blackletter was a condensed, highly vertical letterform popular throughout northern Europe. In the south, the 'rotunda hand, which is rounder and more open, became popular.

Fig. 1.7 Line Bible, Johann Gutenberg, Mainz, Week 1 29/8/2022

Northern European Blackletter was made by Gutenberg on pages that closely duplicated the scribe's work.

Week 2 - Lecture 2

Mr. Vinod went through the class's type expression sketches. He then gave some feedback on them.

Describing Letterforms

1. Baseline - imaginary line the visual base of the letterforms.

2. Median - imaginary line defining the x-height of letterforms.

3. X-height - the height of any typeface in lowercase.

4. Stroke - any line that makes a basic letterform.

5. Apex/Vertex - where a point is made by connecting two diagonal stems (apex above and vertex below)

6. Arm - short strokes off the letter's stem (E,F,L) or inclined upward (K,Y)

7. Ascender - a part of the stem that goes above the median

8. Barb - half-serif on a few curved stroke letters (C,G,S)

9. Beak - same to barb but has horizontal arms. (E,T,L)

10. Bowl - rounded form that describes a counter which may be either open or closed.

11. Bracket - a transition between serif and stem.

12. Cross Bar - horizontal stroke that connects two stems together. (A,H)

13. Cross Stroke - horizontal stroke that cuts across lowercase letters. (f,t)

14. Crotch - the inner area where two strokes meet (K,V)

15. Descender - the stem that goes below the baseline.

16. Ear - the stroke thats grows out form the main stem depending on which typeface is used. 

17. Em/En - Em is the distance equal to the size of the typeface. An en is half the size of an em.

18. Finial - non- serif curve to a stroke

19. Leg - short-stroke off the arm of the letter. (L,K,R)

20. Ligature - conjoined part of two letters when they overlap each other.

21. Link - a stroke that joins the bowl and the loop of the small letter 'g'.

22. Loop - bowl formed when the descender touches a stroke of the same letter.

23. Serif - foot at the end of a stroke (A,T,M)

24. Shoulder - the curved stroke which is separated from the owl (h,n)

25. Spine - arched stem (S)

26. Spur - forms the junction of a curvilinear & rectilinear stroke. (b, q, G)

27. Stem - foundation stroke of a letterform.

28. Stress - angle of a letterform. Some are slanted as they follow the nature of handwriting.

29. Swash - the flick or curved stroke which extends from a letter.

30. Tail - same as swash but shorter.

31. Terminal -  finish with the absence of a serif.

Font Terms

1. Typeface - an individual weight of a letter stroke (e.g regular, bold or italic)

2. Type family - includes different typefaces in it

3. Small capitals - uppercase letterforms with an x-height (an uppercase with the size of lowercase letters)

Week 3 - Lecture 3

Pre-recorded lecture (PART 1):

Terms

1. Kerning - an automatic adjustment of space between letters. It is mainly used for uppercase letterings.
2. Tracking - to add or remove space in words or sentences.

Fig 1.9 Types of Tracking, Week 3 12/9/2022

Fig 2.1 Types of Tracking, Week 3 12/9/2022

Text Formatting

1. Flush Left - closely resembles the asymmetrical way of handwriting. Each line begins at the same spot but terminates at the end of the previous line's last word. The spacing between words is uniform throughout the text, which allows the type to have a consistent grey hue.

2. Centered - because symmetry gives the impression that the text is in the shape of a shape, it's crucial to have line breaks between each phrase. Centered text, on the other hand, might be difficult to read, so use it sparingly.

3. Flush Right - because reading from the jagged point is difficult, do not utilize it for long periods of time. Because there is no obvious indication of letter orientation, it is best suited to captions.

4. Justified - increasing/decreasing letter spacing achieves symmetrical, justified results. However, in order to keep the alignment regular, 'rivers' (large gaps between some words) will be generated. Line breaks and hyphenation are employed to overcome this problem.

Leading & Line Length

1. Type Size - text type that is large enough to read within arm's length.

2. Leading - the reader can easily loose their place when text is set too closely which leads to a vertical eye movement.

3. Line Length - longer line length reduces readability. The guideline is to keep it in between 55-65 characters. 

Pre-recorded Lecture (PART 2):

Indicating Paragraphs

1. Pilcrow - indicates a paragraph break.

2. Indentation - the size of the indent is the same as the line spacing. When the text alignment is justified, indentation works best. Otherwise, the text would have a ragged edge on both the left and right sides, making it seem messy.

3. Extended Paragraphs - typically used in academic writing.

Fig 2.2 Example of Extended Paragraphs, Week 3 12/9/2022

How to Determine Paragraph Spacing 

1. Line Space (Leading) - the distance between the descender of one line and the descender of the following line is called line spacing. The leading of a paragraph is the same as the spacing between paragraphs. When there are two columns of text, this ensures cross-alignment. Because leading is 12 points, paragraph spacing is also 12 points.

Fig 2.3 Line Spacing VS Leading, Week 3 12/9/2022

Widows & Orphans 

1. Widows - a short line of text at the end of a column.

2. Orphans - a short line of a text at the beginning of a column

Fig 2.4 Example of Widows & Orphans, Week 3 12/9/2022

Solutions For Widows & Orphans

1. Widows/Smoothen Ragged Edges - make a forced split in the line. Widows for right-aligned text are permitted, however it is preferable not to do so. On the other hand, justified text is inexcusable.

2. Orphans - reduce the length of the text column.

Highlight Text 

We can emphasize a certain text by:

1. Using italics

2. Making Text Bold

3. Changing the color of the text

4. Changing the Typeface & Bolding the Text

Fig 2.5 Changing Point Size of the Paragraph from a Different Type Family, Week 3 12/9/2022

5. Placing a field of color at the back of the text

Fig 2.6 Comparison Between Extending or Identing a Column of Type, Week 3 12/9/2022

Headings Within Text

1. Heading 

Fig 2.7 Format for Headings, Week 3 12/9/2022

The headers are bolded and bigger than the content. They are written in tiny capital letters. As demonstrated in the third illustration, it can also be stretched out from the text column.

2. Sub-Headings 

Fig 2.8 Format for Sub-Headings, Week 3 12/9/2022

The leading of the paragraphs is followed by the sub-headings. To make them stand out, they might be written in tiny capital letters, italicized, and bolded.

3. Sub-sub Headings 

Fig 2.9 Format for Sub-sub Headings, Week 3 12/9/2022

The flow of reading is not disrupted by sub-sub headings. They can be in small capital letters, italicized, and bolded, just like the subheadings. To distinguish them from the standard paragraph of text, an EM space (hit spacebar twice) is added after the sub-sub heading.

Cross Alignment

Fig 3.1 Cross Alignment of Highlighted Text & Body of Text, Week 3 12/9/2022

Cross Alignments assists on guiding vertical rhythms when reading.

When both subheadings and the body of text are present, we may accomplish cross alignment by doubling the leading from the body of text. For example, if the text's body leading is 12 points, the subheading on the left might be 24 points. Another thing to keep in mind is that the baseline of both the headers and the body of the text should begin at the same position in order to achieve cross alignment.

Week 4 - Lecture 4

Pre-recorded lecture (Lecture Video 1.4-4.4):

Text Formatting

Kerning - modifies the distance between each letterform.

Tracking - adjusts the spacing over the whole range of letters in a consistent manner. Track no more than three times (stay within the range of -15 to 15)

When To Kern?

Kern is only required if you've run across unusual shapes or counter gaps between the letterforms.

Important Requirements

Kerning/Tracking should always be set to 5/1000 em when using Keyboard Increments. With simply a click of the arrow, you may have additional control over the spacing. A regular margin does not add to the appeal of your paper or layout. As a result, we may either adjust the bottom margin to a quarter of the page or the top margin to a quarter of the page.

Font Size - A 10 to 12 point font size is recommended for A3 and A4 papers.

Line Length - Each phrase should be between 50 and 65 characters long.

Leading - 2 to 3 points more than the font size.

Paragraph Spacing - same value as leading.

The goal of text formatting is to smooth out the jagged edges rather than create a straight line. It's not a good idea to leave justified because if the kerning isn't done correctly, there will be a lot of rivers. Turning on the hyphenation option would address the problem in that situation. Too much hyphenation, on the other hand, isn't excellent work. Text alignments like Align Left, Left Justified, and Centre Justified are preferable. The spacing between the columns must be increased by a few millimetres when using full justified. The left-aligned text has no such restrictions since, thanks to the ragging, it already has an organic spacing.

How To Determine A Good Typeset Document?

Evaluate if the text's white space or positive/negative space is evenly distributed. A canvas with equally scattered colour might also be an indication of strong design work. It is unforgivable to use widows and orphans in your text formatting and should be avoided at all costs.

---

INSTRUCTIONS

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

Task 1: Exercise 1 - Type Expression

For the first exercise, we were given the choice to choose from a set of words that were suggested by the class. The few words that were considered were tired, freeze, sticky, screech, slam, and pain. Using illustrative elements were not allowed unless it is a minor one. We are supposed to express the meaning of the words only using letter forms.

1. Sketches

Fig. 1.1 Type Expression sketches, Week 1 29/8/2022

The words I chose were tired, sticky, slam and pain. The sketches shown above are my rough sketches drawn on Photoshop. The ones I find nice from each word would be tired 2 and 4, sticky 1 and 2, slam 1 and 3, and pain 1.

2. Digitisation

Fig.1.2  Attempt on digitizing the words pain, sticky, tired and slam, Week 2 5/9/2022

Fig. xx shows the attempt made during the practical session during Week 2.

Pain: To emphasize particularly on the 'a' and 'i', where I try to condone the letter 'a' is trying to pierce through the letter 'i' showing pain.

Sticky: To show how all the letters would stick to each other through the stems of the letters.

Tired: This one is to show how most of the letters from the word is resting or leaning towards 'r'.

Slam: I try to show that the 's' is the hand holding a bat, supposedly the letter 'l', are slamming off the other two letters which are 'a' and 'm'.

Fig 1.3 Final Type Expression JPEG, Week 3 12/9/2022

Specific amendments on the words tired and slam.

Tired: Instead of having the remaining words leaning against the letter 'r', only the first two letters are leaning against it.

Slam: Reworked on slam by having the letter 's' enlarged, trying to convey how the letter is slamming against the ground while the remaining letters are jumping off into the air.

 

Fig 1.4 Final Type Expression PDF, Week 3 12/9/22

3. Animating Type Expression

Fig 1.5 Attempt on Pain Text Expression Animation, Week 3 12/9/2022

The word that I chose to animate is based on my Pain Type expression. Following the concept I tried to convey on my sketch was to have the letter 'a' slowing reversing back and accelerating towards the letter 'i' to show how the letter 'a' is piercing through the letter. 

Fig 1.6 Animating Pain on Photoshop, Week 3 12/9/22

Fig 1.7 Final Type Animation, Week 3 12/9/2022

Instead of having the letter 'a' be a part of the word pain, I tried bringing the letter from outside the canvas.

Task 1: Exercise 2 - Text Formatting

Lecture 1/4 of Text Formatting: Kerning and Tracking

Fig 2.1 Text Formatting with Kerning, Week 4 19/9/2022

Lecture 2/4 of Text Formatting: Type Formatting

Fig 2.2 Process in InDesign, Week 4 19/9/2022

Fig 2.3 Layout 1, Week 4 19/9/2022

Fig 2.4 Layout 2, Week 4 19/9/2022

Fig 2.5 Layout 3, Week 4 19/9/2022 

Fig 2.6 Layout 4, Week 4 19/9/2022

Fig 2.7 Final Layout JPEG with grids, Week 5 26/9/2022

Fig 2.8 Final Layout JPEG, Week 5 26/9/2022

Fig 2.9 Final Layout PDF with grids, Week 5 26/9/2022

Fig 3.1 Final Layout PDF, Week 5 29/2/2022

Layout Details

Font - Heading: Bembo Std Regular

        - Sub-heading and text: Bembo Std Semibold Italic
Type size - Heading: 36pt, Sub-heading: 14pt, Text: 10pt

Leading - Heading: 22pt, Sub-heading: 11pt, Text: 11pt

Paragraph spacing - 3.881mm

Characters per line - Average 50 - 60

Alignment - Text: Left alignment, Heading and Sub-heading: Left Alignment

Margins: 12.7mm

Column: 2

Gutter: 5mm

---

FEEDBACK

Week 2

General feedback: Sketches are rudimentary. Try to elaborate the sketches more during digitization.

Week 3

General Feedback: The letters r, e, and d in the word tired should remain as is. Let the letters T and I emphasize the meaning of the word by having them leaning against the rest of the letters. Specific Feedback: Rework on slam. Pain and sticky works fine.

Week 4

General Feedback: All is fine. No amendments needed for the pain gif.

---

REFLECTIONS

Experience

Starting off the exercise with type expression has given me a thought on how you can express a word by only using letters. It's quite challenging as you cannot use any graphic elements to help express them. I appreciate that Mr. Vinod provides honest critique to provide students a clear direction to enhance our work.

Observations

I saw that there are so many ways on how to express a word by arranging them in a certain order to make it look effective. The necessary tools and knowledge are always on Mr. Vinod's video tutorials on Youtube when in need for refreshment on information.

Findings

I find that typography has so many rules to learn; which is important in the world of graphic design. To improve in typography is essentially like everything else that we do, which is practicing. While kerning, tracking, and cross-alignment assist on the micro side of improving the job overall, changes in typefaces can help text better portray the theme. 

---

FURTHER READING

Fig 4.1 The  Vignelli Canon by Massimo Vignelli (2010)

Fig 4.2 The Vignelli Canon, Page 10

Semantics: To have meaning when making a design. Every design needs to have a purpose, and every aspect carries that meaning or has a specific purpose towards a specific audience.

Fig 4.3 The Vignelli Canon, Page 20

Ambiguity: In this page I learned that ambiguity is something to emphasize a design's expression and having result that is satisfying to the viewer and also the designer. The need of control is important when using ambiguity as one can have the possibility of failing when attempting a design.