Typography Task 1 / Exercises

7.4.2023 - 5.5.2023 / Week 1 - Week 5 
Michael Chan Henn Loong / 0363611 
Typography / BA of Design (HONS) in Creative Media / Taylor's University
Task 1 / Exercises

---

LECTURES

 Introduction to Typography:

In the first Typography lesson, Mr Vinod briefed us on the modules information and modules outcome. After that some awe-inspiring E-portfolio samples from our seniors are provided to us by Mr Vinod so that we have a sample to look at while we are creating our E-portfolio and also on how to write our reflection.

After having my first typography class, I watched the lecture video (Typo_0_Intro) it gave me a new insight on typography. Typography is basically all around us in our daily life, it is widely used in many fields. For an example like animation, websites, software applications, product labelling, signage system etc. Thus typography plays a very important role in delivering message. With the correct typeface and correct using of space the message will be convey. But if a unsuitable typeface is used then it will cause misconceptions and bad ramifications.

• Calligraphy is writing
• Lettering is drawing out the circumference of the letter 
• Font is a design for a set of characters.

Wise words-

"Don't hold on to your own judgment too strongly, have an open mind"
"Style is subjective"
"Processes are necessary to creating good art"
"Learn the rules before you break the rules"
"Learning is never easy, be determined be persistent"

WEEK 1 - LECTURE 1

From the beginning of the lecture, Mr Vinod mentioned something on how that we are living in a world where it is dominated by western media like western soundbites and western media etc. Asians are not championing our own creations as much as we needs to. So Mr Vinod encourages us to do our own part as a student designer which is to do research on local content or aspects from a major community that have not been given voice, shape or form to. It is on us students to bring these knowledge these contents to the larger body of knowledge all around the world. 

"Give Voice to the Voiceless"

So from the lecture we know that letterform was developed by Phoenician back in 4th Century B.C.E and the tools or mediums that were used plays a crucial part in how the letterform would look like. After that the Greeks changed the direction of  writing and developed a style of writing called 'Boustrophedon' , which meant that written text are read alternately from left to right and right to left. The orientation of the letters also changed following the direction of the reading. 

Fig 1.1 Phoenician to Roman

Fig 1.2 Evolution of Phoenician letter

Fig 1.3 Boustrophedon

Timeline of typography development

1450 Blackletter 👉 1475 Oldstyle 👉 1500 Italic 👉 1550 Script 👉 1750 Transitional 👉 1775 Modern 👉 1825 Square Serif/ Slab Serif 👉 1990 Seirf/ Sans Serif

Fig 1.4 Timeline of typography decelopment

WEEK 2 - LECTURE 2

Kerning is an automatic adjustment of space between individual letters or characters whereas letter spacing is adding space between the letters, as for tracking is the adjustments of space between the letters of an entire word. Kerning is mostly focusing on how the type looks creating a readable and pleasing visual.

Fig2.1 Kerning and letterspacing

Text Format

Flush left

Lines starts at the same point ends wherever the last word on the line ends of spaces throughout the sentence are consistent allowing the type to create grey value.

Fig 2.2 Flush left

Centered

Imposes symmetry upon the text, giving equal value and weight to both ends of any line. Centered type creates a very strong visual shape on the page, its crucial to amend line breaks so that it doesn't look too jagged.

Fig 2.3 Centered

Flush right

Places emphasis on the end of the line opposite of flush left, mostly very difficult to read but can be useful in situations where the image and text feels a bit ambiguous and needs a stronger orientation on the right side.

Fig 2.4 Flush right

Justified

achieve symmetrical shape by expanding or reducing the spaces between words and sometimes letters. the resulting gaps can occasionally produce 'rivers' of white space. 'Rivers' are avoidable by making amendments on the line breaks and hyphenation.

Fig 2.5 Justified 

Text👉Type

-If  the font is being seen before the text reconsider the typeface used as it might be unsuitable.

-If the ascender and descender height is smaller than the X- height, the readability is increased.

Fig 2.6 Anatomy of a typeface

Leading and line length

-Text type size should be large enough to be seen at arm's length.

-Lines that are too crowded encourages the reader a vertical eye movement which a reader can easily lose track, as for too lose creates striped patterns that causes distractions

-55 to 65 characters are the ideal numbers for the line length. Extremely long or short line length impairs reading.

Fig 2.7 Leading and line length.

WEEK 3 - LECTURE 3

Indicating paragraphs

Pilcrow (¶) : A symbol used to mark a new paragraph or section of text.

Line spacing (Leading) : Space between the paragraphs. If line space is 9pt, then the paragraph space is 9pt.

Fig 3.1 Line spacing Leading

Standard indention: The indent is the same size of the line spacing or same as the point size of the text.

Fig 3.2 Standard indention

Extended paragraphs: Creates unusually wide columns of text, despite these problems, there can be strong compositional or functional reasons for choosing it.

Fig 3.3 Extended paragraphs

Widows and Orphans

Widow: Short line of type left alone at the end of the paragraph.

Orphan: Short line of type left at the opening of a new column.

Fig 3.4 Widows and Orphans

Headline within Text 

A Head indicates clear break between topics.

Fig 3.5 A heads

B head is subordinate to A heads. B heads indicate a new supporting argument or example for the topic at hand. As such they shouldn't interrupt the text as strongly as A heads do.

Fig 3.6 B heads

C head highlights specific facets of material within B head text, doesn't interrupt the flow of reading. C heads in this configuration are followed by at least an em space for visual separtion

Fig 3.7 C heads

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.

Fig 3.8 Cross alignment

WEEK 4 - LECTURE 4

Typography: Basic

1.Describing letterforms 

Fig 4.1 Describing Letterforms

2. The Fonts

• Uppercase & Lowercase
• Small Capital
• Uppercase & Lowercase Numerals
• Italic 
• Punctuation & Miscellaneous Characters
• Ornaments

Fig 4.2 Uppercase & Lowercase

Uppercase are capital letters that includes certain accented vowels, the c cedilla and n  tilde, and the a/e and o/e ligatures. As for lowercase it includes the same characters as uppercase.

Fig 4.3 Small Capital

Small capital are uppercase letterforms draw to the x-height of the typeface and small caps are primarily found in serif fonts as part of what is often called expert set.

Fig 4.4 Uppercase & Lowercase Numerals 

Uppercase numerals also called as lining figures, they are in the same height as uppercase letters and are all set to the same kerning width. They are mostly used with tabular material.

Lowercase numerals are set to the x-height with ascender and descender, they are best used when using upper and lowercase letterforms.

Fig 4.5 Italic 

Italic refers back to the fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of typeface.

 

Fig 4.6 Punctuation & Miscellaneous Characters

Miscellaneous characters can change from typeface to typeface. It's important to be apprised with all the characters availability in a typeface before you choose the appropriate type.

Fig 4.7 Ornaments

Ornaments are mostly used as flourishes in invitation or certificates. They are usually provided as a font in a larger typeface family. Only few traditional or classical typefaces contain ornamental fonts.

(Adobe calson pro)

3. Describing Typefaces

Fig 4.8 Describing Typefaces

Roman: Letterform is so called because the uppercase forms are derived from inscriptions of Roman monuments, and a slightly lighter stroke in roman is known as 'Book'

Italic: Named for fifteenth century Italian handwriting on which the forms are based. Oblique conversely are based on roman form of typeface.

Boldface: Characterized by a thicker stroke than a roman form. Depending on the relative strokes widths within the typeface it can also be called 'semibold', 'medium', 'black', 'extra bold', or super.

Light: A lighter stroke than the roman form, even lighter strokes are called 'thin'.

Condense: A version of the roman form, and extremely condense styles are often called 'compressed'.

Extended: An extended variation of roman font.

WEEK 5 - LECTURE 5

1. Understanding Letterforms

Fig 5.1 Baskerville A

The uppercase letter forms suggest symmetry, but it is not symmetrical, can see it by the two different strokes weights of the Baskerville; more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Fig 5.2 Univers A

With a close examination shows that 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 both internally harmonious and individually expressive. 

Fig 5.3 Helvetica & Universe

The complexity of each individual letterform is nearly 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.

2. Maintaining X-Height

Fig 5.4 Median & Baseline

X-height generally describe the size of the lowercase letterforms, however, keep in mind that curved strokes such as in 's' must rise above the median ( or lower it down below the baseline) in order for the words to be the same size as the vertical and horizontal strokes they adjoin.

3. Counterform

Fig 5.5 Form / Counterform

Recognizing specific letterforms are important as it develops 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 counterform includes the spaces between them. How well the counters are handled when set type determines how well words hang together, in other words, how well people can read what's been set.

4. Contrast

Fig 5.6 Contrast

WEEK 6 - LECTURE 6

Typography in Different Medium

1. Print Type & Screen Type

Fig 6.1 Print type

Primarily, type was designed intended for reading from print long before we read from screen. A good typeface for print is 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.

Fig 6.2 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 includes 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.

Hyperactive Link / hyperlink

Hyperlink: A word, phrase or image that you can click on to jump to a new document or a new section within the current document. Hyperlinks are found in nearly all webs Web pages, allowing users to click their way from page to another. Text hyperlinks are normally blue and underlined by default.

Font size: For screen is normally 16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounted for reading distance. If read at few inches away fonts are typically set at about 10 points, if at arm's length should be at least 12 points, which is about the same size as 16pixels on most screens. 

Fig 6.3 Pixel differential between devices

Pixel Differential Between Devices: Not only different sizes, but the text you see on-screen differs in proportion too, because they have different sized pixels. 100 pixels on a laptop is very different from 100 pixels on a big 60" HDTV.

Fig 6.4 Static Typography

Static & Motion: 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. 

Fig 6.5 Motion Typography

Motion Typography: Temporal media offer typographers opportunities to "dramatize" type, for letterforms to become "fluid" and "kinetic". Film tittle credits present typographic information over time, often bringing it to life through animation. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type.

---

INSTRUCTIONS

Task 1: Exercise 1 - Type Expression 
In week 1, Mr. Vinod briefed us about our exercise 1 and asked us to choose 4 words from the 14 words that are voted in the class which are crawl, split, plank, wave, cramp, pause, silence, surprise, march, build, party, love, destroy, and tempo. After choosing the 4 words, we are meant to sketch out the words in a manner that the word gets to express itself.

1. Sketches

Fig 7.1 Sketch of Destroy Expression 

Fig 7.2 Sketch of Pause Expression 

Fig 7.3 Sketch of Silence Expression 

Fig 7.4 Sketch of Split Expression PT1 

Fig 7.5 Sketch of Split Expression PT2 

Words I chose: 

-Destroy, Pause, Silence, Split.

2. Digitisation

After sketching out my ideas and thinking back on the feedbacks Mr Vinod gave me I carried on with the digitalising section.

Fig 8.1 Attempts on digitising (1)

After receiving feedbacks that Mr. Vinod gave to the class about the contrast and fonts, I proceeded with another attempt on the word SPLIT. I changed the font from Gill Sans MT Condensed to Futura Std Extra Bold and the background color is changed to black color too so that the word and the effect stands out more compared to the white background earlier.

Fig 8.2 Attempts on digitising (2)

Fig 8.3 Ideas of the four Words after digitising

Destroy

So firstly the idea I have on Destroy is something such as [Fig 2.9] but after finishing up the digitisation on the word it seems a little bit boring and common so after thinking back on some of the examples Mr Vinod showed us I came up with a new idea which is to cut up the letter D [Fig 2.10] so that it feels more destroyed and made it seems like it is falling onto the other letters.

Fig 8.4 Destroy Digitisation process

Fig 8.5 Destroy Digitisation process)

Pause 

For "Pause" I only struggled a little bit on the font as I already have an idea on how to express the words.

Fig 8.6 Pause digitisation process

Fig 8.7 digitisation process

Silence

As for silence I thought of not doing anything too flashy so that it suits the word silence so firstly I only added the word silence and left it there in the white background, but after a few look at it I think it's not enough the silence is not there so I added in another black background in it and I think it feels better now.

Fig 8.8 silence digitisation process

Fig 8.9 silence digitisation process

Split 

Well for split I didn't actually suffer much as I already have an idea on what font and how to express the word.

Fig 8.10 split digitisation proceess

Fig 8.11 split digitisation process

For split, silence and pause I only tried a 1-2 times and I've got the feeling and idea that I want, but for destroy I tried various types of ideas and fonts but I still don't get the feeling every attempt felt lacking and the expression isn't as strong, but luckily I got the idea that I've shown on Fig 8.5.

Final Result:

Fig 8.12 Final Type Expression - JPEG

>

Fig 8.13 Final Type Expression - PDF

3. Type Expression Animation

In week 3 due to Public holidays we don't have any classes so we followed the links Mr Vinod provided us with and also the feedbacks that are given we proceeded with the Type Expression Animation phase. I chose destroy, split and pause to animate because I'm curious in how these three words would look like after I've animate them.

Fig 9.1 Split Animation

Fig 9.2 Pause Animation

Fig 9.3 Destroy Animation

After having Mr Vinod look through these 3 of my animate word expression my final choice is "pause" as it is the best choice for me. I used total of 17 frames so that the animation looks smoother and faster.

Fig 9.4 Final animation timeline (17 frames)

Final Animated Type Expression 

Fig 9.4 Final Animated Type Expression "Pause" - GIF, Week 4

Task 1: Exercise 2 - Text Formatting

After the lecture, I carried on with the explorations on the Typefaces and experimented on different types of fonts. In this exercise we are introduced to INDESIGN it's a new application that we are just exposed to so it is quite fun to play with and it is quite valuable to our further exploration on the exercise in the future.

Fig 10.1 Explorations on Text type

Fig 10.2 Explorations on Text type (with kerning)

Fig 10.3 Before and after kerning

Notes:

• Leading: +2 pt of point size / +2.5 or 3 base on typeface. Different typeface have different x-height that might extend over the baseline grid.
• Body Text: Make sure the positive and negative space is balance. (middle gray value)
• Line Length: 55-65 (Body text)
• Headings: Double of the point size and leading of the body text.
• Paragraph Spacing: same pt as Leading
• The limitation for tracking paragraph or sentences are +3/-3 
• Check and avoid rivers while using justify.
• Check cross alignment.
• Widows and orphans are prohibited.

Fig 10.4 With and without kerning

Without kerning there were a lot of ragging and even some widows and orphans in the layout attempts, ragging decreases the readability of a paragraph so I had to kern the whole layout so that it looks smoother thus the increases of the readability. 

Fig 10.5 Layout process

Fonts: Futura Std (Medium, Book), Gill Sans (Bold)

Point Size: 10 Point (Body Text), 25 Point (Heading)

Leading: 13 Point (Body Text), 36 Point (Heading)

Paragraph Spacing: 13 Point

Alignment: Lest justify

Fig 10.6 Screenshot of hidden characters

Final Task 1: Exercise 2 - Text Formatting

Fig 10.6 Final Task 1: Exercise 2 - Text Formatting (without grids)

Fig 10.7 Final Task 1: Exercise 2 - Text Formatting (without grids)

Fig 10.8 Final Task 1: Exercise 2 - Text Formatting (with grids)

Fig 10.9 Final Task 1: Exercise 2 - Text Formatting (with grids)

---

FEEDBACK

Week 2

Questions:
- Are the exploration sufficient?
- Does the expression match the meaning of the word?
- On a scale of 1-5 how strong is the idea?
- How can the work improve?

General feedback
- Avoid graphics, illustrations and distortion as much as possible. While brainstorming just let everything out make judgement after everything is out so that it wont stop the flow of ideas coming out, just let everything out and choose the best for our future development. While doing all that checking on the font are important too, make sure that it fits the font that are provided so that it'll be easier to further develop and experiment on the ideas created. We should also check on the design of our typefaces in case it doesn't match with the typefaces Mr Vinod provides us.

Week 4

General feedback:
- After reaching the end of the animation frame stop the GIF for 2 to 3 seconds and adding in more frames can make the whole GIF smoother and not so jerky. As for the word "PAUSE" it needs to continue, cant just stop after reaching the stopping point it got to continue after the point so that it represents and expresses pause. 

Specific feedback:
- stick with "SPLIT" & "PAUSE" , "PAUSE" is currently best choice, leave the "DESTROY".

Week 5

General feedback:
- When text stands out too much from the text the rhythm of the text is broken it breaks down the harmony. If greyness is broken fix it by changing it to a small capital, if there is no small capital for a font change the the size of that particular word to 1 or 0.5 smaller. All text should be connected so that missed out lines can be noticed. Check the spaces in the whole layout make sure its nice.

Specific feedback:
- Picture is not related and futura light is not suitable for the exercise as it is too soft. The by line should follow the leading as well. As for the font futura have longer ascender and descender so maybe putting 0.5 or 1 point to the point size would be more appropriate. Submit work on 14th May.

---

REFLECTIONS

Experience:
In this exercise I've gained various basic theories of typography as well as basic skills in this field. It was challenging at the start to come up with ideas to express the words as we are only allowed to use the limited 10 typefaces and no graphics or distortions are allowed. After the 1st progression checking I realized that my some of my ideas are pretty similar to my classmates, so getting a unique idea have also become one of the challenges. As we moved on to the digitalising stage, it's actually quite fun as we get to learn on how to harness Adobe Illustrator and Photoshop. As for exercise 2 it's quite frustrating as there are various rules and theories in this field, it took quite awhile to coop with it and comin up with various of compositions but it was still fun in learning how to use In Design.

Observations:
Throughout this whole exercise, I've noticed that typography is quite important in the design field, as it is also used in many design works, and with the right composition and knowledge typography can bring in a new form of experience for the audience or readers.

Findings:
I realized that typography has many rules and theories which took quite awhile to digest and get used to. We need to experiment more and train ourselves to scrutinize on every little details there are in our work, and while we are checking on our or others work we should also behave in a open minded way while we are criticizing the work it can also help us improve.

FURTHER READING

Elegant Web UI Design Techniques: Flat Design & Colors

Fig 11.1 Elegant Web UI Design Techniques: Flat Design & Colors

Week 1

" The color of the world around us is one of the strongest influences on our choices in web design. In fact, cues from fashion and interior design seem to have an even stronger influence on color trends across all aspects of design. " Page 8, paragraph 2

Week 2

" Vibrant color is core to the minimalist design trend as well. Pops of color provide emphasis and points of entry in stripped-down designs that might otherwise be lacking. " Page 13, paragraph 1

Week 3

" Designers need to think about meanings and cultural associations that are connected to certain hues. While these common feelings are not always set in stone, they should be part of the conversation when talking about color for a design project. " Page 15, paragraph 4

• Pink: Romance, Youth, Confidence, Sensitivity
• Red: Love, Passion, Danger, Urgency
• Yellow: Fun, Optimism, Happiness, Caution
• Orange: Warmth, Ambition, Enthusiasm, Creativity
• Green: Nature, Luck, Growth, Safety
• Blue: Harmony, Tranquility, Trust, Honor
• Purple: Wealth, Power, Spirituality, Calmness

Week 4 

" Bright color is a fun way to bring attention to buttons and calls to action. " Page 26, paragraph 1

" Consider a color that contrasts dramatically with everything else on your site for most impact. " Page 26, paragraph 2

Fig 11.2 Ghost buttons

Week 5

" Ghost buttons are designed as a transparent, yet clickable, element, ghost buttons provide a visual interaction cue without obstructing the UI design. Because a ghost button is essentially an outline and does not look like an obvious button, it allows the background to share the focus. " Page 46/47, paragraph 1

---