Typography Task 1 // Exercise 1 & 2

29.03.2022 - 03.05.22  Week 1 - Week 6
Lim Yi Xvan 0354552
Bachelor of Design in Creative Media
Task 1

---

LECTURES

Week 1 

Typography:Development/Timeline

Mr. Vinod briefed us about the subjects outline and expectations. We were assigned to watch the YouTube playlist which he pre-recorded about how to create our own e-portfolios.  Then he started a break the ice session as the class is very silent and we get to know each other classmates more with this.

Early letterform development: Phoenician to Roman
Innitially writing meant scratching into wet clay with sharpened stick or craving into stone with a chisel.Uppercase letterforms are the one and only letterform during that time.

fig 1.1 - Letterform Development from Phoenician to Roman

fig 1.2 - Development of the Font

Writing Direction: 
- Phoenicians and Semitic people (right to left)
- The Greeks 'Boustrophedon' (left to right)

fig 1.3 - Changes in the Direction of Writing

Hand Script from 3rd - 10th Century C.E.
Square capitals :
The written version found in Roman monuments. The variety of strokes width was achieved by the angle of the pen that was held at around 60 degrees off perpendicular with serifs added to the finish of the main strokes.

fig 1.4 - Square Capitals (4th or 5th century)

Rustic capitals :
Compressed ver of Square Capitals. It allows twice as many words on sheet and it took lesser time to write. Pen or brush was held at around 30 degrees off perpendicular. However, they're harder to read due to their compressed nature.

fig 1.5 - Rustic Capitals (4th century)

Roman Cursive :
It's used in everyday transactions written in cursive hand which forms were simplified by speed.

fig 1.5 - Roman Cursive (4th century)

Unicals :
Incorporated some aspects of the Roman Cursive, especially in shape of A, D, E, H, M, U and Q. They're small letters and more readable at small sizes than rustic capitals. 

fig 1.6 - Unicals (4th - 5th century)

Half Unicals :
Further formalization of the cursive hand, it marks the beginning of lowercase letterforms.

fig 1.6 - Half Unicals (C 500)

Caloline Miniscule :
Charlemagne issued to standardize all ecclesiastical texts. The monks of Alcuin of York, Abbot of St Martin of Tours rewrote the texts using both majuscules (uppercase), minuscule, capitalization and punctuation which set the standard for calligraphy for a century. 

fig 1.7 - Caloline Miniscule (C925)

Blackletter to Gutenberg's Type
Blackletter - Also knowns as 'Textura', a condensed strongly vertical letterform in northern Europe to gain popularity. Whereas in the South, a rounder more open hand gained popularity called ‘Rotunda’.

fig 1.8 - Blackletter (C1300)

Gutenberg then introduced a new text printing which marshalled them to build pages that  mimicked the work of the scribe's hand - Blackletter of northern Europe. His type mold required a different brass matrix, or negative impression for each letterform.

fig 1.9 - The Gutenberg Bible

Text Type Classification 

fig 1.9.1  - Text Type Classifictaion

Week 2: 

Typography:Basic/Describing Letterforms

    Mr. Vinod asked us to upload our sketches under the post the Typograhy FB group. He detailedly gave everyone of us feedback for every words we came out with so we could do adjustments. Then he also taught some skills on how to create effects for typography with Adobe Illustrator. We were assigned to create our final outcome for Typography on our next class in week 3 and save it as a jpeg. He also picked few students and check with their blog see if they did them correctly and also give guidance on how to create our e-portfolio correctly.

• Baseline: Imaginary base line
• Median: Imaginary line defined the x-height
• X-Height: Height of the lowercase 'x' in any typerface

fig 2.1 - Typography line terms

• Stroke: Lines that defined the basic letterforms
• Apex/Vertex: Points that join two diagonal stems 
• Arm: Short strokes off the stem of the letterform
• Ascender: Stems of a lowercase which is above the median 
• Barb: Half serif end on curved strokes 
• Bowl: Rounded form in the letterform like a counter, it could either be closed or open
• Bracket: Transition between the serif and stem
• Cross Bar: Horizontal stroke that join two stems
• Cross Stroke: Horizontal stroke found in letter 't' and 'f'
  
• Crotch: Interior space where two strokes meet
• Ear: Stroke extending out from the main stem
• Em: Originally refers to the width of 'M', and now it's the distance equal to the size of the typerface
• En: Half the size of Em
• Ligature: Character formed by the combination of two or above letterforms

fig 2.2 - ex of ligatures 

• Link: Stroke that connects the bowl and loop of 'g'
• Spine: Curved stem of 'S'
• Stress: Thin strokes in round forms
• Swash: Flourish that extends the stroke
• Terminal: Ended of a stroke without a serif

To work successfully with type, now make sure to work with full font and use it correctly.

• Uppercase: Capital letters
• Lowercase: Small letters
• Small Capitals: Uppercase drawn to x-height of the typeface and it's primarily found in serif fonts.
  
• Uppercase Numerals: Same height as uppercase letters and are all set in the same kerning width.
• Lowercase Numerals: Set to x-height with ascenders and descenders.
• Italic: Italian cursive handwriting back to fifteenth century.

fig 2.3 - Italic vs Roman

• Punctuation / Miscellaneous Characters: Can change from typeface to typeface.
• Ornaments: Used in flourishes in invitations or certificates and it's usually provided as a font in larger typeface family. Eg. Adobe Caslon Pro.

fig 2.4 - ex of Ornaments

Describing Typerface

fig 2.5 - diff between Italic and Oblique

fig 2.6 - Categories of type-families 

We need to study them carefully as we're using them to develop our skills. Once we understand how to use these faces appropriately and effectively, we'll be well prepared to understand and appreciate other typefaces as we encounter them. We are given only ten typefaces this semester to bring out our designs and above are the reasons why.

fig 2.7 - Typefaces given this semester 

Week 3: 

Typography:Text Part 1 & 2

Tracking, Kerning and Letterspacing

• Kerning: Automatic adjustment of space between letters
• Tracking: Addition and removal of space in a word or sentence

fig 3.1 - kerning applied on text

fig 3.1.1 - normal, loose and tight tracking

Formating Text

• Flush Left: Each lines starts at the same point but ends whenever 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.
• Justified: Like centered, this format imposes a symmetrical shape on the text. It's achieved by expanding or reducing spaces between words and letters.

fig 3.2 - difference between flush left, right, justify and centered

Texture

Different typefaces bring different feels as text and also bring different messages.

fig 3.3 - introduction of Typography terms

fig 3.3.1 - comparison of typefaces

fig 3.3.2 - comparison of typefaces

Leading and Line Length

Objective of setting text type: Allow easy reading

• Text Size: Large enough to be read easily at arms length
• Leading: Too tight causes vertical eye movement whereas reader may loose their place easily / Too loosely occurs stripped patterns that may distract the reader.
• Line Length: A question of type size and leading; good rule of thumb is to keep line length between 55-65 characters

Type Specimen Book

- Shows sample of typefaces in different various sizes. 

- To provide an accurate reference for type, type size, type leading, type line length etc

fig 3.4 - example of type specimen book 

Indicating Paragraphs

• Pilcrow ¶ : A holdover medieval manuscripts 
• Line Space (Leading) : Line space between the paragraphs, line space size must equal paragraph size to ensure cross-alignment across columns of text
• Standard Indentation: Indent is the same size with line spacing or the point size of text
• Extended Paragraphs: Creates unusually wide columns of text

Widows and Orphans 

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

Orphans: Short line of type left at the start of a new column

fig 3.5 - example of widow and orphan

In justified text, widow and orphan are serious gaffes. Solution of widow is to rebreak line endings throughout paragraphs so that the last line is not noticeably short. Careful typographers ensures that no column of text starts with the last line of preceding paragraph.

Highlighting Text

fig 3.6 - ways of highlighting text

Headline within Text

A clear break between the topics within a section. Subdivisions within text of a chapters labeled as A, B and C according to the level of importance.

fig 3.7 - headline labeled as A, B, C

Week 4: 

Typography: Understanding Letterforms

fig 4.1 - comparison of letterforms in different typefaces

Maintaining X-height

X-height describe the size of lowercase letterforms. Curved stroke such as 'S', must rise above the median in order to look as the same size as the vertical and horizontal strokes they adjoin.

Form / Counterform

Space describes and contained by the strokes of the form. When letters are joined to become words, the counter form will be included with space between them.

Contrast

fig 4.2 - diaphragm of contrast in letterforms 

Typography: Screen & Print

Typography in Different Medium

At start, Typography was only used on publication.Today, it not only exists on paper and also screens.

Print Type vs Screen Type

• Type for Print: Caslon, Garamond and Baskerville (highly readable set in small font size)
• Type for Screen: Taller x-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast and modified curves and angles / Smaller size typefaces with more open spacing
• Hyperlink: Word, phrase or image that links to a website (normally blue and underlined)
• Font size for Screen: 16 pixel text on screen, if were to read at arms length at least 12pt

Static vs Motion

Static Typography has minimal characteristic in expressing words. Static typography are used for wide purposes from billboards to posters, magazines to fliers. 

Motion Typography are dramatise type and the letterforms are more fluid and kinetic. It's bring to life through animation. They're often applied on MV and Ads. It has developed to become expressive, to establish the tone and mood of associated content.

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/12aZlwq84RPtSIhX6__Go2YAo_BUI34hU/preview" width="640" height="480" allow="autoplay"></iframe>

Task 1// Exercise 1 - Type Expression

    The first exercise given is type expression. We were asked to choose four words in the selected words from the poll at the Typography Facebook Group which are Cough, Squeeze, Pop, Explode, Grow and Wink. Cough is mandatory, so we just have to choose another 3 from the list above. No graphical elements are allowed, we are limited to only 10 typefaces in this exercise which are Adobe Caslon Pro, Bembo, Bodoni, Futura, Gill Sans, Garamond, New Baskerville, Janson, Serifa and Univers.

1. Sketches

The four words I've chosen for exercise 1: Cough, Explode, Pop and Grow. 

We were asked to sketch our designs of the four words chosen in either papers or illustration and will be present on week 2 for feedbacks and discussions. These four words will be design only using the 10 type families given afterwards but Mr. Vinod would like to see our designs for the Typography first before we enter the next progress.

Our sketch and designs are required to be only in black and wordings without any graphical patterns and designs on it.

And these are what I came out with...

fig 5.1 - Sketches for 'Cough' , 'Explode' , ' Pop' and ' Grow' 04/04

This is my hand sketch on paper for the type expression of the four words.I personally like the cough in #1, explode in #2 & #3, grow in #3. 

2. Digitalisations

After I get my feedbacks from Mr.Vinod, I have make some adjustments and explore more on my designs and below is what I came out as my digitalise designs for my text expression using Adobe Illustrator with the 10 typefaces given.

fig 5.1.1 - Illustration design for cough in jpeg 10/04

For cough, I picked my #1 design as Mr.Vinod likes that too. I make the C bigger in size than others so it looks like a big mouth coughing out three 'ough' which sounds like coughing. Then I make them fill with the colour gradient so it looks like echo.

fig 5.1.2 - Illustration design for explode in jpeg 10/04

Then for explode, I picked #2 and #3. For the #2, I used the shape and pen tool to cut the slices off so it looks like it's exploded into pieces. The pieces were able to move as they're being cut out as shapes.

And for #3, I added a short line above the letter 'O' and added some shadows, so the letter 'O' will looks like a bomb and shadow is to increase the tension of the explosion.

 fig 5.1.3 - Illustration design for grow in jpeg 10/04

For the word 'grow', I picked #1 and #3. For the #1, I took Mr.Vinod's advises and re-adjusted the size of the words which all letter are in the same size. Then at the ending of the letter 'W', I added some lines so it looks like upping stocks value and with an arrow added.

 fig 5.1.4 - Illustration design for pop in jpeg 10/04

For pop, I neither chose any of my sketches and I did some further explore for this. I applied effects on this with the 3D effects. And above shows the details of the angles and adjustments I used in my effects to create this.

fig 5.2.1 - Illustration design for type expression in jpeg 11/04

fig 5.2.2 - Illustration design for type expression in jpeg 11/04

Description:

Cough
1. A big mouth pouring out three 'ough' which looks like there're sounds coming out from the mouth while coughing.
2. In three different shades of black which brings out the loudness of cough from small to big which looks like echo.

Explode
1. Cracks in pieces when experiencing explosion.
2. Added a line above the letter 'o' which make it looks like a bomb.

Grow:

1. From the letter 'G' to 'W', the amount have slowly increased which represents the growth and I also added a thick stroke line below so it looks like a stalk of a tree.

2. Added an uprising arrow in the letter 'W' which represents stocks growing up.

Pop:

1. I used effects on the word which pops out in 3D forms.

2. Simple pop out from the words.

Final Exercise 1: Type Expression

fig 5.2.3 - Final design for type expression in jpeg 26/04

fig 5.2.4 - Final design for type expression in pdf 26/04

3. GIF

For my first attempt, I decided to do an easy one so I picked the word 'grow' in design #2. I used 20 dartboards for this one. 

fig 5.3.1 - Artboards for Grow GIF 16/04

fig 5.3.2 - Grow in GIF 16/04

And then I kinda explore at others words see whether how can they transfer into gif, then I chose the word 'Explode'.

I wanted it to looks like a complete word but suddenly it starts to crack then they all fell off one by one. This was my idea for the gif and this is what I came out with.

fig 5.3.3 - Stacks of artboards for Explode GIF 26/04

I used 12 artboards for this one, and above is the stacks of artboards in Photoshop with the adjustment of seconds I make.

fig 5.3.4 - Explode GIF (first attempt) 26/04 

I think it was too fast which I can't even let the effect for the word that suddenly cracks and fell off in a well visual and sequence so I decided to make the adjustment for the time again.

fig 5.3.5 - Stacks of artboards for Final Explode GIF 26/04

Final Submission Exercise 1: GIF

fig 5.3.6 - Final Submission for GIF 'Explode' 26/04

Task 1// Exercise 2 - Text Formatting

On exercise 2, we will be given incremental amounts of text that address different areas within text formatting i.e. type choice, type size, leading, line-length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans etc. These minor tasks will increase your familiarity and capability with the appropriate software and develop your knowledge of information hierarchy and spatial arrangement. Software used for this exercise is Adobe InDesign.

After watching lecture posted on YouTube playlist, Typo_Ex Text Formatting 1:4, we were asked to use kerning and letter spacing with our name in the 10 different typefaces given.

fig 5.4.1 - Text formatting with kerning 24/04

Text Formatting 

We were advised to watch Lecture Typo_Ex Text Formatting 2:4 - 4A:4, in order to done our exercise 2, Text Formatting.

Things to look out:

fig 5.5 - Things to look out Mr.Vinod posted on FB group

I chose left alignment for my exercise 2, as I don't want rivers or huge gaps appear in between words with justify. It's quite challenging to adjust on the text so that they don't look uneven at the end.

I've done quite few layouts.

Layouts:

fig 5.5.1 - Text formatting Layout #1 25/04

fig 5.5.2 - Text formatting Layout #2 25/04

fig 5.5.3 - Text formatting Layout #3 25/04

fig 5.5.4 - Text formatting Layout #4 25/04

fig 5.5.5 - Text formatting Layout #5 25/04

fig 5.5.6 - Text formatting Layout #6 25/04

fig 5.5.7 - Text formatting Layout #7 25/04

I've did some layouts first then only I decide on which to go with and finalise it for submission. After much consideration, I picked layout #1.

fig 5.6.1 - Text formatting Layout #1 text alignment 25/04

As per see, it's obvious that how the text alignment aren't well organised and it ends with different gaps. Overall it looks very messy and the text size were too small which I set 9pt at first. Everything looks so occupied in one single layout. Kernings and trackings aren't well done too.

So then, I decided to make adjustments for the text alignment which I'm still sticking my option on left alignment but not justify to avoid rivers. And I did resize the font size too so it looks more neat and comfortable to read. 

fig 5.6.2 - Text formatting Layout #1 text alignment 25/04

Previously, I was using different typefaces for the text, subheading and heading. Which were Bembo Std for the subheading 'by John Doe' and ITC New Baskerville Std for the heading 'I am Helvetica'. I was then know that same typefaces need to be use for this exercise so I chose Futura Std.

fig 5.6.3 - Comparison of text before and after adjustments 26/04

fig 5.6.4 - Comparison of text before and after adjustments 26/04

fig 5.7.1 - Submission for text formatting in jpeg(1st attempt), 26/04

Final Submission Exercise 2: Text Formatting 

fig 5.7.2 - Final submission for text formatting in jpeg, 22/06

fig 5.7.3 - Final submission for text formatting in pdf, 22/06

fig 5.7.4 - Final submission for text formatting with grids and guidelines in pdf, 22/06

Font : Futura Std

Typeface : Futura Std Book & Light Condensed Oblique & Heavy

Font size :  37 pt, 17.5 pt, 10 pt 

Leading: 12 pt

Paragraph Spacing: 12 pt

Average characters per line : 50~60

Alignment: Justified Left

Margins : 45 mm (top), 12.5 mm (left, right), 15 mm (bottom)

Columns : 4

Gutter (for columns) : 4.5 mm

---

FEEDBACKS

Week 2:

General Feedback:

Mr. Vinod likes the idea I came out with cough. Idea of explode is okay but graphic elements are not allowed. Need more exploration for the word 'Pop'.

Specific Feedback:

1. Cough: #1, he likes how the way it's being presented with three vibrations.

2. Explode: The middle one is nice but the letter 'o' can just be added a fuze and that's enough, the third one is fine too but it would be better with the letters all organized in line.

3. Pop: The third one is too much of illustration.

4. Grow: First one have two design concepts in it which actually one should be enough as it comes with design with design. He liked the concept of the third one which he think it's kinda creative.

Week 3:

Overall is good, he likes the second version of 'grow' and the first version of 'pop'.

Week 4: 

N/A

Week 5: 

General Feedback:

Overall is relatively well done but there're some parts that need to be updated.

Specific Feedback:

The introduction and task have the same hierarchy which task is actually a subheading. Date of figures for our progress need to be stated at the end of caption. For type expression, I only have to choose each design of one for my final submission.

---

REFLECTIONS

Experience:

Throughout the whole progress for our task 1, exercise 1 & 2, Type expression and Text formatting. The beginning was kinda tough for me as I don't have access for adobe illustration at first and also I don't have any drawing media like iPads or tablet so for that issue, I need to hand sketch them. To be honest, I was kinda out of ideas for the type expression exercise as due to limited excess for typefaces, no graphical elements allowed and common ideas with classmates. I personally wanted my designs to be unique but somehow it turns out that I got inspiration from my peers designs and did some further exploration on it and make it my own designs. For GIF, it was kinda challenging for me too as we need to creates amounts of artboards so the movement of gif will be more smooth and satisfied. In text formatting, it's more easier for me to handle as I'm actually better at organising layouts.

Observation:

Through this task given, I've found that the layouts of wordings can be affected by the kerning, tracking, spacing, leading. With a good adjustment of above, better visuals will be carry out to readers or viewers. This is how magazine editors work to make better layouts and also website creator.

Findings:

I've learn to use different typefaces effectively and bring out the meaning of the words in just text form without any graphics elements with the rules applied on exercise 1 which allowed us to explore more about our own ideas and not independent on the forms of typefaces. Besides that, I also learnt on how to organize texts form and create into typography in a direct way which I think will strongly help us on designing posters in the future.

---

FURTHER READINGS

Based on the list of recommended readings in the MIB, I did some further reading on this one.

1. Saltz, I (2019). Typography Essentials Revised and Updated : 100 Design Principles for Working with Type. Edition: Revised and updated. Beverly, MA : Rockport Publishers.

fig 6.1 - Typography Essentials Revised and Updated by Ina Saltz (2019) 

Chapter 1: The Letter

13. Emphasis using contrasting weights

A BROAD FAMILY OF TYPE affords a wider range of options. A variety of weights can enable multiple entry points and offer more opportunities to establish hierarchy (order of importance). Typefaces that are flexible because their families offer many weights are most often sans serif, but modern type designers have developed serif and sans serif type families with an extensive range of weights. New releases of older typefaces often include a greater breadth of weights.

fig 6.1.1 - Type Specimen, Jonathan Hoefler

Chapter 2: The Word

44. Mixing many typefaces

When mixing typefaces within a document, bear in mind that, as always, each choice should serve a specific need and must exist in a harmony and balance with other typefaces. 

78. Limiting typefaces

fig 6.1.7 - Dino Rama, Charlie Nix

This project uses just one condensed display typeface, always in the same weight and always all caps. The choice works well with the very lengthy dinosaur names, allowing the text to have a large x-height and presence on the page.

85. Using justified type

ALIGNMENT OF THE LEFT AND RIGHT SIDES of the column, known as justified type, imparts a cool, clean, considered look to the text.

fig 6.1.8 - Feature spread, Robert Priest

Using only two colors and an uneven column grid, this layout uses justified type to create a clean edge around the infographic and as a way of balancing special blocks. Note the use of an off-center headline and subhead to create counterpoint, and the centered text above the infographic to set it apart from the body copy.