TYPOGRAPHY / TASK 1: EXERCISES

29/03/2022 - 26/04/2022 / Week 1 - Week 5

Tay Yee Shien / 0341472

Typography / Bachelor of Mass Communication (Hons)

Task 1 / Exercise 1 & 2

---

LECTURES

Mr. Vinod, our module coordinator, introduced us to Typography. He invited us to a Facebook group where he uploaded important information and announcements. He also briefed us on the Module Information Booklet. He told us to download the 10 fonts he had put up and showed us a guideline on how to write our reflections. Mr. Vinod mentioned that personality, process, and work are more important than grades as it is our learning process. Later, we followed a lecture video on how to create an e-portfolio. Every image in the blog should have labeled the figure number, description, and date.

WEEK 1 - DEVELOPMENT

1. EARLY LETTERFORM DEVELOPMENT: PHOENICIAN TO ROMAN

Writing Direction

Phoenicians: Right to left.

Fig. 1.0 Evolution of Phoenician letter

The Greeks: 'Boustrophedon, alternately from right to left and left to right. The same thing applies to the letterforms.

Fig. 1.1  ‘boustrophedon’

Fig. 1.2 Ancient Greek boustrophedon inscription

2. HAND SCRIPT FROM 3RD – 10TH-CENTURY CE

Fig. 1.3 Inscription from the turn of the 2nd and 3rd century AD

Square capitals: They are an ancient Roman form of writing. These letterforms have serifs added to the finish of the main strokes.

Fig. 1.4 Rustic capitals from a manuscript of Virgil’s Aeneid, 4th century ad

Rustic capitals: A compressed version of square capitals. It allowed more words to be written on the parchment paper. It is faster and easier but harder to read due to its compressed nature.

Fig. 1.5 4th century: Old Roman Cursive handwriting from the reign of Claudius (41 to 54 AD)

Roman cursive hand: Written for daily use and and were simplified for speed. They were the beginning of lowercase letterforms. 

Fig. 1.6 This image was taken from page 193 of "Handbook of Greek and Latin Palaeography" by Edward Maunde Thompson

Uncials: It incorporates some components of the Roman cursive hand. They are like small letters. Broad uncials are more readable than rustic capitals. 

Fig. 1.7 C. 500: Half-uncials

Half-uncials: They marked the formal beginning of lowercase letterforms.

Variations of Ulcains' script:

Blackletter - Used in Northern Europe, it is a strongly condensed vertical letterform.

Fig. 1.8 Blackletter

Rotunda - Used in Southern Europe, it is a rounder open hand. 

3. TYPE CLASSIFICATION

Fig. 1.9 Text type classifications

WEEK 2 - BASIC

1. DESCRIBING THE LETTERFORM

Apex/Vertex: The opposite of an apex is a vertex, which the letter W possesses two of, besides the one apex.

Arm: The horizontal stroke on some characters that does not connect to a stroke or stem at one or both ends.

Ascender: The portion of a minuscule letter in a Latin-derived alphabet that extends above the mean line of a font.

Baseline: The line upon which most letters sit and below which descenders extend.

Barb: The terminal for a curved capital serif letter.

Beak: A type of decorative stroke at the end of the arm of a letter, connected to the arm by the terminal.

Bowl: The curved part of the character that encloses the circular or curved parts (counter) of some letters such as d, b, o, D, and B.

Bracket: A curved or wedge-like connection between the stem and serif of some fonts.

Cross Bar: The horizontal stroke in letters.

Cross Stroke: A horizontal stroke that intersects the stem of a lowercase t or f.

Crotch: The angle formed where two strokes meet inside a glyph.

Descender: The portion of a letter that extends below the baseline of a font.

Ear: The small stroke that extends outwards from a lowercase g in some typeface styles.

Em/En: A typographic unit, half of the width of an em.

Finial: A tapered or curved end.

Median: The line defining the x-height of the letterforms.

Leg: Lower angled strokes which you can see in the letters “K”, “R” and “Q”.

Ligature: Occurs where two or more graphemes or letters are joined to form a single glyph.

Stroke: The main body of the letterform.

X-height: The height of the lowercase x for a typeface, and it indicates how tall or short each glyph in a typeface will be.

2. THE FONT

Type families consist of the following:

- Uppercase and Lowercase
- Small capitals
- Uppercase numerals 
- Lowercase numerals
- Italics
- Punctuations and miscellaneous character
- Ornaments

3. DESCRIBING TYPEFACES

Boldface: Thick stroke

Condensed: Compressed

Extended: Widened

Italics:  Handwriting style/cursive

Light: Thin stroke

Oblique: Its like italic but for serif fonts

Roman: The slightly thinner stroke in roman is 'book'

WEEK 3 - TEXT PART 1

1. TRACKING: KERNING AND LETTER SPACING

Kerning: Adding or removing space between letters.

Tracking: Adding or removing space between words in a sentence or line.

! Using all uppercase for a word may cause it to overlap or overcrowd. Kerning words allows more space between the letters in the words.

2. FORMATTING TEXT

Flush Left: The text of a paragraph is aligned on the left-hand side with the right-hand side ragged.

Centred: Text is aligned to neither the left nor right margin

Flush Right: The alignment of text uniformly to the right margin while the left margin is set ragged left.

Justified: Text is aligned along the left margin, with letter-spacing and word-spacing adjusted so that the text falls flush with both margins.

3. TEXTURE

Different typefaces suit different messages.

When speaking about textures, we should think about:

1. The contrast between its thin and thick strokes

2. The proportion of the x-height relative to its ascender and descender

! Some typefaces are more suitable for prints compared to being read-on-screen.

4. LEADING AND LINE LENGTH

Type size: how large the characters displayed on a screen or printed on a page are.
Leading: the space between adjacent lines of type
Line Length: the width of a block of typeset text, usually measured in units of length like inches or points or in characters per line.

! Decide on these chronologically:

1. Type size
2. Leading
3. Line length 

5. TYPE SPECIMEN BOOK

Test out different combinations:
- Type sizes
- Leading
- Line lengths

Compile them into a sheet or book to decide on the best one.

*Depending on the final output of the material, one may view it directly on the screen or have it printed. 
**Tip: enlarge the type size by 400% on the screen to get a clear sense of the relationship between the ascender and the descender. 

WEEK 4 - TEXT PART 2
6. INDICATING PARAGRAPHS

Line space: The space between the descender of a sentence and the descender of another sentence.
Leading: The space between two sentences.

! Paragraph space should be the same as the line space.

3 Ways to indicate paragraphs

1. Pilcrow: a typographical symbol (¶) used to mark the start of a paragraph.

2. Indentation: an empty space at the beginning of a line to signal the start of a new paragraph.

3. Extended paragraphs: a more formal kind of paragraph -  it has a strong topic sentence, supporting facts, and a concluding sentence for this type of paragraph

7. WIDOWS AND ORPHANS

Widow: A short line of text at the END OF A COLUMN.

Orphan: A short line of text at the START OF A COLUMN.

! AVOID them

8. HIGHLIGHTING TEXT

Ways of highlighting text

1. Italics
2. Bold. 
3. Different typeface + bold (reduce the size of a sans serifs typeface by 0.5 to match the x-height of a serif)

4.  Different colour.
5. Background colour.
6. Typographic elements (e.g bullets, quotation marks, etc.)

Prime vs. Quotation Marks

Fig. 1.10 Different kinds of marks

9. HEADLINE WITHIN TEXT

A, B, and C heads are headlines or sub-headlines that have a level of importance.  

Ahead: Differentiate the topics in a section. (Different font, larger size, small caps, bold)
B head: Subordinate to A heads. The supporting point or example for the topic. It follows the leading inline spacing.
C head: It highlights specific materials within the B text. 

10. CROSS ALIGNMENT

Reinforces structure while producing vertical rhythms.

---

INSTRUCTIONS

TASK 1: EXERCISES 1 - TYPE EXPRESSION

SKETCHES

We are assigned to make expressive texts of "Cough" and 3 other words of our choice from the list - pop, squeeze, explode, grow and decay. 

As I was unsure which words to choose yet, I drew all of them to give them a try, which is 'pop', 'squeeze', 'explode', 'grow', 'decay', and 'crumble' 

Then, I did some rough sketches on a piece of paper.

fig 2.0 Rough sketches for the (29/03/22)

Then, after getting a better grasp of the ideas, I drew the drafts on another clean sheet of paper. The texts have a clearer and more distinct structure here.

fig 2.1 Draft sketches (29/03/22)

After some sketchings and feedback from Mr. Vinod, I think I will go with 'Cough' (mandatory), 'Explode', 'Pop', and 'Crumble'. 

DIGITALISATION

fig 2.2 Digitalising the type expressions on Adobe Illustrator (30/03/22)

Next, I downloaded the template from TiMes and start drawing them on software.

fig 2.3 Frames for the Gif 'Crumble' (31/03/22)

Afterward, I decided to create a GIF out of the word 'Crumble' I made 24 frames in total.

fig 2.4 Making the GIF on Photoshop (08/04/22)

I arranged the frames in Photoshop and adjusted a specific time for each frame. I also removed some because I thought they were too much and some frames looked too alike.

Final Submission: Exercise 1 -  Type Expression

fig 2.5 Final Text Expression in JPEG (05/04/22)
So far, I am happy with how my Type Expression typographies turned out.

fig 2.6 Final Text Expression in PDF (05/04/22)

fig 2.7 Final Text Expression in GIF (12/04/22)

The crumbling effect slowly cracks the text and fades away swiftly. This has been a great experience for me as it is my first time experimenting with GIFs. I am looking forward to creating more in the future.

TASK 1: EXERCISES 2 - TEXT FORMATTING

Text Formatting 1:4 - Kerning and Tracking

We watched the lecture video that guided us on how to do kerning and tracking.

fig 3.0 Experimenting with text formatting on Adobe Illustrator (19/04/22)

fig 3.1 Text formatting with Kerning and Tracking. (19/04/22)

Figure 3.2 Before and after kerning, tracking, and adjusting uppercases (19/4/2022).

For this, I'm using Univers LT Std 75 Black.

Figure 3.3 Before and after kerning and spacing. (19/4/2022).

For this, I'm using ITC Garamond Std Book Narrow Italic.

Text Formatting 2:4 - Font Size, Leading, Line Length, and Paragraph Spacing

Notes:

- Customising the margins to make it look attractive

- Try to stick to the point size of 8 - 12 for A4 and A3 

- Leading: +2/ +2.5/ +3 points from the point size 

- Body text: The negative and positive space has to be equal

- Line length: 55 - 65 for body text; 35 for subtext

- Headings: Point size and leading is double of body text.

- Paragraph spacing same as leading.

- Do not exceed +3/-3 for tracking 

fig 3.4 Attempting on Font Size, Leading, Line Length, and Paragraph Spacing. (19/04/22)

Text Formatting 3:4 - Text Field, Alignment, and Ragging

Notes:

- Read the content to understand the hierarchy of information.

- Maintain the same text width for the same group of information

- Apply kerning and spacing to reduce ragging

- Turn off hyphenation if there is too much ragging

- For large amount of text, use left align and left justify, avoid center align and right align.

- When using left justify or justify, increase the column interval to 7 / 10 mm to have more space between columns

- Avoid widows and orphans

fig 3.5 Attempting on Text Field, Alignment, and Ragging. (22/04/22)

Text Formatting 4:4 - Layout

Notes:

- Create a visual hierarchy for the layout.

- Use a baseline grid to achieve cross alignment 

Below, I experimented with various layouts for my final work:

fig 3.6 Layout 1 (23/04/22)

fig 3.7 Layout 2 (23/04/22)

Here I decided to try a funky layout for the title.

fig 3.8 Layout 3 (23/04/22)

fig 3.9 Layout 4 (24/04/22)

fig 3.10 Layout 5 (24/04/22)

fig 3.11 Layout 6 (26/04/22)

I switched out the picture as it was not related to Helvetica. The one is a subway sign that uses the Helvetica font.

fig 3.12 Layout 7 (26/04/22)

Then, I switched out the picture again because I wanted to have a portrait picture. So I picked the picture of Helvtica's designer, Max Miedinger. 

Final Submission: Exercise 1 -  Text Formatting

fig 3.13 Screenshot of Final Text Formatting (26/04/22)

fig 3.14 Final Text Formatting in JPEG (26/04/22)

fig 3.15 Final Text Formatting in PDF (26/04/22)

I did my best and I think it looks pretty good. Looking forward to learning more from Mr. Vinod!

Details:

Font: ITC Garamond Std

Typeface: ITC Garamond Std Light, ITC Garamond Std Light Italic (Heading); ITC Garamond Std Book (Body Text); ITC Garamond Std Light Condensed Italic (Sub-text).

Font size :  10 pt, 23 pt, 49 pt 

Leading: 13pt

Paragraph Spacing: 13pt

Average characters per line: 52

Alignment: Left Justified and Align Center

Margins : 12.7mm (top, left, right), 100mm (bottom)

Columns : 4

Gutter (for columns) : 10mm

---

FEEDBACK

Week 2 

General feedback: 

Mr. Vinod advised that it is better to start sketching with a pencil first as compared to starting it on the software so that there will be lesser limitations. He also asked us to convert the texts on Ai into an outline so it turns into a vector. That way we can manipulate how it looks better. 

Specific feedback: 

‘Cough’ – The one with the stretched out ‘o’ is nice

‘Explode’ – Good, it’s like the letter ‘o’ exploded everywhere

‘Crumble’ – Good to go

‘Pop’ – Make it less violent

‘Decay’ – It is fine

‘Squeeze’ – More explorations needed

Week 3 

General feedback: 

Mr. Vinod told us to continue to work on our GIF if we are not done and watch the lecture videos on Text Formatting.

Specific feedback: 

He said that my digitalised typography works are alright. 

Week 4 

General feedback: 

Mr. Vinod told us that submission for Exercise 1 would be next week 27 April for my class (Tuesday’s class). He also reminded us to watch the lecture videos so that we can complete the Text Formatting task.

Specific feedback: 

Mr. Vinod reminded me to replace all the dash lines with one straight line through coding. I must also fix my blog structure according to the blog sample.

Week 5

General feedback: 

Mr. Vinod reminded us to export in DPI 300 for the PDF work. We should also insert the screenshot of our work with the grid and insert it in the blog.

Specific feedback: 

Mr. Vinod said I must switch out my picture and insert one that has relations to the font 'Helvetica'. I can search 'Helvetica uses' or 'Helvetica designer' for example. I must also fix the text sizes on my blog to make it neat. For the GIF, I should reduce the size so it is easily visible on the blog and does not lag.

---

REFLECTION

Experience: 

The lectures in class were straightforward, informative, and clear. I like that Mr. Vinod sometimes will tell us some useful life advice as well as career advice. It truly helps with my academic journey more as a university student. As I was unable to go on to campus, Mr. Vinod was able to engage with me as well as other online students so that we would not miss anything in class. This made me feel at ease. 

Observation:

I observed that I am not very familiar with Adobe Illustrator and Photoshop software and still have a lot to learn. I noticed that I could produce more and better designs when I’m sketching on paper first before directly designing it on software. Pinterest is a great place to look for inspiration as well as tutorials from YouTube; these two have helped me a lot in my design process. Working in a place where there is sunlight as it helps me stay positive and productive. 

Findings:

I found that I need to be more creative in creating new and fresh designs. Perhaps looking through Pinterest and saving those that inspire me and starting from there can help me to improve. I can make amendments to it as well as combine them with my other ideas to make a good design. 

I realized that it is better to start working on the assignment immediately once it is assigned to avoid procrastination and things getting piled up. I found that I have a thing for typography, as I have been doing hand-lettering since high school. I think this module is exciting as it teaches me ways to create more word designs. 

I must document my work regularly, so I don’t have to do everything at the last minute. 

---

FURTHER READING

Fig. 4.0 Typographic design: Form and communication by Rob Carter, Sandra Maxa, Mark Sanders, Philip B. Meggs, and Ben Day.

I read the book "Typographic design: Form and communication." This book is the essential guide to everything type-related: from letterforms to negative space, from messages to processes and their history. It can provide good use to designers in mastering these critical concepts.

Fig. 4.0 Chapter 3: Legibility - Basic Principles of Legibility: pages 50 & 51

Chapter 3 covers the Basic Principles of Legibility. It stated that: as signs representing sound in spoken language, letters are basic to legible typography. The primary purpose of a letterform is to convey a recognizable meaning to the mind. Therefore, letterforms must be designed with clarity, each being distinct within the alphabet. The contrast among individual characters makes it possible for the reader to decipher written information without confusion.

Fig. 4.2 Chapter 5: Syntax and Communication: Visual Hierarchy, page 102

This part of the book talks about the importance of Visual Hierarchy. It is an arrangement of elements in a graduated series, from the most prominent to the least prominent, in an area of typographic space. When establishing a visual hierarchy, a designer carefully considers the relative importance of each element in the message, the nature of the reader, the environment in which the communication will be read, and the need to create a cohesive arrangement of forms within the typographic space. 

Fig. 4.2 Chapter 7: The Evolution of Typography technology - Screen-based typography, page 131

With more than twenty years of typographic development and technical improvements, the web is the most robustly explored and documented application of screen-based type. Mobile apps have also become more and more prevalent for designers. They are influenced by a fixed screen size that responds to touch and gestures performed by fingers.

Reference:

Carter, R., Day, B., Meggs, P. B., Maxa, S., & Sanders, M. (2015). Typographic design: Form and communication. Hoboken, New Jersey: John Wiley & Sons, Inc.