Typography Task 1: Exercise 1 & 2

August 27, 2021

Typography Task 1: Exercise 1 & 2

27/08/2021 - 24/09/2021 (Week 1 - Week 5)

Evaleez Voo Lian Yun / 0350275
Typography/ Bachelor of Design (Hons) in Creative Media
Task 1/ Exercise 1 &2

Lectures

Lecture 1: Development

Early Letterforms

At the core, uppercase forms are simple combination of straight lines and pieces of circles, as the materials and tools of early writing required.
How letters look are highly affected by the tools that were used.
The Greek developed a style of writing called ‘boustrophedon’ (lines of text read alternately from right to left and left to right). Orientation of letterforms were affected by this change.

Fig 1.0 Boustrophedon (30/08/21)

Phoenician to Roman

Carvers working in marble painted letterforms before inscribing them. Which brought about certain qualities of their strokes onto the carved letterforms.

Fig 1.1 Phoenician, Greek and Roman (30/08/21)

Hand Script

Square Capitals

Have serifs to the the finish of the main strokes (achieved by reed pen at 60 degrees off the perpendicular).

Rustic Capitals

Compressed version of Square Capitals (Pen/ brush at 30 degrees off perpendicular).
Harder to read.

Uncials

Small letters.
More readable than Rustic Capitals.

Half-uncials

The formal beginning of lowercase letterforms.
Has ascenders and descenders.

Timeline

Fig 1.2 Timeline 1 (31/08/21)

Fig 1.3 Timeline 2 (31/08/21)

Text Type Classification

1450 Blackletter

Earliest printing type
Based upon hand-copying styles for books in Northern Europe.
Examples: Cloister Black, Goudy Text

1475 Old Style

Based upon the lowercase forms used by Italian humanist scholars for book copying.
Examples: Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino

1500 Italic

Condensed and close-set (more words per page).
Since the 16th century, virtually all text typefaces have been designed with accompanying italic forms.

1550 Script

An attempt to replicate engraved calligraphic forms.
Not entirely appropriate in lengthy text settings.
Examples: Kuenstler Srcipt, Mistral, Snell Roundhand

1750 Transitional

Thick to thin relationships were exaggerated, and brackets were lightened.
Examples: Baskerville, Bulmer, Century, Time Roman

1775 Modern

Unbracketed serifs.
Extreme contrast between thick and thin strokes.
Examples: Bell, Bodoni, Caledonia, Didot, Walbaum

1825 Square Serif/ Slab Serif

Response to the newly developed needs of advertising for heavy type in commercial printing.
Brackets were dropped.
Examples: Clarendon, Memphis, Rockwell, Serifa

1900 Sans Serif

Eliminated serifs alltogether.
Humanist forms (Gill Sans)/ Rigidly geometric (Futura).
Also referred to as grotesque and gothic.
Examples: Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothic, Univers

1990 Serif/ Sans Serif

Include both serif and sans serif alphabets.
Examples: Rotis, Scala, Stone

Fig 1.4 Text Types (30/08/21)

Lecture 2: Basics

Component Parts

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’.

Fig 1.5 Typography Basics (02/09/21)

Stroke - Any line that defines the basic letter form.
Apex/ Vertex - Point created by joining two diagonal stems.

Apex: Top
Vertex: Bottom

Arm - Short strokes off the stem (horizontal or inclined upward)
Ascender/ Descender

Ascender - Portion of the stem of a lowercase letterform that projects above the median.
Descender - Portion of the stem of a lowercase letterform that projects below the baseline.

Barb - Half-serif finishe on curved stroke.
Beak - Half-serif finish on horizontal arms.
Bowl - The rounded form that describes a counter (open or closed)
Bracket - Transition between serif and stem.
Cross Bar - Horizontal stroke that joins two stems (uppercase).
Cross Sroke - Horizontal stroke that joins two stems. (lowercase).
Ear: Stroke extending out from the main stem/ body.
Em/en

em - The distnace equal to the size of the typeface.
en - 1/2 of em

Fig 1.6 em/en (02/09/21)

Finial - Rounded non-serif terminal to a stroke.
Ligature - Character formed by the combination of two or more letterforms.

Fig 1.7 Ligatures (02/09/21)

Serif - The foot at the end of the stroke (right angled/ oblique).
Stem - The significant vertical/ oblique stroke.
Stress - Orientation of the letterform, indicated by the thin stroke in round forms.

Vertical stress

A transition from copying hand-written writing (which was slightly slanted)
Started when Baskerville decided there was no need to follow it.

Fig 1.8 Stress (02.09/21)

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

"DON'T PUT THEM TOGETHER TO FORM A WORD OR NAME" - Mr Vinod.

Fig 1.9 Swash (02/09/21)

Typeface Ranges

Uppercase

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

Lowercase

Include the same characters as uppercase.

Small Capitals

Uppercase letterforms drawn to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called expert set (not a common term atm)

Fig 2.0 Small Capitals (02/09/21)

Uppercase Numerals (Lining figures)

These numerals are the same height as uppercase letters and are all set to the same kerning width.

Lowercase Numerals (Old style figures/ text figures)

Numerals are set to x-height with ascenders and descenders.
Best used when ever you would use upper and lowercase letterforms.

Fig x.x Uppercase Numerals (02/09/21)

Fig 2.1 Lowercase Numerals (02/09/21)

Italic

The forms refer back to fifteenth century Italian cursive handwriting.
Oblique are typically based on the roman form of the typeface

Punctuation/ Miscellaneous Characters

Can change from typeface to typeface.
Be acquainted with all the characters available in a typeface before you choose the appropriate type for a particular job.

Ornaments

Used as flourishes in invitations or certificates.

Describing Typefaces

Roman

Uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as ‘Book’.

Italic

Based off 15th century Italian handwriting.
Oblique conversely are based on roman form of typeface.

Boldface

Thicker stroke than a roman form.
Also be called ‘semibold’, ‘medium’, ‘black’, ‘extra bold’, or super depending on the relative stroke widths within the typeface.

Light

A lighter stroke than the roman form.
Even lighter strokes are called ‘thin’.

Condense

A version of the roman form
Extremely condense styles are often called ‘compressed’.

Extended

An extended variation of a roman font.

Fig 2.2 Typefaces (02/09/21)

Lecture 3: Text Pt.1

Kerning & Letterspacing

Kerning

Automatic adjustment of space between letters. (Often mistakenly referred to as letterspacing)

Letterspacing

Add space between the letters.

Tracking

The addition and removal of space in a word or sentence.
Example: (Top left downwards) Univers 55, Normal Tracking, Tight Tracking, Loose tracking.

Fig 2.3 Tracking (05/09/21)

Formatting Text

Flush Left

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.

Centered

Imposes symmetry upon the text, assigning equal value and weight to both ends of any line.
Adds a pictorial quality to material and creates a strong shape on the page (line breaks need to be amended so the text does not appear too jagged).

Flush Right

Emphasizes the end of a line.
Useseful in situations where the relationship between text and image might be ambiguous without a strong orientation to the right, e.g captions.

Justified

Expands or reduces spaces between words and letters.
Occasionally produce ‘rivers’ of white space running vertically through the text (edit line breaks and hyphenation to amend this problem).

Text/ Texture

If you see the typefacae before the actual words, change the type.
Type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page.
Fig 2.4 Anatomy of a Typeface (05/09/21)
Comparative examples:

Fig 2.5 Text/ Texture (05/09/21)
Text/ Leading and Line Length
Designing goal: Easy, prolonged reading.
Type size
Large enough to be read easily (imagine yourself holding a book in your lap).
Leading
Text that is set too tightly encourages vertical eye movement.
Type that is set too loosely creates striped patterns that distract the reader.
2-3 pts of leading space = good.
Line length
Shorter lines require less leading; longer lines more.
Line length between 55-65 characters = good
Fig 2.6 Leading Problems (05/09/21)

Compositional Requirement
Text should create a field that can occupy a page or a screen.
not a series of stripes
Think of your ideal text as having a middle gray value.
Checking/ Testing the outcome with the intended medium = good.

Lecture 4: Text Pt. 2

Indicating Paragraphs

Pilcrow (¶) - Gliph

Line Space

If the line space (leading) is 12pt, then paragraph space is 12pt. (ensures cross-alignment).
Must be equal to maintain cross alignment.

Fig 2.7 Paragraphs (05/09/21)

Personal Notes:

Fig 2.8 Personal Notes 1 (30/08/21)

Fig 2.9 Personal Notes 2 (30/08/21)

Fig 3.0 Personal Notes 3 (30/08/21)

Instructions

Module Information Booklet

Task 1: Exercise 1 - Type Expression

Visual Research

From the get go, we were given seven words to choose from, i.e. Space, Glitch, Water, Broken, Abyss Bark and Colossal; Terror being a compulsory word. Among these words, I decided to go for Glitch, Space and Water as they are quite flexible to use + I already had an idea for space.

Before sketching, I googled the definitions of the four words to get some inspiration and understand them in a different perspective. Some definitions from Marriam - Webster:

Terror

A state of intense fear
Violence or threat of violence

Glitch

A usually minor malfuction

Space

An extent set apart or available
A blank area
A period of time
The region beyond the Earth's atmosphere

Water

The liquid that descends from the cloud as rain, forms streams, lakes and seas and is a major cosntituent of all living matters.

Idea Exploration and Description

i. Sketch 1

After researching their respective meanings, I started my first sketches witih water and space.

Fig 3.1 Water Sketches (30/08/21)

Fig 3.2 Space Sketches (30/08/21)

ii. Sketch 2:

After receiving feedback from the session in Week 2, I sketched again (using Clip Studio Paint) and came up with these 12 designs:

Fig 3.3 Final Sketches (05/09/21)

From top left downwards:

Since terror brings in the meaning of "threat of violence" I made the "TE" and "OR" bigger with a "mouth" in the middle, so viewers will percieve them as "beasts" or anything that might devour you :). Meanwhile, the two Rs are their prey.
For this design, I was thinking of extreme fear, so the R is falling down a cliff its counterpart R is starig in fear.
Terror screams fear and thus an exclamation mark seemed appropriate.
As you can see, the words are supposed to be a vertical tower but the I glitched to another plane.
In my opinion this design is pretty basic. Also the T is a bit too distorted, although it does look kinda cool.
For this design I went for a simple yet understandable approach. The word glitch is continously appearing but is random places - a minor malfunction.
This was inspired by the space bar. From the design, you can see how the "SP" is separated from the "ACE". A line was added to give more depth.
Social distancing.
This embodies the "space is the region beyond the Earth's atmosphere". It is 'space' in the form of a meteor.
I was going for a rain feel. Hence, droplets of water.
Another drop of water in the "A" part, although this is referenced more of a drop of water in a pond/ lake.
A tap with the water droplet formed from the word "water".

iii. Sketch 3

Fig 3.4 Sketch 3 (11/09/21)

From top left downwards:

I chose this design because its simple but it speaks a thousand words. I also moved it downwards to emphasize more "space" above.
Glitch is the same as the sketch but I made it more chAotiC.
As I was choosing the TEROR design (the one where R fell) , I realized it was more suited for the "Abyss" word as it is falling into an abyss. Hence, I redesigned it and chose to place it in the final peice.
For terror, I further designed the first choice by adding some shadows at the back so it looks more domineering.

Process (Week 2)

Fig 3.5 Process Photos 1 (11/09/21)

Fig 3.6 Process Photos 2 (11/09/21)

Outcome (Week 5)

Fig 3.7 Final Type Expressions (24/09/21)

Description:

Space

I added the rectangle from the feedback by Mr Vinod to show a spacebar.

Glitch

I used the previous sketch I had that the lecturers liked (also confirmed that the distortion is bearable).

Abyss

I made it look like it's falling into an abyss, and also changing the shades of each word to enhance the effect.

Terror

After receiving feedback from the lecturers, I eidted "Terror" to look more like it's eating the two Rs in the middle. Besides adding teeth to make it look like a mouth, I changed the colours of the two Rs to so the one in the back looks like it's being swallowed.

Process (Week 13)

I wasn't really satisfied with my outcome on Week 5, so I recreated the words ABYSS and TERROR.

Fig 3.8 Abyss Design Week 13 Process 1 (19/11/21)

This idea is inspired by the blackhole. In a way, it looks as if the words are sinking deeper and deeper down into its own abyss. To create this effect, I started off with a Futura and slowly layer each word down. The reason I didn't do all the words together was because it was harder to adjust the depth and shape of the typeface.

Fig 3.9 Abyss Design Week 13 Process 2 (19/11/21)

When doing the two s in by design, the curve was harder to adjust bacause it won't follow the bottom shapes well. It looked like the letters were going out of the page instead.

Fig 4.0 Abyss Design Week 13 Process 3 (19/11/21)

I tried different types of ways to make it look like it's going into the void.

Fig 4.1 Terror Design Week 13 Process 1 (20/11/21)

After finalizing the ABYSS (be patient, you can see it soon ( ͡≖ ͜ʖ ͡≖)/ ). I started to design TERROR, this design was inspired by thorns, because I got pricked by my mother's flowers recently. I started off with Futura as well, and slowly added the thorns in.

Updated Final Outcome (Week 14)

Fig 4.2 Week 14 Final Compilation (23/11/21)

If you compare this outcome with the one I made in Week 5, you can kinda see how, me, as a designer, stabilized my self. My work was more on the messier, loud side when the semester started. As I have stated before, the ABYSS is inspired by blackholes and voids. I made it so it looks like the words are sinking deeper and deeper down into its own abyss. For terror, it's just getting stabbed, over and over again :).

PDF:

Type Expression Animation

i. Draft 1

Fig 4.3 Glitch Animation 1 (16/09/21)

Description:

This was inspired by the movie "Wreck-It-Ralph" where the kid glitches everywhere.

Process (Week 5)

Fig 4.4 Animation Process (18/09/21)

I added more frames (without the glitching T) to the animation but when I redid it according the the feedback (aka making the climax) I realized the extra frames were redundant so I chucked them away.

Outcome (Week 5)

Fig 4.5 Glitch Animation (24/09/21)

After the feedback from lecturers, I added a climax moment at the end, which consists off all the cahracters glitching.

Process (Week 13)

Besides the word ABYSS and TERROR, I was also dissatisfied with my animation, the more I look at it, the more unnatural it feels.

Fig 4.6 Glitch Animation Week 13 Process (20/11/21)

After 13 weeks of design school, safe to say I have learnt a thing or two about animation. Since the MIB doesn't restrict us from using timeline animation, I decided to use the skills I learned in these 13 weeks to good use.

Outcome

Fig 4.7 Glitch Animation Outcome Week 13 (20/11/21)

This was the first outcome. However, I think it's a bit slow, especially the front part.

Process (Week 14)

Fig 4.8 Glitch Animation Week 14 Process (23/11/21)

I edited the timing, added more climax to the end and increased the paise at the end, giving it a "Oh no, it glitched and now it's broken." experience.

Updated Final Outcome

Fig 4.8 Glitch Final Outcome Week 14 (23/11/21)

Exercise 2

Without Kerning:

Fig 4.6 Without Kerning (23/09/21)

With Kerning:

Fig 4.7 With Kerning (23/09/21)

Process

Fig 4.8 Kerning Process 1 (23/09/21)

Doing the ragging for the sentences to allow for a more organic look.

Fig 4.9 Kerning Process 1 (23/09/21)

I used the guildelines to fix the sentences in place.

Fig 5.0 Kerning Process 1 (23/09/21)

Final touch-ups with the alignment.

Final Outcome

Fig 5.1 Final Kerning and Leading Outcome (24/09/21)

PDF:

There is an orphan there. I tried everything and it's still there. I'm sorry Mr Vinod. In my opinion, everything else is placed nicely in terms of readability and how it is presented overall, except for that one orphan.

Feedback

General Feedback

Week 1

Revert to default theme until you are better at Typography (aka sometime at the end of the course) ✍(◔◡◔)
How to add line: <hr />

Week 2

Use a square format
Be careful with the amount of distortion
Don't cut the space diagonally in half

Week 3

No colours
Use 7pt for the texts under the frames (for the font name).

Week 4

Do not use too much illustrations on your animation.
How to ensure you background is maintained within the artboard: Extend it further.

Specific Feedback

Week 2

Lecturers:

You have to catch up on your sketches.

Peers:

They like the space designs
Water is a bit incoherant

Week 3

Lecturers:

Use the 10 type faces ONLY
Abyss can be distorted a bit more with different perspective to show that it's falling.
Glitch is not really obvious, should use previous design (The one with distorted T). *Distortion is okay here since its only one word.
Space should emphasis more on the space bar (make a rectangle).

Week 4

Lecturers:

Glitch animation needs to add some sort of climax.
Try and make the other words inside GLITCH to be affected as well.

Peers:

The use of different shades in the T was good.

Reflection

Experience

Typography is very meticulous, which was hard for me as I am more of a bigger picture type of person. Although it was rather fun to experiment with different typefaces.

Observations

Different typefaces can bring about a different conversation to the who design. Chosing the right one can help accentuate your designs even further.

Findings

I realized that creating the eportfolio that a very long time and added a mental note to myself to do it WAY earlier. Also, typography may seem simple but it's a very complex thing to learn especially since it will affecct the overall balance and how people will interpret your design and layout.