Typography Task 1

Typography: Task 1

23.4.2024 - 21.5.2024(Week 1- Week 5)

Siam Siew Yong 0358399

Bachelor of Design in Creative Media | Taylor’s Design School | Taylor’s University

Lectures Notes

Week 1: Introduction and Development

History of typography- Calligraphy > Lettering > Typography

Fig 1.1 Black Letter calligraphy

Fig 1.2 lettering

Fig 1.3 typography 

Typography is the art and technique of arranging type to make written language clear, readable, and appealing

Who practices typography- graphic designer, art director, manga artist, comic book artist...

 History of alphabet

Fig 1.4 first alphabet

Phonation alphabet- used sound pictures to represent words and syllables with the same or similar sound

Differences between font and typeface

Fonts- are variations of type, such as its size and weight, eg: Helvetica Regular, Helvetica Oblique, Helvetica Light...

Typeface- entire family of fonts that show similar characteristics, eg: Helvetica

Fig 1.5 diff btw typeface and font

Week 2: Text P1

Kerning: automatic adjustment of space between letters

Letterspacing: need to add space between the letters

Tracking: addition and removal of space between the word

Fig 1.6 diff btw kerning and without kerning

Tracking: normal tracking, loose tracking & tight tracking

Fig 1.7 example of Tracking

We often see extra spaces added between uppercase letters, but there has strong resistance within the type community to letterspace lowercase letters within text

The reason is, 'Uppercase letterforms are designed to stand on their own, while lowercase letterforms rely on the counter form created between letters to maintain the flow of reading. '

Formatting Text

Flush left: Each line starts at the same point but ends wherever the last word finishes

Centered: Equal value and weight to both ends of any lines, format of text is centered

Flush right: Formatting emphasizes end-of-line rather than beginning-of-line

Justified: Imposes a symmetrical shape on the text

Fig 1.8 typography alignment

Texture

Different typefaces suit different messages

Different typefaces are better for different messages, and a good typographer must know which one is the best.

Type with a larger x-height or thicker strokes appear darker and bolder on the page compared to those with a smaller x-height or thinner strokes. Being sensitive to these color differences is key to creating effective layouts.

Fig 1.9 anatomy of a typeface

Leading and Line Length

The aim of setting text type is to ensure it can be read easily and comfortably for an extended period

Type size: large enough to be read easily at arm's length, like holding a book in your lap

Leading: If the text is too tightly, the reader's eyes move vertically, making it easy to lose their place. If it's too loosely, it creates distracting striped patterns.

Line length: keep line length between 55-65 characters

Week 3: Text P2

Indicating Paragraphs: 

Extended paragraph

Pilcrow: symbol that available in most typefaces, used in set to indicate paragraph spacing

Fig 1.10 example of pilcrow in paragraph

Leading(spacing between lines within a paragraph): if the line space is 12pt, then the paragraph space is 12pt (ensures cross-alignment across columns of text)

Fig 1.11 diff between line space and leading

Indentation: same size of the line spacing or the sane point size of the text

Fig 1.12 standard indentation

Widows and Orphans:

Widows and Orphans always be avoided in text design

Widows: short line of type left alone at the end of a column of text

Orphans: short line of type left alone at the start of new column

Fig 1.13 diff btw widow and orphan

In justified text, both widows and orphans are seen as major mistakes.

Flush right and ragged left text is somewhat more forgiving towards widows, but only slightly. Orphans, however, remain unacceptable.

Highlighting Text:

To carry out important information in large amount of text

Example: Highlighting it by using Italics / Differentiating text within a large body / Increase the boldness of the text/ change the colour of text / highlighting the text field / adding typographic elements (", ', “,”) 

Headline within Text

There are many ways to subdivide text within a chapter. We need to ensure these headings clearly indicate their importance and their relationship to each other for the reader.

Hierarchy

Fig 1.14 heading with hierarchy

 Cross alignment

Fig 1.15 eg of cross alignment

Week 4: Basic

Letterforms:

Fig 1.16 part of letterform

Baseline - imaginary line the visual base of the letterform

Median- imaginary line defining the x-height of letterform

X-height- height of the typeface of the lowercase 'x'

Stroke- lines that define the basic letterform

Apex/Vertex- point created by joining two diagonal stems

Arm- short strokes off the stem of the letterform

Barb- half-serif finish on some curved stroke

Beak- half serif finish on some horizontal arms

Bowl- rounded form that describes a counter(can be open or closed)

Bracket- transition between the serif and the stem

Cross stroke- horizontal stroke in a letterform that joins two stems together(like 'f','t')

Cross bar- horizontal stroke in a letterform that joins two stems together(like 'A','H')

Crotch- interior space where two strokes meet

Descender- portion of the stem of a lowercase letterform that projects below the baseline

Ear- stroke extending out from the main stem or body of the letterform

Em- distance equal to the size of the typeface

En- half of the em

Finial- rounded non-serif terminal to a stroke

Ligature- character formed by the combination of two or more letterforms

Link- stroke connecting the bowl and the loop of a lowercase G

Loop- bowl created in the descender of the lowercase G (in some typefaces)

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

Shoulder- curved stroke that is not part of a bowl

Spine- curved stem of the S

Spur- extension the articulates the junction of the curved and rectilinear stroke

Stem- the significant vertical or oblique stroke

Stress- orientation of the letterform, indicated by the thin stroke in round forms

Swash- the flourish that extends the stroke of the letterform

Tail- the curved diagonal stroke at the finish of certain letterforms

Terminal- self-contained finish of a stroke without a serif

Fonts:

Uppercase & Lowercase- capital letters & small letters

Fig 1.17 uppercase and lowercase

Small Capitals- uppercase letterforms draw to the x-height of the typeface

Fig 1.18 small capitals roman

Uppercase Numerals- lining figures, same height as uppercase letters and all set to the kerning width

Lowercase Numerals- old style figures, are set to x-height with ascenders and descenders

Fig 1.19 uppercase and lowercase numerals

Italic- always only roman, can refer back to fifteenth century Italian cursive handwriting

Fig 1.20 writing in italic

Punctuation, miscellaneous- can change from typeface to typeface

Fig 1.21 punctuation in diff typeface

Ornaments- used as flourishes in invitations or certificates

Fig 1.22 font scape, symbols, ornaments

Instructions

Task 1 Exercise 1: Type Expression

In this task, we are required to express the meaning of four of these words' Balance, Jump, Roll, Crash, Flow, Spark, Time, Swim, Open, Spark, Swing, Dash, Kick ' 

For this task, we are not allowed to distort or use any color in the letterform.

Inspiration photo & rough sketches

My inspiration mostly began by searching photos with the keyword on Pinterest or Google

1. Balance

Fig 2.1 inspiration picture of 'balance',(29/04/2024)

Fig 2.2 rough sketches of 'balance',(29/04/2024)

From the first photo, I drew inspiration from the element of the balance scale

• 'C' & 'E' are heavier than 'B' & 'A'
• The bigger 'A' in the middle is the brace

Second photo, I drew inspiration from rocks stacked from the bottom up

• All fonts stacked from the bottom up stacked on a straight line 
• 'E' supporting the weight of other fonts above it

Third photo, the inspiration came from Yin-Yang element( Chinese Philosophy)

• 'B' & 'A' are white fonts with the black background
• 'C' & 'E' are black fonts with the white blackground

Fourth photo, the inspiration came from balance principle in art

• The biggest 'A' is the brace in the middle
• Fonts on both sides are having same weight

2. Jump

Fig 2.3 inspiration picture of 'jump', (29/04/2024)

Fig 2.4 rough sketches of 'jump'(29/04/2024)

From the first photo, I drew inspiration from jumping on trampoline

• 'J','U','M' &'P' are jumping together
• The biggest 'U' is the trampoline

Second photo, I drew inspiration from rope jumping

• 'U' is the rope, 'J' & 'P' holding the ends of the rope
• 'M' is the player 

Third photo, the inspiration came from the hurdles

• 'J', 'M' &'P' are having hurdle race
• 'U' being reverse and as the barricade

Fourth photo, 

• 'J', 'U' & 'M' are jump over the obstacle 'P'

3. Open

Fig 2.5 inspiration pictures of 'open' (30/04/2024)

Fig 2.6 rough sketches of 'open' (30/04/2024)

From the first photo, I drew inspiration from book open

• 'O','P','E','N' book is open
• O' & 'P' are the left side, 'E' & 'N' are the right side

Second photo, I drew inspiration from open minded picture

• 'O' cut by a horizontal line, and it is being separated/open

Third photo, the inspiration came from the door open

• 'N' as a door being open
• 'O', 'P'& 'E' are the wall

Fourth photo, the inspiration came from key

• 'O','P','e' & 'n' is a key
• 'e' & 'n' are the pattern of the key

4. Kick

Fig 2.7 inspiration pictures of 'kick' (30/04/2024)

Fig 2.8 rough sketches of 'kick' (30/04/2024)

From the first photo, I drew inspiration from kick the can game

• 'K' kick the 'I' 
• 'I' knocked over other alphabets

Second photo, I drew inspiration from Taekwando

• 'I' & 'C' are a wood
• 'K' broke 'I' & 'C' into two parts

Third photo, the inspiration came from Jianzi ( Asian shuttlecock game)

• 'K' kick 'i', 'i' is the Jianzi

Fourth photo, the inspiration came from football

• 'K' kick the 'i' into 'C' goal
  
• 'i' is a football

Digitisation

I decided to digitise what I thought were the best words from my sketches, and I chose typefaces that interpreted those words best

Depends on advice from Mr Vinod to my sketches, (balance and kick not creative enough), I filtered out the words I felt were unsuitable and used AI to digitize my words.

Fig 3.1 first type expression, (07/05/2024)

Fig 3.2 first type expression, (07/05/2024)

JUMP(1)- small fonts 'J', 'U' & 'M' are jump over the big obstacle 'P'

JUMP(2)- 'U' is the rope, 'J' & 'P' holding the ends of the rope and 'M' is the player. I drew lines underneath the M to emphasize its jumping up

BALANCE(1)- 'A' is in the middle and has black and white colors to divide fonts in both side , the font on the left is white on a black background, while the font on the right is black on a white background

BALANCE(2)- 'B' is the smallest font, while 'E' is the largest. The fonts are stacked from bottom to top, going from largest to smallest

KICK(1)- 'K' knocked over 'I', causing both 'C' and 'K' to be toppled by 'I'. 'I', 'C', and 'K' all fell to the right

KICK(2)- 'I' and 'C' were connected by a wooden plank. 'K' kicked them, breaking the plank and causing it to crack

KICK(3)- 'K' kick the 'i' into 'C' goal and 'i' is a football

OPEN(1)- Universe LT Std is the typeface I used to interpret 'OPEN' because it is slender and is better to convey the action of opening.

OPEN(2)- 'O' is cut open, with the other alphabets emerging from the 'O' like ideas flowing out.

OPEN(3)- 'O' & 'P' with a horizontal position are connected together and become a key shape, 'e' & 'n' are the pattern of this key

Final Type Expression

3.3 final type expression png(14/05/2024)

3.4 final type expression pdf(14/05/2024)

Final Type Expression Animation

I choose 'Kick' to express as gif, ('K' as the player to kick the 'I' to the 'C' goal)

3.5 final animated type expression (15/05/2024)

We used Adobe Photoshop to create our type expression animation

3.6 animation process (15/05/2024)

Frame of the animation

3.7 frame of the animation (15/05/2024)

Task 1 Exercise 2: Text Formatting

In this task, we are going to learn how to address incremental amounts of text with text formatting like type choice, type size, leading, line-length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans and cross-alignment

TRACKING & KERNING

I practiced kerning and tracking with my name by using the 10 typefaces provided by Mr Vinod.

4.1  without kerning (20/05/2024)

[Alt + left/right arrow] to kern the spaces between the letters

4.2  with kerning (20/05/2024)

TEXT FORMATTING

I started to use InDesign to do my layout

4.3 layout process (21/05/2024)

Learn how to use baseline grid and cross alignment

I knew that how to align text on the baseline grid

4.4 layout process (21/05/2024)

Afterward, I started to do some layouts by following the instruction from Mr Vinod

4.5 diff type of layouts (21/05/2024)

FINAL TEXT FORMATTING

HEAD

Font/s: Univers LT Std (65 Bold)

Type Size/s:47 pt

Leading: 11 pt

CAPTION

Font/s: Univers LT Std

Type Size/s: 7 pt

Leading: 11 pt

BODY

Font/s: Univers LT Std

Type Size/s: 9 pt

Leading: 11 pt

Paragraph spacing: 11 pt

Characters per-line: 58

Alignment: left justified

Margins: 12.7mm top, 55mm bottom

Columns: 4

4.6 final layout without grid jpeg (21/05/2024)

4.7 final layout with grid jpeg (21/05/2024)

4.8 final layout without grid pdf (21/05/2024)

4.9 final layout with grid pdf (21/05/2024)

Feedback

1.Week 2

Sketches had checked and some are creative like 'Open' &'jump', and 'balance' & 'kick' need to make changes

2.Week 3

specific feedback- need to write what typeface u use , make it become more clearly and readable. The most important was prevent to use too many graphic element

3. Week 4

design is detail, point side need to be the same, follow the format provided by tutor

general feedback- study the 10 fonts provided by tutor, inc their typeface like light, bold, condensed

4. Week 5

text should be on the baseline grid, and make sure the headline has attracted the eye first

text must placed within the margin, and the text in the content must prevent gaps(river between the text)

Reflection

Experience

In this course, the pre-recorded lectures are published on YouTube and we can check it at anytime. Mr. Vinod also arranges weekly assignments and weekly video need to be watched, which greatly helps me as I can learn how to organize my own time and keep up with my coursework. Through this task, I encountered software I had never used before, such as Adobe Illustrator, Adobe Photoshop and Adobe InDesign. Initially, this was quite challenging for a beginner like me, but through lecture videos and offline tutorial sessions, I gradually became familiar with and adept at using these tools. Additionally, during the weekly tutorial sessions, Mr. Vinod will check our progress, provide valuable feedback and point out areas that need improvement.

Observation

Mr. Vinod will present the students' work every tutorial session, and I have found that my classmates possess good creativity, with most of their ideas being quite unique. They makes good reference of online resources, especially from Pinterest software, to create their work.

Findings

At the beginning of this course, even though I had been exposed to design-related subjects before, the unfamiliar software always took me more time than others to complete the work assigned by Mr. Vinod.  I have learnt how to use professional design software and create layouts that effectively combine text and images through this task. Typography helps in creating typographic poster, logos, branding materials and editorial layouts. This course also taught me to experiment with different typographic styles and their effects.

Futher Reading

5.1  cover of Typographic Design: Form and Communication (2015)

The books that I've chosen to read is 'Typography Design Form Communication'

5.2 earliest written of typography in c. 3150 BCE(2-6 pp)

5.3 A new century and millennium

begin: 2000 CE (27-30 pp)

I read briefly evolution of Typography.(pg 2-30)

And it presented as a timeline that traces its development from hand-written origins to mechanical and digital practices, within the context of world-historical and art-historical events.

5.4 Capital and lowercase letters; Interletter and interword spacing (53 pp)

5.5 Type size, line length, and interlinespacing (54 pp)

5.6 Weight (55 pp)

Besides, I read BASIC PRINCIPLES OF LEGIBILITY. (50-58 pp)

From Capital and lowercase letters, I learnt that setting text entirely in capital letters will decrease its readability. 

I also knew that the important of letterform spacing in typography. It highlights the skills required to control spatial relationships between letters, word, and lines to achieve better flow. This unit also mentions how typographic texture and tone are influenced  by spacing, with consistent intervals resulting in easily readable text. 

I also learned that importance of weight in Typography, which refers to the thickness or boldness of a typeface, plays a crucial role in determining the hierarchy and emphasis within a text.

Mostly used as headline or to emphasize important information in large amount of text.

5.7 column and margin (92 pp)

From this unit, I learned that the space relationship and design considerations related to columns and margins in typography. It emphasizes how these elements contribute to functional clarity and visual aesthetics in text layout.

Additionally, this unit also highlights how the height, width, and spacing of columns can impact legibility and readability. It also touches on how the manipulation of these elements can draw the reader's eye across the page and combine information effectively within a layout.