Typography Task 1: Exercise 1 & 2

28 March 2022 - 26 April 2022 / Week 01 - Week 05

Lim Wei Xian / 0342559

Typography / Bachelor's of Mass Communication (HONS) (Advertising and Brand Management) / Taylor's University

Task 1: Exercise 1 & 2

---

LECTURES

Week 1 | Lecture 1 

We had a physical class in the design studio with Mr Vinod for the first week. The class was more or less an introduction to the world of typography, as well as the briefing on the overall module and the Task 1 that we need to start. Mr Vinod walked around the class and guided students in getting the head start of creating our e-portfolio. There were also an ice-breaking session where students get to know each other by tossing around a crumbled paper. 

We moved on and started off our Task 1 Exercise 1 with a voting session in our Facebook group to determine the words that will be used for the task. Many ideas were presented but the top five votes were: 'Squeezing', 'Pop', 'Explode', 'Grow', and 'Wink'. 

'Cough' is a bit of a unique case where Mr Vinod made the class work on he word 'Cough' and made it mandatory for us to choose.

Below will be some notes from the YouTube video recordings.

Typography: Act/Art of creating letters/language

Evolved over 500 years: Calligraphy > Lettering > Typography

Figure 1.1.0 Evolution of Phoenician letters

Figure 1.1.1 Letterform development: Phoenician to Roman

Boustrophedon: Reading alternately from left to right and right to left (same goes with the direction of their letterforms)

Figure 1.1.2 'Boustrophedon', a Greek style of writing

Blackletter to Gutenberg's type: Dissolution of Charlemagne's empire came regional variations upon Alcuin's script. 'Blackletter' (Textura) gained popularity in Northern Europe, while a rounder more open hand called 'Rotunda' gained popularity in the South. The humanistic script in Italy is based on Alcuin's minuscule.

Figure 1.1.3 c.1300 'Blackletter' (Textura)

Text type classification: 

Figure 1.1.4 Text type classifications throughout the years

Week 2 | Lecture 2

Face to face class was more or less a feedback session where Mr. Vinod sat down in class to review the works of students. He gave ideas and constructive comments for students to work more on their type expression. 

Kerning: Refers to the automatic adjustment of space between letters.

Tracking: Addition and removal of space in a word or sentence.

Letterspacing: Adding space between the letters.

Figure 2.1.0 Letters without kerning compared to letters with kerning

Figure 2.1.1 Flush left, Ragged right

Flush left: This format most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even gray value.

Figure 2.1.2 Centered, Ragged right and left

Centered: This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It transforms fields of text into shapes, thereby adding a pictorial quality to material that is non-pictorial by nature. Because centered 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.1.3 Flush right, Ragged left

Flush right: This format places 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.1.4 Justified

Justified: Like centering, this format imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and, sometimes, between letters. The resulting openness of lines can occasionally produce rivers' of white space running vertically through the text. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.

Figure 2.1.5 Anatomy of a typeface

Week 3 | Lecture 3

For the third week, Mr. Vinod explained the differences between kerning, tracking, and letterspacing so that we can understand the three different concepts clearly. These skills and understanding would help students a lot in the text formatting exercise. We also learned formatting text such as flush left, centered, flush right, and justified. Type sizing and leading are important to complement each other well, as we've learned that the leading should be 2pt larger than the type size (e.g. type size is 11pt, leading should be 13pt). One important take away was that the rule of thumb is to control and keep the length of a line between 55-65 characters, whereas 50-60 characters may be acceptable.

Pilcrow (¶): A holdover from medieval manuscripts seldom use today.
Line space (leading): Between the paragraphs.
Standard Indentation: Same size of the line spacing or the same as the point size of your text.

Figure 3.1.0 Standard Indent

Extended Paragraphs: Creates unusually wide columns of text.

Figure 3.1.1 Extended Paragraphs

Widow: A short line of type left alone at the end of a column of text. 
Orphan: A short line of type left alone at the start of new column.

Figure 3.1.2 Widow and Orphan

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.

Figure 3.1.3 Cross Alignment

Week 4 | Lecture 4

In this week, the lecture videos that I've went through taught me about baseline, median, and X-height. One of the more important note that I personally value was the understanding of widows and orphans in paragraphs. I have this confusion and was mixing up the two of it, and I just can't differentiate the two. After going through the videos for the second time, I was finally aware of the differences. Furthermore, I've learned paragraph spacing and leading as well, which are understandings that are important for the text formatting exercise. 

Learning about the appropriate margins for grids and columns are crucial so that so that when I'm doing the exercise, I can make sure that readers would have an easy time reading the texts. Mr. Vinod also taught us about turning off the hyphenation in paragraphs so that it wouldn't be an eye-sore. The fourth week is more or less an update on our ongoing work, while also tuning some important knowledge that students should use while doing their work in Adobe InDesign.

Important notes from lecture videos:

- On 5/1000em tracking; (+3) & (-3) is the maximum 

- Point size should be around 10 (+/- 2)

- No Widow/ Orphan

- Leading: 2, 2.5, 3 pts larger than font size

- Line length (55-65/50-60)

- Ragging (left alignment); Rivers (left justification)

- Cross Alignment

- Hyphenation: OFF

Baseline: The imaginary line 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’. 

Serif: The right-angled or oblique foot at the end of the stroke.

Figure 4.1.0 Serif

Stroke: Any line that defines the basic letterform.

Uppercase: Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.

Lowercase: Lowercase letters include the same characters as uppercase.

Small Capitals: Uppercase letterforms draw to the x-height of the typeface.

Figure 4.1.1 Small Capitals

Uppercase Numerals: Also called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width.

Lowercase Numerals: Also known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders. 

Week 5 | Lecture 5

Understanding letterforms

Figure 5.1.0 Letter 'A' in Baskerville

The uppercase letter forms below suggest symmetry, but in fact it is not symmetrical. It is easy to see the two different stroke weights of the Baskerville stroke form; more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Figure 5.1.1 Letter 'A' in Univers

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

Figure 5.1.2 Letter 'a' (Comparison of Helvetica and 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. 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.

Figure 5.1.3 Curved strokes should rise above the media or sink below the baseline

Keep in mind that 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.

Figure 5.1.4 Contrasts

The simple contrasts produces numerous variations: small+organic/large+machined, small+dark/ large light, etc.

Week 6 | Lecture 6

Print Type vs Screen Type

Figure 6.1.0 Print Type

Print Type: It’s the designer’s job to ensure that the text is smooth, flowing, and pleasant to read. A good typeface for print - Caslon, Garamond, Baskerville are the most common typefaces that is used for print. Because of their characteristic which are elegant and intellectual but also highly readable when set at small font size. They are versatile, easy-to-digest classic typeface, which has a neutrality and versatility that makes typesetting with it a breeze.

Figure 6.1.1 Screen Type

Screen Type: Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen 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-print environment, which can include the web, e-books, e-readers, and mobile devices.

Hyperlink: A hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document.

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

Figure 6.1.2 Table of Pixel Differential Between Devices

Static Typography vs Motion Typography

Figure 6.1.3 Static Typography (Billboard)

Static Typography: Static typography has minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties. From billboards to posters, magazines to fliers, we encounter all forms of static typography with wide ranging purposes. 

Figure 6.1.4 Motion Typography (Video)

Motion Typography: Often bringing typographic information to life through animation. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type. Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack. On-screen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood.

---

INSTRUCTIONS

Task 1: Exercise 1 - Type Expression

For the first exercise, we were told to choose 4 words to work on type expression. I chose 'cough', 'explode', 'pop', and 'squeeze'. No visual aids (graphics and obvious objects) are allowed, but Mr Vinod gave us some allowance in using subtle lines, dots, and shapes to further emphasise on the type expression that we are doing. There are only 10 typefaces allowed for this exercise, which includes Univers, Serifa, Janson Text, ITC New Baskerville, ITC Garamond, Gill Sans, Futura, Bodoni, Bembo, and Adobe Caslon Pro. 

Week 2 Sketches with marker on paper (picture was scanned)

Figure 7.1.0 Sketches for 'cough', 'explode', and 'pop' 04/04/2022

Figure 7.1.1 Sketches for 'pop' and 'squeeze' 04/04/2022

Week 3 Digitising

I went onto Adobe Illustrator to improve and digitise each word. Below will be my attempts based on the feedback and my own exploration.

COUGH

My attempt on 'cough' was to have the 'O' in the word to really mimic or represent a person's mouth. By enlarging the 'O', it sort of shows emphasis of the word 'cough' where people usually 'cough' with their mouths opened. I included some thin lines and particles to visualise the substances that are coming out of the mouth when someone coughs. I've used the letters 'l' and 'o' to make these details to further represent the act of a 'cough' through the use of the letter 'O'.

Figure 7.2.0 First attempt of 'Cough' in Adobe Illustrator [Progression] 11/04/2022

SQUEEZE

For the word 'squeeze', I've adjusted the kerning of the letters in between to really show the meaning of a tight space that squeezing can have. A bit of distortion was taken place to put the words into a squeezing position as if there were things that are tightening up the letters. The use of the effect 'squeeze' in Adobe Illustrator was sort of a 'cheat code' I've experimented with and therefore, the final product shown here below.

Figure 7.2.1 First attempt of 'Squeeze' in Adobe Illustrator [Progression] 11/04/2022

POP

'Pop' took me quite some time to really figure out what and how I should do with the letters. Given the feedback by Mr. Vinod, I tried making the letter 'P' closer together and was figuring out how I should visualise the 'O' that will be in-between of the 'P's. My mind clicked for awhile where I've decided to use an appropriate typeface that made the 'O' look like a disc. The reason behind it was to complement with the idea of 'pop music', therefore the visual similarity the letter 'O' has that can be compared to a 'disc' or a 'vinyl record'.

Figure 7.2.2 First attempt of 'Pop' in Adobe Illustrator [Progression] 11/04/2022

EXPLODE

I have a similar idea of the word 'explode' and 'cough' by utilising the nature of the letter 'O'. The shape of the 'O' can work in this as the act of exploding is often thought of by having a big impact. The circular shape of the letter 'O' was used to imply an explosion out of the word, as the other letters are looking as if they are separating and lifting off the ground from an explosion. I tried using a simple gradient on the letters, where 'O' is in black to comfort the eyes of the audience as its size is the most attention grabbing. I went from colours that are lighter, slowly darkening to the right up until the letter 'O', then lighten the colours of the letters after the 'O'.

Figure 7.2.3 First attempt of 'Explode' in Adobe Illustrator [Progression] 11/04/2022

Figure 7.3.0 First attempt on digitising type expression on Adobe Illustrator [Progression] 11/04/2022

FINAL TYPE EXPRESSION (SUBMISSION)

Tried to improve the 'cough' and 'pop' accordingly to the feedback. 'Pop' needed more work as I went onto the Adobe Illustrator app to really show subtle elements that makes the 'pop' more attention grabbing and impactful. 

Figure 7.3.1 Final type expression digitising on Adobe Illustrator (JPEG) 14/04/2022

Figure 7.3.2 Final type expression digitising on Adobe Illustrator (PDF) 14/04/2022

Week 3 GIF Animation

Shortly after our illustrating attempt of the words, we head onto Adobe Photoshop and animate one of the four words that we've chosen to make it lively. I will be animating a GIF based on the word 'pop' for this task.

Figure 7.4.0 First attempt in animating the word 'pop' on Adobe Illustrator (17 frames) [Progression] 11/04/2022

Figure 7.4.1 GIF for 'pop' (First version. Using the first attempt of 'pop') [Progression] 11/04/2022

As the whole imagery of this type expression is the representation of a record from the letter 'O', Mr. Vinod gave some comments on how I should improve my animation by making the 'O' as if it's wobbling a bit, while also spinning. I went on to produce 21 frames to really visualise what a vinyl record would look like when spinning. 

Figure 7.4.2 Second attempt in animating the word 'pop' on Adobe Photoshop (21 frames) [Progression] 12/04/2022

For my final submission for the animation, I've used subtle lines to highlight the movements as well as the reflection of the 'O' (vinyl record).

FINAL ANIMATION (SUBMISSION)

Figure 7.4.3 Final GIF Animation for 'pop'. 12/04/2022

 Task 1: Exercise 2 - Text Formatting

For Exercise 2, we need to utilise the Adobe InDesign application to practice the formatting of texts. We would learn and apply practical experimentations into the work with the knowledge of kerning, tracking, paragraph spacing, alignment, and other typographical elements. The final product should only  use the 10 typefaces and text content provided.

Text formatting: Kerning and Tracking

Figure 8.1.0 Text formatting with my name without any kerning (PDF) 16/04/2022

Figure 8.1.1 Text formatting with my name with kerning (PDF) 16/04/2022

Layout

Important notes from lecture videos (Repeated in summary of Week 4 lecture. Just a reference to put here so that it'll be easier to keep myself on the right track when doing the work):

- On 5/1000em tracking; (+3) & (-3) is the maximum 

- Point size should be around 10 (+/- 2)

- No Widow/ Orphan

- Leading: 2, 2.5, 3 pts larger than font size

- Line length (55-65/50-60)

- Ragging (left alignment); Rivers (left justification)

- Cross Alignment

- Hyphenation: OFF

I experimented the layout texts according to the guides that Mr. Vinod provided in his lecture playlist and took notes of the tracking having a maximum usage of three times (5/1000em tracking: three times). Below will show the differences between two lines to show how tracking can make a paragraph more visually comfortable for readers. 

Figure 8.2.0 Comparison of one of the body texts before and after tracking [Progression] 18/04/2022

After I've cross aligned the texts, there were two obvious issues that needs to be resolved: an orphan and a widow.

Figure 8.2.1 The orphan (circled in red) and widow (inside the red rectangle) [Progression] 18/04/2022

Went back to Adobe InDesign to fix the orphan and widow issue by experimenting three different layouts (adjusting each of it accordingly). Checked the hidden characters to see if there was any errors in the layout that may need minor updates, and the screenshot below will showcase the hidden characters in my first attempt in the text formatting layout.

Figure 8.2.2 Hidden characters (screenshot from first layout) [Progression] 18/04/2022

Below are three layouts that I've played around with it.

Figure 8.2.3 Text Formatting Layout Attempt #1 [Progression] 18/04/2022

Figure 8.2.4 Text Formatting Layout Attempt #2 [Progression] 18/04/2022

Figure 8.2.5 Text Formatting Layout Attempt #3 [Progression] 18/04/2022

I finalised on the third attempt to use it as my final submission for this exercise as I feel like it is more appealing to me compared to the other two. I made the text 'Helvetica' in the title to be more simplistic so that it won't be too busy for the human eye. Instead of 'bold italic', I just 'bold' the text to still have the same concept of showing prominence to the text. The other minor change is the picture at the bottom right corner. I've made it slightly smaller to let the layout have a bit more breathing space. It turned out the way I liked it and below will be the final submission for Task1: Exercise 2.

FINAL TEXT FORMATTING LAYOUT (SUBMISSION)

Font Typeface: ITC New Baskerville Std (Roman, Italic, Bold)

Font Size: 38pt (Title), 10pt (Body Text)

Leading: 12pt

Paragraph Spacing: 12pt

Line Length: 50-60 characters

Alignment: Left align

Margins: 15mm (Top, Left, Right), 30mm (Bottom)

Columns: 2 (Gutter: 5mm)

Figure 8.2.6 Final Text Formatting Layout with Grids, Columns, and Guides (PDF) 25/04/2022

Figure 8.2.7 Final Text Formatting Layout (JPEG)18/04/2022

Figure 8.2.8 Final Text Formatting Layout (PDF)18/04/2022

---

FEEDBACK

Week 02

For Task 1,Exercise 1 - Type Expression, Mr. Vinod gave us feedback based on 4 questions:

 1. Are the explorations sufficient?

 2. Does the expression match the meaning of the word?

 3. On a scale of 1–5, how strong is the idea?

 4. How can the work be improved?

General Feedback: Explorations were sufficient. Overall idea was good, but the execution needs a bit more work.

Specific Feedback: The idea for the word 'pop' is good, but the execution is bad. Needs some improvement by making the 'p's closer together, making it look like the 'o' is popping out. 

Week 03

Type expression - Digitisation with Adobe Illustrator

General Feedback: 'Cough' needs to be improved; 'Pop' and 'Explode' was good; 'Squeeze' was acceptable.

Specific Feedback: 

Type Expression - Improve by having lines across of the 'O' in 'Cough' (lines of emphasis around / surround the 'O' instead of only one direction). 

GIF Animation - The 'O' should only have a slight wobble and a highlight to show the 'O'/ record is spinning.

Week 04

General Feedback: Text formatting should follow the rules and guides Mr. Vinod provided in his lecture video playlist.

Week 05

General Feedback: Finish up the summary of lectures and prepare the e-portfolio for submission before 12.00p.m., 26th April 2022 (Tuesday).

Specific Feedback: The updated type expression for the word 'pop' looks way better with the record spinning.

---

REFLECTION

Experience

The overall experience was actually really enjoyable for me. Honestly, I've had so much fun learning and executing the works that I've done in this Task 1. Sketching the ideas I have in mind for the first exercise explores my creativity, while the digitising stage of the work was a feeling of satisfaction. Using all of the softwares like Photoshop, Illustrator, and InDesign was really fun. It wasn't too difficult for me as I've actually had experience using these softwares in my previous modules (specifically Visual Communication). It was stressful and a lot of work though, as students needs to update weekly on what they've learned, updating their work according to feedbacks, and so much more. If I were to sum up the experience for this task with one word, it would be 'bittersweet'. 

Observations

Having to look through the lecture videos and seniors' works, it has widen my vision of Typography. Works from my classmates were actually fun as well, as I feel like we get to learn so much more form each other. I've also observed the design elements of Typography, which includes examples of kerning, leading, widows and orphans, and so much more. The hierarchy of designs were being fed to me throughout this task.

Findings

Going into this module, I have little to almost no knowledge of typography. As I'm a Mass Communication student picking up Design in Creative Media as my minor, I've found the world of typography to be so much more interesting! The design elements of all the typefaces were so much more complexed than I've anticipated. Text arrangements and alignments, kerning and tracking, these are findings that lectured me about the importance of many design elements surrounding typography. One major finding that I just can't forget from this task is the existence of widows and orphans. Oddly, this finding has just stuck in my mind for the longest time as I've never realised that widows and orphans can actually cause disruption in reading! Overall, I've learned so much in the basics of typography.

---

FURTHER READING

TYPOGRAPHY REFERENCED

by Allen Haley, Richard Poulin, Jason Tselentis, Tony Sedan, Gerry Leonidas, Ina Saltz, Kathryn Henderson and Tyler Alterman

Figure 9.1.0 Cover of Typography Referenced

The book goes through the history of typography, type designers, design elements of typography, and others.

Figure 9.1.1 Screenshot of the topic "Hierarchy'" in the "Typography Referenced" book 

This specific topic talks about hierarchy, which refers to the level of importance of a text that is being expressed. The examples given shows the emphasis the texts has, considering factors like the weight and size of the typefaces. Hierarchy is important to express prominence in texts as it'll shift the reader's attention onto something more important.

Figure 9.1.2 Contrasts in the "Typography Referenced" book

The figure shows the excellent contrast of works done by designers. First example displayed a dark contrast type that complements with the yellow background to make the text stand out. The second example was seen to have many different type sizes, with the larger texts luring in readers, while smaller texts are informations of the map.