Typography - Task 1: Exercises 1 & 2

30.08.2022 - 03.10.2022 / Week 1 - Week 5
Lim Rui Ying / 0358986
Typography / Bachelor of Design (Hons) in Creative Media
Task 1: Exercises 1 & 2

LIST

Instructions

Task 1: Exercises 1 & 2

Exercise 1: Type Expression

Exercise 2: Text Formatting

Feedback

Reflection
Further Reading

LECTURES

LECTURE LIST

Lecture 1: Typo_0_Introduction
Lecture 2: Typo_1_Development
Lecture 3: Typo_2_Text_P1
Lecture 4: Typo_3_Text_P2

Lecture 5: Typo_Text_4_Basic
Lecture 6: Typo_5_Understanding
Lecture 7: Typo_6_Screen&Print

Lecture 1: Typo_0_Introduction

From this lecture, Mr Vinod gave us an introduction to Typography, which can be seen in our daily life and can be used in a wide range of different fields. For example, Typography is applied in animation, application design, web design, signs, etc. Typography has evolved for about 500 years, from calligraphy to lettering and finally evolved to typography.

I have learnt the terminology of Typography - Font and Typeface. Mr Vinod explained clearly the differences between font and typeface, his explanations help me a lot in clarifying the font and typeface.

Font refers to individual font or weight within a typeface.
Eg. Georgia Regular, Georgia Italic, Georgia Bold, etc.

Typeface refers to the various families that do not share characteristics.
Eg. Georgia, Arial, Helvetica, Times New Roman, Didot, Comic Sans, Futura, etc.

left: Examples of Georgia fonts; right: Examples of typefaces

Lecture 2: Typo_1_Development / Timeline

1. Early letterform development: Phoenician to Roman
In the early days, writing meant scratching into wet clay using a sharpened stick or carving into a stone using a chisel.

The uppercase letterforms are the only letterforms for nearly 2000 years. The forms of uppercase letterforms evolved out of the tools and materials, the forms were mainly built up of straight lines and pieces of circles.

Phoenicians votive stele Carthage

The figure below shows that Modern Latin and Early Arabic evolved from the Phoenician letters in different ways.

Evolution from Phoenician letter

Writing directions
Phoenicians wrote in the direction of right to left.

Greeks wrote in the direction of right to left and left to right alternately, and the text was read in that direction. The Greeks developed this writing style called 'boustrophedon' (how the ox ploughs). Both Phoenicians and Greeks have the similarity of not using letter space or punctuation.

Greeks writing style 'boustrophedon'

Change in the direction of letterforms
Etruscan and Roman carvers would paint the letterforms onto the marble before inscribing them. However, the qualities of their works might be unstable, thus a change in the weight of strokes from vertical to horizontal happened.

Evolution from Phoenician to Roman

2. Hand script from 3rd - 10th century C.E.
Square Capitals can be found in Roman monuments. They have serif added at the end of the main stokes.

Rustic Capitals are a compressed version of square capitals. These letterforms are easier and faster to write, but slightly difficult to read.

left: Square Capitals (4th or 5th century); right: Rustic Capitals (late 3rd - mid 4th century)

Development of lowercase letterforms
Cursive writing forms were developed when used in everyday transactions due to their simplicity and speed, unlike writing Square Capitals and Rustic Capitals which are time-consuming and typically reserved for important documents.

Roman Cursive (4th century)

Uncials took in some aspects of the Roman cursive hand, especially in the shape of the A, D, E, H, M, U and Q. Uncials are small letters, the broad forms of uncials are more readable at small sizes compared to Rustic Capitals.

Half-uncials are a further formalization of the cursive hand, half-uncials mark the formal beginning of lowercase letterforms, with the use of ascenders and descenders.

left: Uncials (4th-5th century); right: Half-uncials (C.500)

Standardization of calligraphy
Charlemagne, the first unifier of Europe since the Romans, entrusted Alcuin of York, Abbot of St Martin of Tours to standardize all ecclesiastical texts. The monks used majuscules (uppercase) and miniscule (lowercase) in rewriting the texts. Capitalization and punctuation set the standard for calligraphy for a century.

Caloline miniscule (C. 925)

3. Blackletter to Gutenberg's type
With the dissolution of Charlemagne's empire came regional variations upon Alcuin's script.

Blackletter
Textura is a condensed and strongly vertical letterform, popular in northern Europe.
Rotunda is a rounder and more open-handed letterform, popular in southern Europe.

Blackletter (1300)

Gutenberg marshalled them all to build pages that accurately mimicked the work of the scribe's hand - Blackletter of northern Europe. He invented the movable type, the technology of printing and typography, to produce his Bible widely in a highly productive way.

42 line bible, Johann Gutenberg, Mainz

4. Text type classification

Text type classification

Lecture 3: Typo_2_Text_P1

1. Tracking: Kerning and Letterspacing
Kerning
The automatic adjustment of space between individual letterforms. Kerning is usually adjusted in headlines.

Without kerning and with kerning

Tracking
The addition and removal of space in a word or a sentence. It is usually adjusted in large paragraphs of text.

Normal tracking is easy to read and suitable to use in a large number of texts.

Loose tracking and tight tracking reduce the readability and recognizability of the pattern that formed the words. People tend to recognize the counterform of the space between the stokes when reading, thus they are not suitable to apply in a large number of texts.

Normal tracking, tight tracking and loose tracking

However, loose tracking can be used in headlines but in uppercase letterforms. Uppercase letterforms can stand on their own, while lowercase letterforms require the counterform created between letters to maintain the line of reading.

2. Formatting Text (Alignment)

Flush left is the most natural text formatting that closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word ends. The spaces between words are consistent, creating an even gray value in the type. However, this format creates ragging, a jagged shape formed by each end line on the right.

Centered imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It transforms fields of text into shapes, thus it is important to amend the breaks so that the text does not appear too jagged. This format is suitable to apply to a small number of texts such as captions.

Flush left and Centered

Flush right emphasises the end of a line as opposed to its start. It can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right.

Justified imposes a symmetrical shape on the text like centering. It is achieved by expanding or reducing spaces between words and letters. This format can occasionally produce 'rivers' of white space running vertically through the text, which are the gaps between the words. Careful attention to line breaks and hyphens is required to avoid this problem.

Flush right and Justified

3. Texture

It is important to consider the different textures of the typefaces. A type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page than a type with a relatively smaller x-height or lighter stroke. Sensitivity to these differences in colour is fundamental for creating successful layouts.

Anatomy of a typeface

The differences in gray values can be seen in different typefaces. A typeface with a middle gray value would be the best in a particular layout.

Different typefaces show the different gray values

4. Leading and Line Length

Type size should be large enough to be readable at arm's length.

Leading refers to the space between adjacent lines of the typeface.

Tight leading and loose leading

Different leading in Adobe Jenson typeface

Line length is the number of characters in a line. A good rule of thumb is to keep the line length between 55-65 characters.

60 characters of line length

5. Type Specimen Book

A type specimen book shows samples of typefaces in various different sizes. It is used as an accurate reference for the outcomes of a typeface in terms of type size, leading, line length, etc, helping in deciding the right type to use.

Sample type specimen sheet

Compositional requirement: Text should create a field that can occupy a page or a screen. An ideal text should have a middle gray value.

It is useful to enlarge the type to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below. If the outcome is on a printed page, it is best to print out an actual page to look closely at the details. If its outcome is on screen, then the judging type on screen is accurate.

Lecture 4: Typo_3_Text_P2

1. Indicating Paragraphs

There are several options for indicating paragraphs:

The ‘pilcrow’ (¶)

A holdover from medieval manuscripts seldom use today. It is one of the hidden characters or blue indicators that helps in formatting large amounts of text.

The ‘pilcrow’

Line space (leading*)

Paragraph space should be the same as the line space to ensure cross-alignment across columns of text.

Line space is the space from the baseline of a sentence to the descender of the next sentence.

Leading is the space between two sentences.

*As design students, we should use the name leading in typography.

left: paragraph space; right: line space vs leading

Indentation

Standard indentation is the indentation of the first line in a paragraph, the ident is the same size of the line spacing or the same as the point size of the text.

The method of extended paragraphs creates unusually wide columns of text.

left: standard indentation; right: extended paragraph indentation

2. Widows and Orphans

The unpardonable gaffes in formatting text are widows and orphans.

A widow is a short line of the type left alone at the end of a column of text. It can be avoided by creating a force line break before or adjusting the tracking of the line before to let the last word in the second last line moves down to the last line.

An orphan is a short line of the type left alone at the start of a new column. It could be avoided by adjusting the length of the column.

Widow and orphan

3. Highlighting Text

Examples of highlighting text:

Use the same typeface but different fonts (Italic, Bold) or colour

Use bold sans serif
Note that a sans serif font usually is slightly larger than a serif font in the same point size. In this example, the sans serif font (Univers) has been reduced by 0.5 pt to match the x-height of the serif typeface.

Place a field of colour

Place typographic elements (such as bullet points)

Use quotation marks
Note that prime is not a quote. The prime is an abbreviation for inches and feet.

4. Headline within Text

There are many kinds of subdivisions within the text of a chapter. The following visuals have been labelled (A, B and C) according to the level of importance.

A head indicates a clear break between the topics within a section. Examples:

B heads are subordinate to A heads, they indicate a new supporting argument or example for the topic at hand. Examples:

C head highlights specific facets of material within B head text. C heads in this configuration are followed by at least an em space for visual separation. Examples:

5. Cross Alignment

Cross-aligning headlines and captions with text type reinforce the architectural sense of the page—the structure—while articulating the complimentary vertical rhythms. In some cases, cross-align can be maintained by doubling the leading space of the text type to be used as the leading of the headline type. The example shows one line of headline type cross-aligns with two lines of text type.

Cross alignment

Lecture 5: Typo_4_Basic

1. Describing letterforms

Baseline: the imaginary line at the 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'
Stroke: any line that defines the basic letterform
Apex / Vertex: the point created by joining two diagonal stems
Arm: short strokes off the stem of the letterform (horizontal: E, F, L; inclined upward: K, Y)
Ascender: the portion of the stem of a lowercase letterform that projects above the median
Barb: the half-serif finish on some curved stroke
Beak: the half-serif finish on the same horizontal arms
Bowl: the rounded form that describes a counter
Bracket: the transition between the serif and the stem
Cross Bar: the horizontal stroke in a letterform that joins two stems together
Cross Stroke: the horizontal stroke in a letterform that joins two stems together
Crotch: the interior space where two strokes meet
Descender: the portion of the stem of a lowercase letterform that projects below the baseline
Ear: the store extending out from the main stem or body of the letterform
Em/en: originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typeface; an en is half the size of an em
Finial: the rounded non-serif terminal to a stroke
Leg: short stroke off the stem of the letterform (at the bottom: L; inclined downward: K, R)
Ligature: the character formed by the combination of two or more letterforms
Link: the stroke that connects the bowl and the loop of a lowercase G
Loop: the bowl created in the descender of the lowercase G (in some typefaces)
Serif: the right-angled or oblique foot at the end of the stroke
Shoulder: the curved stroke that is not part of a bowl
Spine: the curved stem of the S
Spur: the extension that articulated the junction of the curved and rectilinear stroke
Stem: the significant vertical or oblique stroke
Stress: the 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: the self-contained finish of a store without a serif, it may be flat, flared, acute, grave, concave, convex or rounded as a ball or a teardrop (see finial)

Describing letterforms

2. The Font

Uppercase and Lowercase
Small Capitals: uppercase letterforms drawn to the x-height of the typeface

Small capitals (top)

Uppercase Numerals (lining figures): same height as uppercase letters and are all set to the same kerning width
Lowercase Numerals (old style figures or text figures): set to x-height with ascenders and descenders

Uppercase numerals and lowercase numerals

Italic: refer back to fifteenth century Italian cursive handwriting
Punctuation, miscellaneous characters: can change from typeface to typeface. It is important to ensure that all the characters are available in a typeface before choosing the appropriate type
Ornaments: used as flourishes in invitations and certificates

Punctuation, miscellaneous characters and ornaments

3. Describing typefaces

Different typefaces and their relative stroke widths typefaces

Roman: an uppercase form that is derived from inscriptions of Roman monuments
Book: lighter stroke in roman
Italic: based on the fifteenth century Italian handwriting
Oblique: based on a roman form of a typeface
Boldface: thicker stroke than a roman form
Semibold, Medium, Poster, Black
Light: lighter stroke than the roman form
Thin: even lighter strokes
Condense: a condensed version of the roman form
Compressed: extremely condense styles
Extended: extended variation of a roman form

Describing typefaces

4. Comparing typefaces

We are to use the 10 typefaces below throughout this module. These 10 typefaces represent 500 years of type design. Each typeface gives different feelings, it is important for us to understand these typefaces well and choose the right typeface for conveying messages in a particular work.

10 typefaces

Lecture 6: Typo_5_Understanding

1. Understanding letterforms

The uppercase letterforms below suggest symmetry, but in fact, it is not symmetrical. The asymmetrical letterforms below are both internally harmonious and individually expressive.

Baskerville stroke form: two different stroke weights can be easily seen

Univers stroke form: a close examination shows that the width of the left slope is thinner than the right stroke

left: Baskerville 'A'; right: Univers 'A'

The complexity of each individual letterform is neatly demonstrated by examining the lowercase ‘a’ of two seemingly similar sans-serif typefaces—Helvetica and Univers. A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

left: Helvetica 'a'; right: Univers 'a'

2. Maintaining x-height

X-height generally describes the size of the lowercase letterforms. Curved strokes, such as in ‘s’, must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Lowercase maintaining x-height

3. Form and Counterform (Counter)

The space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them. Counterform has the same importance as the letterforms as it helps to recognize the shape of the letters and assure the readability of the words.

Form and counterform

We could examine the counterform of letters by enlarging each letter and analysing them. It could give us a glimpse into the process of letter-making.

4. Contrast

The design principle of Contrast is also applied in typography. The simple contrasts produce numerous variations: small+organic / large+machines; small+dark / large+light, etc.

Contrast in typography

Lecture 7: Typo_6_Screen&Print

TYPOGRAPHY IN DIFFERENT MEDIUM

In the past, typography was viewed as living only when it reached paper. No changes were made once a publication was edited, typeset and printed. Today, typography exists not only on paper but on a multitude of screens. Typography is not only controlled by designers as it is subject to many unknown and fluctuating parameters, such as operating system, system fonts, the device and the screen itself.

Print Type vs Screen Type

1. Type for Print

The type was designed intended for reading from print long before we read from a screen. Designers should ensure the text is smooth, flowing and pleasant to read.

Typefaces for print: Caslon, Garamond, Baskerville, Univers (characteristics: elegant and intellectual, highly readable at small font size)

Type for print

2. Type for Screen

Typefaces intended for use on the web are optimized and often modifies to enhance readability and performance on-screen in a variety of digital environments.

Examples of adjustments: taller x-height or reduced ascenders and descenders, wider letterforms, more open counters heavier thin strokes and serifs, reduced stroke contrast, modified curves and angles, etc.

Another important adjustment: more open spacing (especially for smaller sizes typefaces)

All the adjustments were made to improve character recognition and overall readability in non-print environments (web, e-books, e-readers ad mobile devices).

There are typefaces specifically designed for screens such as Verdana and Georgia due to the insufficiencies in the clarity of typefaces and screen resolution in the past.

Type for screen

3. Hyperactive Link / Hyperlink

A hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document. Hyperlinks can be found on nearly all web pages. Text hyperlinks are normally blue and underlined by default.

4. Font Size for screen

16-pixel text on a screen is about the same size as text printed in a book or magazine, accounting for reading distance. Printed text is typically set at about 10 points within the reading distance of a few inches away, while at least 12 points within the reading distance of arm's length, which is about the same size as 16 pixels on most screens.

Font size on screen (left) vs print (right)

5. System Fonts for Screen / Web Safe Fonts

Each device comes with its own pre-installed font selection which is largely based on its operating system. Windows, macOS and Google's own Android system have their own system font. Each system font may differ a little bit and not be compatible with each other. However, this is no longer an issue as it has been solved to avoid inconvenience.

Web safe fonts appear across all operating systems. They are a small collection of fonts that overlap from Windows to Mac to Google.

Web safe fonts: Open Sans, Lato, Arial, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

6. Pixel Differential between Devices

The text on screens in different devices (PCs, tablets, phones and TVs) differs in size and proportion because of the different-sized pixels of the screens. Even within a single device class, there will be a lot of variation.

Pixel Differential between Devices

Static vs Motion

1. Static Typography

Static typography is not limited to minimal characteristics such as bold and italic in expressing words. It can also create movements and motions in a dynamic way.

Static typography

2. Motion Typography

Motion typography is introduced around since the 1960s when feature films started using animated opening titles instead of static text. Alfred Hitchcock's North by Northwest (1959) is credited as the first feature film to extensively use kinetic typography.^[1] While Matt Woolman and Jeff Bellantoni introduced a comprehensive survey of motion typography in the book Type in Motion: Innovations in Digital Graphics.^[2]

Today, motion typography is widely used in various forms of animation and motion graphics. The type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack. On-screen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values.

Video 1: North by Northwest - Opening Title

Type in Motion: Innovations in Digital Graphics

References

[1] https://www.invisionapp.com/inside-design/kinetic-typography-examples/

[2] https://www.abebooks.co.uk/servlet/BookDetailsPL?bi=17943961736&searchurl=an%3Djeff%2Bbellantoni%2Bmatt%2Bwoolman%26sortby%3D17&cm_sp=snippet-_-srp1-_-title1

Class Summary

WEEK 1

This week, Mr Vinod first guided us to join the Typography (TDS) Facebook group to know all the updated announcements and information, and access to the learning resources in myTimes. We are required to download the ten fonts we will use throughout this module. Next, we had 30 minutes to watch an E-portfolio briefing video uploaded by Mr Vinod. He guided us step by step to set up our E-portfolio on Blogger and create a label for the Typography module.

Mr Vinod explained the module information booklet and learning outcomes thoroughly and clearly to us. I was impressed by the concept of critical thinking, a significant skill when learning design. Critical thinking is the ability to analyze and observe available facts to form a judgment of neither right nor wrong. I have benefited from the interpretation by Mr Vinod.

WEEK 2

In Week 2, Mr Vinod gave us feedback on our type expression sketches by sharing our sketches on Zoom. I learned a lot and found it interesting to learn from different perspectives and ideas through my classmates' work and the feedback from Mr Vinod. We were asked to fill in our feedback in the Google Sheet provided by Mr Vinod.

Mr Vinod mentioned the importance of exercising our own judgment. Our judgment might be right or wrong, but it is vital to go through this exercise to get the result in developing confidence, independence, critical thinking, the ability to apply knowledge, and self-reflection. If we keep practising this exercise, we can develop our creativity and judgment more maturely. Thus, we cannot avoid risk-taking when exercising judgment. Mr Vinod has mentioned risk-taking:

“ Risk-taking is a part of CREATIVITY. ”

Instead of gaining feedback from our lecturers, we should also get opinions from our peers to be aware of different perspectives from others.

Mr Vinod gave us some guides on digitising our sketches. He has shown us some of his examples works and made explanations on them. Mr Vinod demonstrated digitising the words "cut" and "sticky" and taught us some tips to digitise our sketches. We used the remaining time to work on digitising our type expression sketches.

Digitisation of the words "cut" and "sticky" by Mr Vinod

WEEK 3

This week, we have the feedback session on our digitised type expressions. Some of our artworks are too small that do not fit the frame of the square in the given template, losing visual impact. Mr Vinod pointed out we should think that is it our work presentable, it is important to present our artwork in balance and give out the visual impacts to the viewers. Mr Vinod also reminded us not to use too many decoratives when creating type expressions, the decoratives might be more significant than the word.

While giving us feedback on our works, Mr Vinod demonstrated making adjustments to some artworks of my classmates. He noted that looking at others' works and his demonstration is part of the learning process. I learned a lot from this feedback session and got know to the different ideas of my classmates.

WEEK 4

In week 4, Mr Vinod gave us feedback on our animated type expressions. We have about 45 minutes to refine our animation after the feedback session.

Mr Vinod then chose four persons to check on their blog progress. Mr Vinod pointed out many details to be noticed when recording our design journal on our blog. For instance, the label and description of a figure are very important. We were advised to make our blog short and simple to read and complete the rest of the parts as soon as possible like lectures, reflections and further reading to meet the coming deadline.

We have to watch five tutorial videos for this exercise - Text Formatting and the deadline for this exercise is week 5. We were given time to watch the videos in class. After that, Mr Vinod gave us a more thorough tutorial in class on the details that he does not mention in the videos.

WEEK 5

Mr Vinod gave us feedback on our layout works. I found the feedback very useful for me. There are a lot of details that I did not notice when I was doing the text formatting task. Mr Vinod also mentioned the submission requirements for the text formatting task. After that, Mr Vinod briefed us on the next assignment - Task 2: Typographic Exploration and Communication. We have to apply the knowledge and skills we obtained from Task 1 in the next task.

TO THE TOP ↑

INSTRUCTIONS

TASK 1: Exercise 1 - Type Expression

For Exercise 1, we were given six words to make type expressions. We are required to choose four words from these six words: Accelerate, Box, Distort, Cozy, Fragile, and Bite, and sketch out the meaning of the words. We are not encouraged to use too many graphical elements, but several dots and lines are allowed to help with type expression.

1. Sketches

I have chosen the words Cozy, Box, Bite, and Distort for the type expression sketches.

Fig. 1.1 Type expression sketches, Week 2 (5/9/2022)

Cozy I use rounded text and bold typeface to create a coziness to the word.

Box I use the letters of this word to create the appearance of a box in 3D form.

Bite For designs #1 and #2, I considered the letter B as a "mouth" to bite the letters I, T, and E. While letters in design #3 are bitten has expressed the meaning.

Distort I use wavy lines and curves in designs #1 and #2, while an upward curve and a downward curve in design #3, to create the effect of being distorted.

2. Digitisation

During the digitisation process, I have tried out several attempts to create the right expression for each word based on my sketches with the typefaces provided. I have a rough digitisation work by having lots of attempts at trying different typefaces. Later on, I worked in more detail with it and recorded the process of digitisation. I inserted the process of the main designs of each word.

Fig. 1.2 Rough digitisation work, Week 2 (12/9/2022)

1. Cozy

Fig. 1.3 Digitisation process for Cozy #1, Week 2 (12/9/2022)

I used the font Adobe Casion Pro Bold in digitising the word Cozy #1. I enlarged and tilted the letters 'c' and 'y', trying to create a comfortable place such as a bed or a sofa like my sketch mentioned above.

2. Box

Fig. 1.4 Digitisation process for Box #1, Week 2 (12/9/2022)

The font I used for digitising the word Box #1 is Futura Std Bold. I used Pathfinder to cut the letter 'O' into half and the Perspective Grid Tool to help me create the illusion of a box in 3D form. At last, I added two lines to complete the illusion of a box.

Fig. 1.5 Digitisation process for Box #2, Week 2 (12/9/2022)

For Box #2, I used the same font Futura Std Bold as Box #1. I also used the Perspective Grid Tool for digitising Box #2 by putting the letters on each perspective to make an illusion of a box as well.

3. Bite

Fig. 1.6 Digitisation process for Bite #1, Week 2 (12/9/2022)

For the word Bite #1, I used the typeface Futura Std with Extra Bold Condensed and Medium fonts for the digitisation process. I made several attempts on the word Bite.

Bite #1a I digitised it followed by my sketch, in which the letter 'B' remained in a vertical position.

Bite #1b I rotated the letter 'B' into the horizontal position, which was recommended by Mr Vinod previously during the sketches feedback session. Then I made some adjustments to the letters 'I', 'T', and 'E' to make them compatible with the letter 'B'.

Bite #1c I try another attempt by rotating the letter 'B' at 45° and tilting the remaining letters, making the letter 'B' "biting" them. I found out this rotated Bite is the best to express it. Thus, I choose this Bite for the first attempt at digitised type expression.

Fig. 1.7 Digitisation process for Bite #2, Week 2 (12/9/2022)

I used Bodoni Std typeface with Poster and Book fonts for the digitisation of the word Bite #2. After creating outlines for the word Bite, I enlarged the letter 'B' and move the letter 'I' at the lower void of the letter 'B', while letters 'I' and 'E' are bitten by the letter 'B' too.

4. Distort

Fig. 1.8 Digitisation process for Distort #1, Week 2 (12/9/2022)

I used Bembo Std Extra Bold in the digitisation of Distort #1. I created a shape based on the shape I drew in my sketch. I moved the text to the back of the shape and used Envelope Distort - Make with Top Object to make the effect of distortion in that particular shape.

First attempt

Fig. 1.9 First attempt of digitised type expressions, Week 2 (12/9/2022)
[Cozy #1, Box #1,
Bite #1, Distort #1]

Fig. 1.10 First attempt of digitised type expressions (extras), Week 2 (12/9/2022)
[Cozy #2, Cozy #3, Box #2,
Bite #2, Bite #3, Distort #2]

After the feedback session in the week 2 class, I reworked my type expressions digitisation and I chose one design for each word as the second attempt at digitised type expressions.

Second attempt

Fig. 1.11 Second attempt of digitised type expressions, Week 3 (13/9/2022)
[Cozy, Box, Bite, Distort]

1. Cozy I resized the letters 'c' and 'y' to let all letters be in the same size and arranged the cozy in a slight downward curve.

2. Box I adjusted the stroke of the two lines to 0.5 pt to let the word box be emphasised. I enlarged the Box to fill in the space of the box.

3. Bite I chose Bite #3 in my first attempt to be my second attempt at digitised type expression. I tilted the letter 'I' in the "stomach" of the letter 'B' and enlarged the word Bite to fit the box.

4. Distort I redo the digitisation of the word Distort. I lowered the letter 'D' and reflected the letters 'i', 's' and 't' in either horizontal reflection or vertical reflection.

Final Task 1 - Exercise 1: Type Expressions

Fig. 1.12 Final Type Expression - JPEG, Week 3 (13/9/2022)

Fig. 1.13 Final Type Expression - PDF, Week 3 (13/9/2022)

3. Animation

We have to choose one from the four final type expressions to make an animated type expression. I chose the word Cozy for the animation. Before we start to do the animation, we have to watch the animation tutorial video made by Mr Vinod. In the video, Mr Vinod demonstrated how to make an animation step by step using Illustrator and frame animation in Photoshop. He advised us to think about how the word would animate in each frame.

I came out with the first animated Cozy (Fig. 1.14). I want to make the word Cozy swing as the idea is from the rocking chair.

Fig. 1.14 Attempt #1 of animated Cozy, Week 3 (20/9/2022)

However, the word Cozy swings too much and it was moving a bit stiffly and unnaturally. I took the suggestion of Mr Vinod to make the movement of Cozy smaller and slower, and pause for a second at last before the animation starts again.

Fig. 1.15 Attempt #2 of animated Cozy, Week 4 (23/9/2022)

Final Animated Type Expression

Fig. 1.16 Final Animated Type Expression "Cozy" - GIF, Week 4 (23/9/2022)

TASK 1: Exercise 2 - Text Formatting

For Exercise 2, we have to create a final layout of text formatting, working with typefaces, type size, leading, line length, etc. Before that, we have to learn and work with kerning and tracking.

1. Kerning and tracking exercise

We are assigned to work with kerning and tracking our name using the 10 typefaces provided. We are allowed to use different fonts and type sizes in a typeface.

Fig. 2.1 Text formatting with and without kerning, Week 4 (24/9/2022)

Fig. 2.2 Both with kerning and without kerning overlapped to see the differences, Week 4 (24/9/2022)

2. Layout exercise

We are to create a final layout using the texts given and work with the text formatting setting. Black and white photography should be added to the layout with a caption. Throughout this exercise, we could have a better understanding of text formatting and be more sensitive to the details in creating a good layout.

I created two layouts for this exercise, both are in two columns and left aligned, but in different typefaces.

Fig. 2.3 left: Layout #1; right: Layout #2

Layout #1
HEAD
Font/s: ITC Garamond Std Bold (headline), ITC Garamond Std Book Italic (byline)
Type Size/s: 30 pt (headline), 10 pt (byline)
Leading: 36 pt (headline), 12 pt (byline)
Paragraph spacing: -

BODY
Font/s: Gill Sans Std Regular (body text), Gill Sans Std Light (captions)

Type Size/s: 10 pt (body text), 8 pt (captions)
Leading: 12 pt (body text), 9.6 pt (captions)
Paragraph spacing: 12 pt (body text)
Characters per-line: 60 characters
Alignment: Left aligned

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

Columns: 2

Gutter: 5 mm

Layout #2
HEAD
Font/s: Bembo Std Extra Bold (headline), Bembo Std Italic (byline)
Type Size/s: 30 pt (headline), 10 pt (byline)
Leading: 36 pt (headline), 12 pt (byline)
Paragraph spacing: -

BODY
Font/s: Janson Text LT Std 55 Roman (body text), Bembo Std Italic (captions)

Type Size/s: 10 pt (body text), 10 pt (captions)
Leading: 12 pt (body text), 12 pt (captions)
Paragraph spacing: 12 pt (body text)
Characters per-line: 63 characters
Alignment: Left aligned

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

Columns: 2

Gutter: 5 mm

After the feedback session in the week 5 class, I have made adjustments to Layout #1. I aligned the right column of body text to the bottom of the byline text which was advised by Mr Vinod.

I created a new layout with the ideas I got from others' work and the feedback given by Mr Vinod.

Fig. 2.4 left: Adjusted layout #1; right: Layout #3, Week 5 (27/9/2022)

Layout #3
HEAD
Font/s: ITC New Baskerville Std Bold (headline), ITC New Baskerville Std Italic (byline)
Type Size/s: 27 pt (headline), 10 pt (byline)
Leading: 34.5 pt (headline), 12 pt (byline)
Paragraph spacing: -

BODY
Font/s: Janson Text LT Std 55 Roman (body text, captions)
Type Size/s: 9 pt (body text), 7 pt (captions)
Leading: 11.5 pt (body text), 9 pt (captions)
Paragraph spacing: 11.5 pt (body text)
Characters per-line: 58 characters
Alignment: Left aligned

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

Columns: 2

Gutter: 5 mm

Final Task 1 - Exercise 2: Text Formatting

Fig. 2.5 Final Text Formatting (without grids) - JPEG, Week 5 (27/9/2022)

Fig. 2.6 Final Text Formatting (with grids) - JPEG, Week 5 (27/9/2022)

HEAD
Font/s: ITC New Baskerville Std Bold (headline), ITC New Baskerville Std Italic (byline)

Type Size/s: 27 pt (headline), 10 pt (byline)
Leading: 34.5 pt (headline), 12 pt (byline)
Paragraph spacing: -

BODY
Font/s: Janson Text LT Std 55 Roman (body text and captions)
Type Size/s: 9 pt (body text), 7 pt (captions)
Leading: 11.5 pt (body text), 9 pt (captions)
Paragraph spacing: 11.5 pt (body text)
Characters per-line: 58 characters
Alignment: Left aligned
Margins: 12.7 mm (top, left, right), 50 mm (bottom)
Columns: 2
Gutter: 5 mm

Fig. 2.7 Final Text Formatting (without grids) - PDF, Week 5 (27/9/2022)

Fig. 2.8 Final Text Formatting (with grids) - PDF, Week 5 (27/9/2022)

TO THE TOP ↑

FEEDBACK

WEEK 2

Fig. 1.1 Type Expressions Sketches

General feedback

I have created 3 designs each for the words Bite, Box and Distort, and 4 designs for the word Cozy. My designs are overall fine and acceptable to continue for digitisation. One thing to notice is I should consider the 10 typefaces given by Mr Vinod when sketching. I have to try out to apply the 10 typefaces given in digitising my sketches.

Specific feedback
For design #2 of the word Cozy, I try to visualize a comfortable place like a sofa or bed by rotating the letter 'C', which I think is good.

In designs #1 and #2 of the word Bite, the letter 'B' biting the letters 'I', 'T' and 'E' is also an exciting idea.

WEEK 3
General feedback
I would have to enlarge each of my designs to fit the box, Mr Vinod has commented some of my designs are small.

Specific feedback
Fig. 1.9 and 1.10 First attempt of digitised type expressions
For Cozy #1 (Fig. 1.9), the enlargement of the letters 'c' and 'y' may not be necessary, the four letters could be of the same size.

Bite #1 (Fig. 1.9) is fine, it should be larger to fit the box approximately.

Distort #1 (Fig. 1.9) is just OK, I think it can be better so I try to rework it.

For Box #1 (Fig. 1.9), the illusion of a box for expressing the word Box is great, but I was advised to change the stroke of the two lines above the letters to 0.5pt.

Bite #2 (Fig. 1.10) is a great idea, the letter 'B' has eaten the letter 'I' into its "stomach" while biting the letters 'T' and 'E'.

WEEK 4

Fig. 1.14 Attempt #1 of animated Cozy

Specific feedback
I chose the word Cozy for the animation. I try to let the Cozy swing but I make it swings too much and it becomes swinging not cozy anymore. It was suggested to make the swing smaller and slower, and stop for a second at last before the animation starts again.

WEEK 5

Fig. 2.3 left: Layout #1

General feedback

I came out with two columns of layout with left aligned. The type size, leading, line length and cross alignment of the headlines and body text are fine.

Specific feedback
Mr Vinod could not see how the layout is created, there is no basis for doing with the alignment. I was advised to align the right column of the body text to the bottom of the byline text.

WEEK 6
Fig. 2.4 left: Adjusted layout #1; right: Layout #3
Specific feedback
The type setting of my initial final text formatting layout (Fig. 2.4 left: Adjusted layout #1) can be improved and the ragging is too straight for left-aligned in the layout. Mr Vinod commented layout #3 is better.

TO THE TOP ↑

REFLECTION

Experience

The classes throughout these five weeks are pretty intense for me. We completed Task 1 bit by bit every week to ensure our progress and got feedback from Mr Vinod every week to make adjustments to our work. We look through classmates' work as well and I could learn from their ideas and the feedback given by Mr Vinod. Mr Vinod will always give us advice on active learning but not just to complete our work to meet the deadline. We also watched the pre-recorded lecture videos to learn the basics of typography.

Observations

I observed that I have worked in more detail in my work. I noticed the way of completing our work bit by bit each week could get full guidance and absolute feedback, which is very helpful in the learning process. I noticed that sometimes I missed out on some important information and work requirements given by Mr Vinod. Thus, I did not consider the 10 typefaces in my sketches that need to be improved. I also have trouble expressing words in animation as I am not familiar with how animation works.

Findings

We work with letters and words in Typography. Letters and words seem to be communication tools in our daily life only. In fact, Typography is also an art, good typography requires a lot of detailed work and it can create a visual impact on the viewers. I found that I became more observant of my surroundings, observing the letters and words used.

I found that I rarely ask questions in class, this is not an effective way of learning. I should change the mindset of being spoon-fed by the lecturer and practise critical thinking and active learning. I should pay more attention in class to avoid missing out on vital information. It could affect a lot throughout the whole task in which I found difficulties in digitising my sketches and doing the animated type expression as I did not consider the 10 typefaces from the first part of this task, sketches.

I usually took a long time to complete each part of the task and assignments of other modules. I must learn to manage my time well to complete all the assignments on time. I should also avoid being a perfectionist to get things done effectively.

TO THE TOP ↑