Typography / Task1: Exercises 1 & 2

2.9.2022 - 30.9.2022 (Week 1- Week 5)
Loke Yan Ling / 0344602 
Typography / Bachelor of Design (Hons) in Creative Media
Task 1:
Exercises 1: Type Expression
Exercises 2: Text Formatting

---

LECTURES

Week 1 / Development

Week 2 /  Basic

1. Describing letterforms

Figure 1.1 Describing letterforms

Stroke: Any line that defines the basic letterform.

Apex/ 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 form 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.

Cross Stroke: The horizontal stroke that found in letters 'f' and 't'.

Crotch: The interior space where two strokes meet.

Ear: The stroke extending out from the main stem or body of the letterform.

Em/en: Originally refers to the width of an uppercase M, and em is now the distance equal to the size of the typeface. Whereas the 'en' is half the size of an 'em'.

Ligature: The character formed by the combination of two or more letterforms.

Link: The stroke that connects the bowl and the loop of a lowercase G.

Spine: The curved stem of the S.

Stress: The orientation of the letterform, indicated by the thin stroke in round forms.

Swash: The flourish that extends the stroke of the letterform.

Terminal: The self-contained finish of a stroke without a serif.

2. The Font

Uppercase - Capital letters
Lowercase - Lowercase letters 
Small Capitals - Uppercase letterforms draw to the x-height of the typeface.                                                               Primarily found in serif fonts, often called "expert set".
Uppercase Numerals - same height with uppercase letters and kerning width.
Lowercase Numerals - set to x-height with ascenders and descenders.
Miscellaneous characters - Change from typeface to typeface.
Ornaments - Used as flourishes in invitations or certificates.

3. Describing Typeface

Figure 2.1 Describing Typefaces

Italic - refers to the 15th century Italian handwriting
Roman - upper case forms are derived from Roman monuments
Oblique - based on the roman form typefaces
Boldface - thicker stroke than Roman form
Light - lighter stroke than Roman form
Condense - condensed version of Roman
Extended - extended version of Roman

Week 3 / Text Part 1

1. Kerning and Letter spacing Tracking

Figure 3.1 Kerning & Letterspacing

Kerning - adjustment of space between letters

Letter spacing - add space between the letters

Tracking -  additional and removal of space in a word or sentence 

Figure 3,2 Tracking

Normal Tracking - letter spacing and kerning
Loose Tracking - letter space (reduce readability)
Tight Tracking - kerning

Letter spacing uppercase is more or less acceptable, but letterspacing lowercase letter is not acceptable because the kerning and letterspacing of lowercase already design and consider within the text. 

2. Leading and Line Length

Setting the text type allows people to read it easily and for an extended period of time. In addition, like photography, the font of a field should occupy the page. The sequence of the text type is fix.

• Type size - Should be large enough to be read easily at arms length
• Leading - Text is set tightly encourages vertical eye movement (2-3 pint size larger than the font)
• Line Length - A good rule of thumb is to keep line length between 55-65 characters

3. Formatting Text 

Figure 3.3 Flush Left

Flush Left - Closely mirror the asymmetrical experience of handwriting. Spaces between words are consistent throughput the text which create an even gray value. It ended with the right ragging (jagged edge point end of the aligned text)

Figure 3.4 Centered

Centered - This format assigning equal value and weight to both ends of any line and ragged on both left and right.

Figure 3.5 Flush Right

Flush Right - Used to emphasis the end of a line as opposed to its start, useful in some specific situation such as captions. It have the ragging on the left.

Figure 3.6 Justified

Justified - The format is similar to center but does not have the ragged on both left and right. It is achieved by expanding or reducing the space between words.

4.Texture

Figure 3.7 Anatomy of A Typeface

Middle gray value typeface is ideal gray value which increases the readability. Figure 3.8 depicts how different typefaces have varying grey values.

Figure 3.8 Comparison of typeface with gray values

Week 4 / Text Part 2

1.Indicating Paragraphs 

Pilcrow - a holdover from medieval manuscripts seldom use today

Leading - a line space with 12pt then the paragraph space is 12pt

                 ensures cross-alignment across columns of text

Figure 4.1 Standard Indentation

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

Extended Indentation - creates unusually wide columns of text

Figure 4.2 Extended Indentation

2. Widows and Orphans

Figure 4.3 Widow and orphan

Widow - short line of type left alone at the end of a column of text

Orphan - short line of type left alone at the start of new column

3. Highlighting Text

Different kinds of emphasis require different kinds of contrast.

Figure 4.4 Prime and quote

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.

4. Headline within text

Figure 4.5 A heads

A head indicates a clear break between the topics within a section with a small caps, bold and larger text,

Figure 4.6 B head

B head (Fig 4.9) is subordinate to A heads. B head indicate a new supporting argument or example for the topic at hand with small caps, italic, bold serif and bold san serif. They did not interrupt the text strongly as A heads do.

Figure 4.7 C head

C head highlights specific facets of material within b head text with small caps, italics, serif bold and san serif bold. They not materially interrupt the flow of reading and followed by at least an em space for visual separation in Fig4.10 configuration.

5. Cross Alignment

Figure 4.8 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 5 / Letters

1. Understanding letterforms

Figure 5.1 Baskerville 'A'

The uppercase letter forms Fig 5.1 suggest symmetry but not. Two different stroke weights of the Baskerville stroke are form; more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Figure 5.2 Univers 'A'

The uppercase letterforms may appear symmetrical, but 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 internally harmonious and individually expressive.

Figure 5.3 Comparison between Helvetica & Univers

The complexity of each individual letterform is neatly demonstrated by examining the lowercase ‘a’ of two seemingly similar sans-serif typefaces—Helvetica and Univers. The stems of the letterforms finish and the bowls meet the stems quickly reveals the palpable difference in character between the two.

2. Understanding letterforms

Figure 5.4 Median & baseline

Curved stroke such as in 's' must rise above the median or sink below the baseline in order to appear to be the same size s the vertical and horizontal strokes they adjoin.

3. Maintaining x-height

Figure 5.5 Counterform

Letterforms is developing a sensitivity to the counterform (or counter)—the space describes and often contained , by the strokes of the form. When letters are joined to form words, the counterforms includes the spaces between them. 

Figure 5.6 Counterform of Helvetica and Baskerville

Examine the letterform in detail is the most rewarding way to understand the from. Examination also provide a good feel for how the balance between form and counter is achieved and palpable sense of letterform's unique characteristics which gives a glimpse into the process of letter-making

4. Contrast

Figure 5.7 Contrast

The basic principle of graphic design apply directly to typography which is based on a format devised by Rudi Ruegg. 

---

INSTRUCTIONS

---

Task 1:

Exercise 1: Type Expression

Sketches

Without any delay, we start to vote on the words that will be used in our exercise and here the final votes of the words. So, we have asked to choose 4 words from the list below:

• Fire
• Shatter
• Tall 
• Ring
• Freak
• Whisper

For this week, we need to sketch the type expression out. I chose the words that popped into my head with the idea and I sketched down those idea and developed them in more different ways. The scanned document that I sketch from a notebook was too blur, so I did a resketch on iPad again and reorganize them with 3 design for each word I select. Word I choose: Fire, Ring, Tall and whisper.

Figure 6.1 Thumbnail of Type Expression of 'Fire' Week 1 (6/9/2022)

Figure 6.2 Thumbnail of Type Expression of 'Ring' Week 1 (6/9/2022)

Figure 6.3 Thumbnail of Type Expression of 'Tall' Week 1 (7/9/2022)

Figure 6.4 Thumbnail of Type Expression of 'Whisper' Week 1 (7/9/2022)

Figure 6.5 Compile sketch of each words, Week 1 (8/9/2022)

Digitization

1. Fire

Figure 6.6 Make the effect of flaming on the word , Week 3 (18/9/2022）

Futura typefaces are used in this phrase because they are more succinct. Only roughen is the best filter, even after trying all of them. To prevent severe distortion, Roughen's index is set at 0.2%. In order to reinforce the type expression, I also incorporated a wave effect.

2. Ring

I tried to ring appearance with two distortion effect and a wire ring on a bunch of words, but its didn't express significantly of the words of meaning.

Figure 6.7 Idea exploration, Week 2 (8/9/2022)

After receiving the feedback, I think maybe instead of the ring on the hand it can be the ring of a planet and then I roughly sketches about the ideas.  

Figure 6.8 Sketching, Week 2 (16/9/2022)

To wrap text around a circle, first make a standard circle with the ellipse tool, then use the Type on a Path tool. Select the Type on a Path Tool, then click on the circle you want the text to be positioned around. Then, use the free transform tool to tilt it.

Figure 6.9 Path tool and Free Transform, Week 3 (19/9/2022)

3. Tall

Figure 6.10 Week 3 (19/9/2022)

The first sketched design of Tall is selected and perform it with two text boxes, horizontal and vertical. I think if want to convey the feeling of tall, simply being taller than one thing does not seem to convey the literal meaning, contrast in scale would give a better result

Figure 6.11 Week 3 (19/9/2022)

4. Whisper

Gathering in the corner and whispering is what I'm trying to say, because the sound is so soft that the sound heard is intermittent. Thus, the stroke is apply with dash-line and empty the fill.

Figure 6.12 Week 3 (19/9/2022)

Figure 6.13 First Draft of design, Week 3 (22/9/2022)

The feedback on the word 'Fire" is look a bit jagged, so I follow the instructions given. Create the outlines and expand the appearance. The jagged line smoothen with the smooth tool and curve function to have lesser anchor points. The word 'Whisper' is placed too rigid that didn't show the people gathered at the corner. Change the letterforms to show the observation. The dash outline is not working at that size, reduce the thickness of the line or reduce the stroke weight. Make the word filled with gray and gather the words at the corner organically with italicizing can express better the words in the way I want.

Final Type Expression

Figure 6.14 Final Type Expression JPEG

Week 4 (24/9/2022)

Type Expression Animation

I choose the word " Tall" for the type expression animation. After I finish watching the prerecorded video of animation, I started by creating artboards. The idea is about showing growing up with the heights. To make sure the fluence flow, I use 29 artboard to make the motion smoother. 

Figure 7.1 Adobe Illustrator artboard

Figure 7.2 Adobe Photoshop animation

,Week 4 (27/9/2022)

Figure 7.3 First Attempt Animation

, Week 4 (29/9/2022)

After receiving week 4 feedback from Mr. Vinod to other students, I rearrange the word position and make the last artboard stop about 1 second.

Final Type Animation

Figure 7.4 Final Animation

 GIF, Week 5 (30/9/2022)

Exercise 2: Text Formatting

An incremental amounts of text is given that address different areas within text formatting i.e. type
choice, type size, leading, line-length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans and cross-alignment. These minor exercises will increase your familiarity and capability with the appropriate software and develop your knowledge of information hierarchy and spatial arrangement. Adobe InDesign software is used in this exercise.

Figure 8.1 Comparing 10 Typefaces with kerning, Week 5 (27/9/2022)

The comparison of 10 typefaces is done on the tutorial of text formatting. In the tutorial, there are several things to mention: 

- Leading: +2 -3 points of point size 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).

- 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. If they differ it confuses the audience, making them think it's a separate piece of information.

- Do not exceed +3/-3 for tracking to reduce ragging (line).

- Turn off hyphenation. 

- Either use left align or left justify. Though left alignment is preferred.

- If using justify, ensure there aren't many rivers (large awkward spaces between the words).

- Maintain cross alignment by using baseline. 

- Avoid widows and orphans.

Figure 8.2 Layout 1, Week 5 (28/9/2022)

Figure 8.3 Layout 2, Week 5 (29/8/2022)

Thus, 2 layout are produce. Layout 1 is Adobe Caslon Pro typeface while Layout 2 is Bembo Std typeface. Both font size and leading is the same, 10pt and 12pt leading. In body text, kerning and tracking reduce the ragging but leaves widow. However decrease the point size will decrease the readability. 

Figure 8.4 Screenshot of hidden characters, Week 5 (27/9/2022)

HEAD
Font/s: ITC Garamond Std
Type Size/s: 48pt
Leading: 50pt
Paragraph spacing: 0mm

BODY
Font/s: Adobe Caslon Pro
Type Size/s: 10pt
Leading: 12pt
Paragraph spacing: 12pt

Characters per-line: 56 - 62
Alignment: Left alignment

Format

Margins: 117mm (Top) & 28mm (Bottom)
Columns: 2
Gutter: 8mm

(Space between column)

Figure 8.5 Text Formatting, Week 5 (30/9/2022)

The PDF is not visible, orphan visible in type setting. I kerning my body text again to avoid widow and orphan and reupload the pdf (give access). 

Figure 8.6 Final Text Formatting without baseline - JPEG, Week 5 (30/9/2022)

Figure 8.7 Final Text Formatting with baseline - JPEG, Week 5 (30/9/2022)

Figure 8.8 Final Text Formatting without baseline - PDF, Week 5 (30/9/2022)

Figure 8.9 Final Text Formatting with baseline - PDF, Week 5 (30/9/2022)

---

FEEDBACK

Week 2

General Feedback: 

Sketches with several ideas first, then digitalize. Use 10 typefaces provided, distort lightly with reason. Mask the frame on sketches. Last the feedback on both Google sheet & blogger.

Specific Feedback: 

Sketches line is too thin, applied thickness will be more desirable. The word 'ring' does not seems work. The word 'Fire'  with the flame can be done by illustrator effect, but make sure not too wavy. The word 'Tall' and 'Whisper' (right) works, changing the outline of words with dotted line strokes might gain the effect I illustrate.

Week 3

General Feedback:

Export the artwork from illustrator as a JPEG with 72ppi and gray scale. The size of the GIF is 1200 pixels or 800 pixels width and height when export from photoshop.

Specific Feedback:

The fire look a bit jagged, it can be more smoother through the smooth tool with less anchor points. Ring is fine. The typeface of the word of your name can change it to arial typeface. Tall also fine. The word whisper is placed too rigid that didn't show the people gathered at the corner. Change the letterforms to show the observation. The dash outline is not working at that size, either reduce the thickness of the line or reduce the stroke weight. Make the word filled with gray and gather the words at the corner organically with italicizing. All words in capitals is unnecessary.

Week 4

General Feedback:

Watch the text formatting video for the instructions and requirement of exercise 2. Finalize the blog by taking senior's blog as arrangement reference. 

Specific Feedback:

The GIF is okay.

Week 5

General Feedback:

Cross alignment is important and don't use same typeface in 1 layout. Static layout which have equal margin on top and the bottom is not prefer. Too much hyphenation in paragraph also not prefer. Export the jpeg in 300ppi. Update the feedback, further reading and finalize the blog. Make sure screenshot the progress of InDesign to proof what you have done and learn. Reading would help in improvement.

Specific Feedback:

Use the byline provided, and unite the alignment. The reference can refer to the index. Layout and headline is okay.

---

Reflections

Week 1:

Experience:

Learn to create blogs and start our first assignments by voting the words.

Observation:

Feel a bit dizzy because class starts at 8am, but I feel concentrated in this class because typography is a new thing for me.

Findings

Mr. Vinod suggest us to create a new Gmail account to have an extra space for the google drive and study purpose.

Week 2:

Experience:

Ideas of every student are amazing although some of the word cannot be used due to over distortion. Mr. Vinod gave useful feedback to us.

Observation:

The design of the word must express the meaning of the word, it doesn't need to be complex.

Findings:

I found out my sketch is too plain without any thickness and make the idea exploration not that obvious.

Week 3:

Experience:

It is Independence Day of Malaysia, thus we attend online class through zoom and watch prerecorded video of type expression animation.

Observation:

The feedback for my design really wake me up, sometimes I just need to change my perspective when designing.

Findings:

The instruction is given and explained clearly, just need to finish the work.

Week 4:

Experience:

Learn many skills about kerning, leading space, margin and many of it. Need to apply when text formatting.

Observation:

Text formatting is about typography which build up with details such as kerning, leading space and so on to increase the readability of overall of text.

Findings:

For the exercise 2, we use Adobe InDesign as our application medium to edit those word. It is suitable for the typography of magazine news paper.

Week 5:

Experience:

Small difference will make big impact in typography, follow the rules given (line character 55-65pt. and so on) will strengthen the basic of your layout.

Observation:

The italic, Rome, bold, condensed typefaces are not for the whole body text but they are suitable for emphasis. Layout is all about cross alignment, balance and space.

Findings:

We should read the book provided by Mr. Vinod to enhance our skills in typography and make use of them.

---

Further Reading

The Vignelli Canon (2015)

Figure 9. Vignelli, M. (2015). The Vignelli Canon. Lars Muller.

In this book, Massimo Vignelli, a well-known Italian designer, gives us a peek of his perspective of good design, including its principles and criteria. Three main aspects in Design mention by Vignelli: Semantic, Syntactic and Pragmatic.

Semantics is the search of the meaning of whatever we have to design. That may start with research on the history of the subject to better understand the nature of the project and to find the most appropriate direction for the development of a new design. 

Depending on the subject the search can take many directions. It is extremely important for a satisfactory result of any design to spend time on the search of the accurate and essential meanings, investigate their complexities, learn about their ambiguities, understand the context of use to better define the parameters within which we will have to operate. In addition to that it is useful to follow our intuition and our diagnostic ability to funnel the research and arrive to a rather conscious definition of the problem at hand.

Figure 7.8 New York City Subway Diagram

Syntax: the discipline that controls the proper use of grammar in the construction of phrases and the articulation of a design language. 

The consistency of a design is provided by the appropriate relationship of the various syntactical elements of the project: how type relates to grids and images from page to page throughout the whole project. Or, how type sizes relate to each other. Or, how pictures relate to each other and how the parts relate to the whole. 

Syntactic consistency is of paramount importance in graphic design as it is in all human endeavors. Grids are one of the several tools helping designers to achieve syntactical consistency in graphic design.

Pragmatics

Any artifact should stand by itself in all its clarity. Otherwise, something really important has been missed. It is important to understand the starting point and all assumptions of any project to fully comprehend the final result and measure its efficiency.

Clarity of intent will translate in to clarity of result and that is of paramount importance in Design. Confused, complicated designs reveal an equally confused and complicated mind. We prefer strong design that values intellectual elegance in design (the elegance of ideas) and prefer design that goes beyond past trends and passing fashions.

---