Typography - Exercises

17/4/2020 - 8/5/2020 / Week 1 - Week 4
Lim He Yu (0340423)
Bachelor of Mass Communication (Advertising) / Typography

---

Exercises

 Lectures 

Week 1 (Introduction and Briefing)

In our first week, we were introduced to Mr.Vinod and Mr. Shamsul, and we were briefed on the assignments and deadlines of this semester. Not only that, we were briefed on how to create our e-portfolios. We were given step-by-step instructions and ample examples for our reference. Apart from that, we were already given our first task in creating type expressions.  

What is "Typography"?
It is the act of creating letters. type faces and type families, even animations. Typography is all around us (websites, apps, ads, etc.). Typography has evolved throughout the span of over 500 years, from calligraphy, lettering and finally what we're currently studying, typography.



Week 2 (Typography: Development & Timeline)

Early letterform development: Phoenician to Roman

• Phoenician is writing on clay with a sharpened stick (combination of straight lines and circles)
• Greeks changed the direction of writing (Right-Left to Left-Right)
• Etruscan, carved in marble, changes of stroke and weight
• Then came Roman (alphabets)

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

• Square capitals, have serifs
• Rustic capitals, compressed version of square capitals (slightly harder to read)
• Lowercase, combination of rustic and square capitals (everyday transactions)
• Uncials, has some aspects of Roman cursive hand. (more readable at small sizes than rustic)
• Half-uncials (formal beginning of lowercase letterforms)
• Charlemagne (unifier of Europe since Romans)

Blackletter to Gutenberg's Type

• Condensed strongly vertical letterform a.k.a. Blackletter 
• Gutenberg's type mold required different brass matrix, negative impression 

Week 3 & Week 4 (Typography: Text / Basic)

Typography: Text

Tracking: Kerning and Letterspacing

• Kerning: automatic adjustment of space between letters
• Letterspacing: to add space between the letters
• Tracking: addition and removal of space in a word or sentence (normal, loose, tight)

Formatting Text

• Flush Left: Each line starts at the same point but ends wherever the last word on the line ends.
• Centered: Imposes symmetry upon text, assigning equal value and weight at both ends.
• Flush Right: Places emphasis on the end of a line as opposed to its start.
• Justified: Imposes symmetrical shape, achieved by expanding/reducing spaces between words.

Leading and Line Length

• Type size: type should be large enough to be read easily at arms length
• Leading: Too tight- reader easily lose place / Too loose - striped patterns distract reader
• Line Length: Shorter lines require less leading; longer line more

Type Specimen Book

• a book that shows samples of typefaces in different sizes
• to provide an accurate reference for type, type size, leading, line length etc.

Typography: Basic

Describing Letterforms

• Baseline: Imaginary line the visual base of the letterforms.
• Median: 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
• Apex/Vertex: The point created by joining two diagonal stems
• Arm: Short strokes off the stem of the letterform (horizontal/inclined upward)
• Barb: The half Serif on some curved stroke
• Bowl: Rounded form that describes a counter (open or closed)
• Bracket: transition between the serif and the stem
• Cross Stroke: Horizontal stroke in a letterform that joins two stems together
• Crotch: Interior space where two strokes meet
• Descender: Portion of the stem of a lowercase that projects below the baseline
• Em: Distance equal to the size of the typeface
• En: Half the size of an em
• Ligature: Character formed by the combination of two or more letterforms
• Loop: Bowl created in the descender of the lowercase "g"
• Spine: Curved stem of the "s"
• Stress: Orientation of the letterform, indicated by the thin stroke in round forms.
• Swash: The flourish that extends the stroke of the letterform
• Terminal: Self-contained finish of a stroke without serif

The Font

• Full font of a typeface contains 26 letters, numerals and punctuation marks
• Uppercase: Capital letters, accented vowels
• Lowercase: lowercase letter include the same characters as uppercase.
• Small Capitals: Uppercase letterforms drawn to the x-height
• Uppercase Numerals: Lining figures, same height as uppercase letters
• Lowercase Numerals: old style/text figures, set to x-height
• Italic: Italian cursive handwriting, oblique based on roman form
• Punctuation, Miscellaneous Characters: be acquainted with all the characters available
• Ornaments: Used as flourishes in invitation or certificates 

Describing Typefaces:

• Roman: Derived fro inscriptions of Roman monuments
• Italic: fifteenth century handwriting
• Oblique: based on roman form of typeface

---

 Instructions 




 Exercises 

Type Expression (Week 1 - Week 2)

Week 1:

This week we re instructed by Mr. Vinod to associate expressions of 6 given words through the art of typography. We were told to sketch our ideas before digitizing it on Illustrator. On top of that, we were given 9 type families to work with. Shown below are the sketches:

Figure 2.0: "Hidden" sketches

Figure 2.1: "Drown" and "Push" sketches

Figure 2.2: "Loud" and "Fly" sketches

Figure 2.3: "Disappear" sketches

After I was done with the sketches, I continued the process of digitizing it on Illustrator. In the process of digitizing, I didn't really follow what I've sketched on paper 100% though. 

Figure 2.4: First Draft of Type Expression Exercise

After getting feedback from Mr. Vinod and Mr.Shamsul, I realized that my understanding of "minimal graphic elements" isn't as minimal as I thought, so I was instructed to take out the illustrations out of "Drown" and "Loud". Apart from that, I had to redo "Hidden" because i couldn't get the message across and change the type face of "Disappear". Below is the final version of Exercise 1 in JPEG and PDF. 

Figure 2.5: Exercise 1 (Final Version)

Week 2:

This week we were instructed to animate one of the type expressions above. I chose the word "Fly" because it's the one I like most out of the six, and I think it's doable considering I have zero experience in animation. 

At first, I thought I did way too many frames (80 frames) and thought 24 frames would be suffice, plus my animation was moving a bit too slow. So I tried to reduce the number of frames and managed to pull off  40 frames then down to 32 frames. 

After that, I tried again to brought it down to 23 frames by removing some parts of the animation. However, I prefer the animation with 32 frames, both gifs are attached further down.

Figure 2.6: Animation Frames (23 Frames)

Figure 2.7: Animation Timeline on Photoshop

Here are the outcomes:

Figure 2.8: Fly Animation (32 Frames)

Figure 2.9: Fly Animation (23 Frames)

Formatting Text (Week 3 - Week 5)

Week 3:

This week we were instructed to practice text-formatting using In Design. In this week's exercise we were tasked to create variations of a name card and a letterhead. We were told to choose a typeface (among the given ten typefaces) that best describes us. I have chosen "Futura Std" because of its simple design. For me the typeface doesn't really set a tone, it's sort of neutral and could be used for almost anything, in a way it's vague, and that's why I like it. 

We were introduced to the concept of paragraphs, forced line breaks, leading, kerning and tracking. Apart from that, I've learned the importance of visual hierarchy and alignment. Using the smart guides and rulers in InDesign is to be very efficient. Shown below are what I've done for this week's tasks.

Figure 3.0: Name Card Variations

Figure 3.1: Letterhead Placement

Week 4:

In continuation with last week's exercise, we were taught the ways of laying out our texts, which includes creating guides and margins. Apart from that, we were also taught technical terms and how to use them like cross alignment, line length. We were also taught how to avoid 'rivers' and ragging, we can avoid them by tracking. Shown below were the exercises that were taught in this week's online class.

Figure 4.0: Creating Guides and Margins

Figure 4.1: Two-Column Layout

Figure 4.2: Three-Column Layout

After the watching Mr. Vinods demonstration of the different layouts, we were then instructed to create the third layout on our own. Attached below is a PDF of the exercises that we were instructed to complete including the third "freestyle" layout.

WEEK 5:

This week was all about feedback from Mr. Vinod and Mr. Shamsul. Overall, I needed to make a few amendments to my Text Formatting Exercise, but most were only minor issues. Attached below is the final PDF of the Text Formatting Exercise.

---

 Feedback 

Week 1:

General Feedback:

- Sketch pics must be photographed with even lighting, no shadows.

Specific Feedback:

- Take out graphical elements from “DROWN” & “LOUD”

- Change type face of “DISAPPEAR”

- Redo “HIDDEN”

Week 2:
General Feedback:
-The animation does not have to be fixed at 24 frames

Specific Feedback:
- The animation expresses the meaning of the chosen word


Week 3:
No Feedback


Week 4:
No Feedback


Week 5:
General Feedback:
- Cross alignment needs to be improved, blog missing from name card

Specific Feedback:
- Everything should be left-aligned in namecard
- Image has too much space around the subject
- Images need to be black and white

---

 Reflections 

Week 1: 

Experience:

Due to the MCO, online classes became mandatory so this is quite a new experience for me, but to survive, we have to adapt.

Observation:

I'm more easily distracted in online classes, due to the fact that I "attend" classes in the comfort of my own bed.

Findings:

The perks of online classes, which is the ability to wake up 5 minutes before class and to stay in your pajamas.

Week 2:
Experience:
This week we had to create an animation for the Type Expression exercise, which I've never done before so I was a bit what the outcome would be.

Observation:
The process of producing the animation isn't as hard as I thought. However, estimating the speed of my animation was a bit of a challenge.

Findings:
Making animations takes a lot of hard work and patience. References are important.


Week 3:
Experience:
There weren't any class this week, only consultation, but there is work to be completed by referring to Mr. Vinod's video about formatting text.

Observation:
I have no patience whatsoever, so I increased the speed of Mr.Vinod's video.

Findings:
I can still manage to get the work done even though I increased the speed of Mr. Vinod's teachings.


Week 4:
Experience:
In this week's class we were taught about layout, I'd say layout isn't something foreign to me as I've done a few in my Advertising and Journalism classes, but I still learned something new.

Observation:
There were some interesting points about text layout that I never knew, like cross alignment, a limited/suitable line length. Not to mention, things to avoid, like rivers and ragging.

Findings:
Text layout is more than meets the eye, it's not as simple as it looks and it takes patience to get it right.

---

 Further Reading 

Week 1: The Design of Everyday Things (Don Norman)

(Source: Mediapark)

The Design of Everyday Things is a book about how design serves as the communication between object and user, and how to optimise that conduit of communication in order to make the experience of using the object pleasurable.

“Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible, serving us without drawing attention to itself. Bad design, on the other hand, screams out its inadequacies, making itself very noticeable.” - Don Norman

Great designers produce pleasurable experiences. Experience is critical, for it determines how fondly people remember their interactions. Cognition and emotion are tightly intertwined, which means that the designers must design with both in mind.

Week 2: Designing Design (Kenya Hara)

(Source: Medium)

Design thinking is, in a broad sense, construed to be the pursuit of universal balance and harmony of the human mind through rational, integrative manufacture; design refers to the will to interpret the meaning of human life and existence through the process of making things.

Art, on the other hand is the act of discovering a fresh human spirit.Art is an expression of an individual’s will to society at large, one whose origin is very much of a personal nature. Non-artists commune with art by coming up with interesting interpretations of art, appreciating it, commenting on it, re-editing art in an exhibition, or using art as an intellectual resource.

Design, on the other hand, is basically not self-expression. Instead, it originates in society. The essence of design lies in the process of discovering a problem shared by many people and trying to solve it. Because the root of the problem is within the society, everyone can understand plans for solutions and processes for solving the problem, in addition to being able to see the problem from the designer’s perspective.

Week 3: Thinking with Type (Ellen Lupton)

(Source: Impactbnd)

The book is packed with information and examples that allowed me to visualize various styles, theories, and methods discussed. Despite what seemed like a dense topic, Lupton did a great job of making the content easy to digest so I could breeze through it. The book is organized into three primary sections: Letter, Text, and Grid.

The bulk of the book is made up of visual examples with comments, instructions, and anecdotes from Lupton. She uses carefully chosen graphics of contemporary and historic works and every page is filled with some aspect of type.