Typography - Task 1

29 August 2022 - 19 September 2022 / Week1 - Week 5

Sim Jia Min 0349784

Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University

Task 1: Type Expression & Text Formatting 

---

LECTURES

Week 1: 

Typo_1_ Development

The content of this lecture is from the perspective of the western community, it is a fact that the information nowadays is dominated by western media, so we are encouraged to develop an independent thinking mindset to choose what to belief and absorb. We are also encouraged to do research based on the info from local media, our own community. 

Early letter form development: Phoenician to roman

- Writing: scratching into wet clay with sharpened stick/ carving into stone with chisel

 evolution of phoenician letter (image)

- Phonecians wrote right to left.

- Greek changed the direction of writing into another style, 'boustrophedon': read alternately from right to left and left to right. (image)

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

- square capital (4th or 5th century): found in Roman monuments, known as serif fonts. 

- Rustic capitals (late 3rd - mid 4th century): compressed version of square capitals. Allow many words on a sheet of parchment & took less time to write. Faster and easier to write but harder to read.

- Roman cursive (4th century): simplified for speed writting. The beginning of lowercase letterform.

- Uncials (4th - 5th century): incorporated some aspects of Roman cursive. More readable at small size than rustic capitals.

- Half-uncials (C:500): further formalization of cursive hand. The formal beginning of lowercase letterforms.

- Charlemagne (C:925): first unifier since Romans. The standardization of writting system.

Blackletter to Gutenberg's type

- after the dissolution of Charlemagne

- A condense strongly vertical letterform

- gained popularity in Northern Europe 

- in south, a rounder more open hand gained popularity: 'rotunda'

-Gutenberg: type mold required different brass matrix, negative impression for each letterform

Live lecture recap:

Today's live lecture is the introduction to typography, Mr Vinod gave us a brief explanation about this module and look through the module information. We also did our e-portfolio in the class by watching a recorded Youtube tutorial, the tutorial is honestly very useful because it taught me the basic skills for working on this e-portfolio website. Mr Vinod also provided some seniors' e-portfolio for reference use, those e-portfolio are very neatly done and have some decent website design. Task were also given before class ended, which is type expression sketches for our first assignment.

Week 2: 

Typo_2_ Basic

Describing letterforms:

- Baseline: Imaginary visual base of letterforms

- Median: Imaginary line defining the x-height

- X-height: Height of lowercase 'x'

- Stroke: any line that defines letterform

- Apex/Vertex: The point created by joining two diagonal stems, apex top & vertex bottom (Example: A, M, V)

- Arm: Short/thin strokes off the stem of letterform

- Ascender: Strokes that exceed above median line

- Barb: The half-seif finish on curved stroke

- Beak: The half-serif finish on horizontal arms

- Bowl: Rounded form in letterform (example: b,d,p,q)

- Bracket: The transition between serif and stem

- Cross bar: Horizontal stroke that connects two stems together (exp: A, H)

- Cross stroke: Horizontal stroke that cross stem (exp: f, t)

- Crotch: Interior space of two stroke meet (exp: K, V) 

- Descender: Stroke that exceed below median line

- Ear: Stroke that extending out from main stem

- Finial: Rounded non-serif terminal to a stroke

- Leg: Short stroke off the stem/ inclined downward

- Ligature: The character formed by combination of letterforms

- Link: Stroke that connects bowl and loop of lowercase 'g' (in certain typefaces)

- Loop: The bowl in the descender of lowercase 'g' (in certain typefaces)

- Serif: Right angled / oblique foot at the end of stroke

- Shoulder: curved stroke which not a part of a bowl

- Spine: The curved stem of 'S'

- Stem: Significant stroke

- Stress: Vertical stress/diagonal stress, indicated by the think stroke in round forms

- Tail: The cured diagonal stroke at the finish (Exp: Q)

- Terminal: The finish of a stroke without serif

Live lecture recap:

This is the week of updating the progress of type expression sketches. During the feedback session, Mr Vinod mentioned that it is important to make sure the type sketches will fit the 10 typefaces given and also avoid adding too much illustration in the sketches because they mostly not going to work on those 10 typefaces. After the feedback session, we started to digitalise the sketches in Adobe Illustrator, Mr Vinod taught us some important tools that can be useful in our works before starting, such as the knife tool, which is super useful for creating "fragile" type expression. The task for this week is to finish up the four type expressions.

Week 3: 

Typo_3_Text_P1

Tracking: Kerning & Letterspacing

- Kerning: The adjustment of space between letters

- Letterspacing: add space between letters

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

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 the text, assigning equal value and weight to both ends of any line. 

- Flush right: places emphasis on the end of a line as opposed to its start. Opposite of flush left.

- Justified: Similar with centred but symmetrical shape on the text by expanding or reducing spaces between words or letters. 

Texture

- Characteristics of each typeface, different types of textures of typefaces suit different messages

- textures: Cap/Height/X-height/letter-spacing/serif/stem/stroke/ascender/descender/aperture/leading/baseline

Leading & Line Length

Type size: Big enough to read easily at arm length

Leading: Tight texts are hard to read. Text that set too loose also will distract reader

Line length: Appropriate line length is between 55-65 characters in a line.

Live lecture recap:

We are first guided to save our type expression as a jpg file in 300dpi, then he started giving us feedback based on our work. Based on other peers' work, he suggested that to avoid making the types become too small because it will lose the visual impact, it is important to have a balance within the types and spaces. Too much extra decorating on fonts will also make the word lose its original meaning. Avoid applying distorted effects on types when unnecessary. For animation, he suggested doing some simple sketching before going into the animating phase. It is important to make the animation based on the meaning of the word.

Week 4: 

Typo_4_Text_P2

Indicating Paragraphs

Pilcrow (¶): A holdover from medieval manuscripts seldom use today.

- Ensure cross-alignment: line space and paragraph space set at the same pt

Widows & Orphans

- 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

- Must take care to avoid widows and orphans.

Highlighting Text

- Different emphasis reuire different kind of contrast (bold/italic/different typeface/red texts)

- Sans serif fonts need to be reduced size to match the x-height of serif typeface

- When highlighting text by placing field of colour at the back of texts, maintaining the left reading axis

- Place certain typographic elements outside the left margin to maintain strong reading axis

Headline within Text

- Ensure the heads clearly signify to the reader

- Putting a sequence of subheads together = hierarchy

 

Cross Alignment

- Cross aligning headlines and captions with text type reinforces the architectural sense of the page. 

Live lecture recap:

The lecture started with reviewing the animation of type expression. After that, we refined our animation and then watched the 5 recorded lectures on Youtube. The recorded lectures are some tutorials for guiding us to learn using InDesign for the final task of this exercise, which is text formatting. The expected learning outcome of this task is understanding the relationship between font size, line length, leading & paragraph spacing. 

Week 5:

Typo_5_Understanding

Understanding letterforms

- Some uppercase letter forms might look symmetrical but they are actually not. They sometimes have different stroke weights.

- Some uppercase letters are symmetrical, but with close examination you might notice that the width of strokes is different.

Maintaining x-height

- The size of the lowercase letterforms is indicated by the x-height. To appear to be the same size as the vertical and horizontal strokes they adjoin, curved strokes, like the letter 's' must rise above the median (or descend below the baseline).

Form/Counterform

- Letterforms developed a sensitivity to counterform: space contained by the strokes of the form

- Counterform includes the spaces between the letters which joined to form words.

- Understand the counter: look at the close detail of letter

Contrast

- It is important to apply on types. 

- Small & organic/large & machined ; small & dark/large & light

Typo_6_Screen&Print

Type for Print

- It is important to ensure that the text is smooth, flowing and pleasant to read.

- Good typeface for print: Calson, Garamond, Baskerville; because their characteristic are elegant, intellectual & highly readable when set at small font size

Type for Screen

- Use on the web and modified to enhance readability and performance on screen. (taller x-height, wider letterforms, more open counters, heavier thin strokes, etc.)

- More open spacing to improve readability in digital environments

Font size for screen

- 16 pixel text: same size as text printer in a book/ magazine (10-12 pt)

System Fonts for Screen

- Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

Static Vs Motion

- Static typography: minimal characteristic in expressing words (exp: bold/italic)

-Billboards, posters, magazines, etc.

- Motion typography: "dramatize" types, bring types to life through animation, also known as "animated types".

- Overlaid onto music videos and advertisements.

- Make types become more expressive, helping to establish the tone of associated content

---

INSTRUCTIONS

Task 1: Exercise 1 - Type Expression

Facebook poll majority voted:

• Distort 
• Bite
• Cozy
• Fragile
• Box
• Accelerate

My picks: Distort, fragile, box & accelerate. 

1. Sketches:

I did these sketches on Photoshop, some are digitally handrawn, and I also directly used the given typefaces to see if my ideas work on the typefaces.

Figure 1.1: Fragile Type Sketch (Week 2, 6/9/22)

1: Contains detailed glass crack marks to create a more realistic fragile effect, but more detailed works need to do in the digitalisation phase.

2: Some simple slices without detailed crack marks, easier to digitalise but basic. 

Figure 1.2: Distort Type Sketch (Week 2, 6/9/22)

Warp is applied to the typefaces to create distorted effect. 

Font used: Univers LT Std Bold Condensed

Figure 1.3: Box Type Sketch (Week 2, 6/9/22)

The term "box" reminds me of three-dimensional square, so I arrange these three letters into a cube form. For the digitalised type on the right, things that I think need to be improved are that the "O" need to be adjusted into a slightly square shape, and perhaps also use a thinner font.

Font used: Univers LT Std Bold Condensed

Figure 1.4: Accelerate Type Sketch (Week 2, 6/9/22)

1: The first few letters stick with each other closer, while the others gradually distance further, it is to create the visual effect of the letters accelerating and slowly pulling away from the others. But I also think this design is too plain and simple.

2: The blur effect is for indicating accelerated motion from the bottom. It well presents the term's meaning but I feel like just adding a motion blur effect is not enough effort for the final work.

3: This particular perspective is applied to give a visual effect of the subject accelerating from a distance until it becomes closer. 

I feel like perhaps I can combine all the elements of these three designs together for my final type expression. 

Font used: Univers LT Std Bold Condensed

2. Digitalisation Process

Figure 1.5: Digitalised "FRAGILE" attempt during practical class (Week 2, 6/9/22)

Figure 1.6: Using slice tool to create the fragile crack marks. (Week 2, 6/9/22) 

This design is referring to my sketches for "fragile". Mr Vinod mentioned that slice tool is very useful for the digitalisation of type expression, so I tried to use it for my first attempt. Obviously, this tool is working perfectly on making "fragile" crack marks. I choose a bold sans serif font to make the crack marks clearly visible, I think that applying crack marks on a light font will not be visually strong enough.

Figure 1.7: "BOX" cube expression (Week 3, 13/9/22)

Figure 1.8: Transform the perspective of each letter by using shear tool to form a cube shape. (Week 3, 13/9/22)

Since I really like this cube shape idea in my sketches, so I just go for it. Transforming the perspective is quite difficult for me, especially the "O", I spent the most time on adjusting it. 

Figure 1.9: Few attempts of "DISTORT" (Week 3, 13/9/22)

Since I felt that my sketches for "distort" is a little bit common and boring, I try out some different designs for it. I didn't choose any of these for the final because they look a bit awkward to me. Too much distortion for #1 and #2, while for #3 I used the distorted line as text pattern but it doesn't really show the term's meaning.

Figure 1.10: Final pick of "DISTORT" (Week 3, 13/9/22)

This is my last attempt of "distort", I tilted the text to the left and made a distortion from the top right corner to the bottom left corner, sort of looking like liquid is pouring down. This is my favourite design for "distort" because the distortion only affects few letters and also well-present the term's meaning.

Figure 1.11: Initial attempt of "ACCELERATE" (Week 3, 13/9/22)

Figure 1.12: Blend tool- To make the motion blur effect (Week 3, 13/9/22)

Since motion blur can accurately and simply present the meaning of "accelerate", I decided to go for it. I discover that motion blur can be created by using the blend tool after watching a youtube tutorial. https://youtu.be/MkIJZ1pquCk 
I also distorted the perspective of it to make a visual effect of an object accelerating from a far distance. 

Figure 1.13: Refined "ACCELERATE" (Week 3, 13/9/22)

During the feedback session, Mr Vinod mentioned that my motion blur and the text perspective don't look like have the match direction. So I adjusted the motion blur from left to right and make the text not so tilted to make it be like an object (like a train) accelerating in a further direction.

Final Type Expression

Figure 1.14: Final Type Expression (Week 3, 13/9/22)

Figure 1.15: Final Type Expression PDF (Week 3, 13/9/22)

3. Animation

 I chose "distort" to develop the final animation.

Figure 2.1: My first attempt at type expression animation (Week 3, 13/9/22)

Watched a lecture recording about how to make an animation by using both Illustrator & Photoshop during practical class. Create artboards on Illustrator, and then paste all the things on Photoshop to create timeline.

During the feedback session, Mr Vinod mentioned that the slowly tilt at the beginning is not necessary, so I deleted that part for my final animation. 

Figure 2.2: Final animation artboards (Week 4, 20/9/22)

After deleting the tilted part, I added more frames for the text distortion.

Figure 2.3: Final Animation timeline (13 frames) (Week 4, 20/9/22)

Final Animation

Figure 2.4: Final animation

Task 1: Exercise 2 - Text Formatting

Notes of recorded lectures:

Type Formatting 1:4

Kerning: adjust space between individual letterforms

Tracking: adjust spacing uniformly 

Use all 10 typefaces

New > print(A4):  Kerning & Tracking

Turn off facing pages

Column gutter: 5

Text box tool: drag and type name

Font size 50-58

Centralised the text

Select area, Alt+Left/right arrow key: Kerning

Edit>preference>units & increments>kerning/tracking>5

General tracking: select all>Alt+right/left arrow

Use the eyedropper tool to adopt the exact font type

Text formatting 2:4

A4 size

Layout>Margins & Columns>columns: 4

Copy n paste text (FB files)

Font size: 8-12

Choose 10 typefaces

Characters in one line: 55-65

Leading: 11

Paragraph spacing below: 11pt (leading &spacing is the same pt)

Type Formatting 3:4

Headline & Subheadline

File>Place>select chosen image

Adjusting image size: shift+ctrl

Normal selection tool: crop image 

Plus sign under text: drag and fill another column

Alt+right arrow key to adjust the text side smoother (cannot exceed more than 3 times)

Get rid of - :Select all text>paragraph formatting controls>turn off hyphenate

Type formatting 4:4

Headline: ctrl shift arrow(size:17, leading:22 (multiple of 2)

Subheadline: italic

Baseline grid: view>grids&guides>baseline grid

Edit>preferences>grids>increment:11>threshold: 50%

Body: right click> text frame>baseline option>leading>general>align: top (for every line sitting on baseline)

Healine&sub: right click> text frame>baseline option>leading

Type formatting 4:4A(quick method of alignment)

Ctrl+alt+i: show paragraph symbol

Select all text>paragraph formatting control>(two icons on the right)>click align baseline grid

Kerning & Tracking

Figure 3.1: Kerning & Tracking Exercise (Week 4, 20/9/22)

A small exercise of doing kerning & tracking on name. 

Text Formatting

Figure 3.2: #1 Body text with aligned left (Week 4, 20/9/22)

Figure 3.3: #2 Body text with justify with last line aligned left(Week 4, 20/9/22)

I did some kerning and tracking on both #1 & #2. I personally prefer #2 because the ragging looks more neat and clean.

Figure 3.4: Text formatting refinement (Week 5, 27/9/22)

I adjusted the placement of heading, subheading & image to fill up the empty space on top left and bottom right to make the layout more balance in space. 

Font: ITC New Baskerville Std (roman, bold & italic)

Font size: 16&26 (heading), 14 (subheading), 9 (body), 9 (captions)

Leading: 22 (heading), 11 (body)

Paragraph spacing: 11pt

Alignment:  Justify with last line aligned left

Columns: 4

Gutter: 5mm

Final Text Formatting

Figure  3.5: Final text formatting jpg clean (Week 5, 27/9/22)

Figure 3.6: Final text formatting jpg grids and lines (Week 5, 27/9/22)

Figure 3.7: Final text formatting PDF clean (Week 5, 27/9/22)

Figure 3.8: Final text formatting PDF grids & lines (Week 5, 27/9/22)

---

FEEDBACK

Week 2

Specific feedback: "Fragile", "Distort" & "Box" are fine. For "Accelerate", the one with the blur effect looks good but doesn't need to put another "Accelerate" on top of it, just the blur one itself is fine.

General feedback: It is compulsory to use the 10 typefaces given for our digitalised type expression. Avoid adding too much illustration in the sketches because they mostly not going to work on those 10 typefaces.

Week 3

Specific feedback: Types: "Fragile", "Distort" & "Box" are fine. "Accelerate" can be improved, the motion blur and the text perspective don't look like have the match direction, might need to change a little bit.

Animation: The tilt at the beginning is not necessary, can delete that part. General feedback: Avoid making the types become too small because it will lose the visual impact, it is important to have a balance within the types and spaces. Too much extra decorating on fonts will also make the word lose its original meaning. Avoid applying distorted effects on types when unnecessary.

Week 4

Specific feedback: My animation for "distort" is fine.

General feedback: The last frame time should be longer a bit to see the final frame clearly before the loop.

Week 5
Specific feedback: Only a few lines show cross alignment but it's something there. Interesting layout with well balance, the amount of space kind of work for this particular layout. Setting of typeface is quite even.
General feedback:
- Make sure to have smooth ragging.
- Caption font size should be smaller than body font size, use the same type of font as body.
- Avoid using condensed font for body text.
- Avoid using two serif typeface in the same layout because the point of using different typeface is to create contrast.
- Text should be readable by using appropriate font size.
- Avoid leaving one word on the last line of paragraph. (orphan & widow)

---

REFLECTIONS

Experience: I have acquired the basics of typography, not only by listening to the lectures but more on by doing the actual exercises. Since we are given 10 typefaces to do any of the designs, so it is much easier for me to decide what typeface to use because I usually have difficulty and hesitation when it comes to choosing a typeface, also it is nice that 10 of them are all looking neutral and clean. I also became more familiar with Adobe Illustrator than before since I usually do my other module works with Photoshop, so it is nice to have a chance to improve my skills in using another software. The physical class is always very informative, it pushes me to stay focused to record and absorb the information, especially during the feedback session, I observe my peers' works while recording some important comments from Mr Vinod. Although the comments are not about my work, there are still some useful and important tips to record. 

Observation: I found that I personally much prefer attending physical classes than listening to recorded lectures because it is so easy to feel sleepy while watching recordings, not to mention some of them are over half an hour. I also observed that when it comes to learning to do a design, doing actual work is much more sufficient than listening, because I always feel overwhelmed when listening and looking at the tutorial videos, but then the actual working progress is actually fine, even bring some peace when doing the kerning and tracking for text formatting exercise, because all I have to do is sit quietly for an hour to adjust smooth ragging. 

Findings: After experiencing a few feedback sessions, I realised that typography is definitely not some easy work to do, there are so many small details that need to be paid attention to, and even just a small little crumb can also become a mistake, so it definitely required certain standards to achieve good work. I realised it definitely needs lots of practice to actually become a professional, as Mr Vinod said in class, this kind of aesthetic sense is not something that can easily use words to explain, it needs a long time of training to achieve. 

---

FURTHER READING

Figure 4.1: Computer Typography Basics (2003)

Reference: Creamer, D. (2003). Computer Typography Basics. IDEAS Training.

 

Fonts

Serif

- The most common text or body font, also works well for headline font

- Characteristic: little feet or arms hang off the end of letter strokes, add a thick/thin look to letter.

Sub-categories of serif:

- Oldstyle: Very open, wide, and round with pointed serif with a contrast between heavy and light strokes

- Modern: Designed over 200 years ago. It has a greater degree of mechanical perfection than Oldstyle fonts, greater distinction between heavy & light strokes, thin/squared-off serifs.

- Square serif: Contemporary style mainly used for small amounts of text (advertising copy, subheads & headlines). It has uniform strokes with little contrast.

Figure 4.2: Oldstyle, Modern & Square Serif font

Sans Serif

- Without serif, have an even stroke weight which creates little contrast for the letters.

- Suitable for a modern look report, but can be harder to read than Serif fonts.

- Generally used for small amounts of text but also can be used for larger amounts of text if applied with care.

Figure 4.3: Example of Sans Serif fonts

Display

- Designed to be used as attention-getting headline fonts.

- Not really suitable for body fonts

Figure 4.4: Example of Display fonts (*all set at 46 pt)

Script

- Designed to mimic handwriting

- Traditional type used for formal invitations

- Not for all caps used.

Figure 4.5: Example of Script fonts

Text 

- Designed based on hand-drawn letters made by early monks for religious books.

- "Old-world" feel.

- Used for Certificates, diplomas & invitations.

- Not for all caps used.

Figure 4.6: Example of Text fonts

Mono-Spaced

- Proportionally spaced

- Smaller characters take up less space than larger ones.

- Typewritter-style fonts, take up same amount of space

Figure 4.7: Example of Mono-Spaced fonts

Dingbats

- Symbols: small pieces of art for enhancing the design of text or page.

Figure 4.8: Example of Dingbats fonts