Typography - Task 1: Exercises

26/09/2025 - 31/10/2025 (Week 01 - Week 06)

PHANG QI YU / 0385732

Typography / Bachelor of Design in Creative Media / Taylors University

Task 1: Exercises

Table of Content

1. Lecture

2. Instructions

3. Process Work

4. Feedback

5. Reflection

6. Further Reading

LECTURES

Week 1:

1.0 Typo_0_Introduction & Briefing

For the first week of the class, we comprehend the basic concept and understanding of typography. Then, we learnt to set up a blog (e-portfolio) for every course that need to use. Mr. Vinod explained step by step on how to open a blog and even points out some people's mistake of their blog as example. All instructions and rules were explained in detail.

Introduction Link: https://youtu.be/er4zVs32tyw?si=6Um2b2fLvEBhmxAf

Briefing Link: https://youtu.be/IjcX2wwKmiE?si=MewXH4gUPDvXgNUe

Week 2:

1.1 Typo_1_Development

The topic of this week we are going through is typographic development/timeline. It is important to understand the historical context of typography.

Initially writing meant scratching into wet clay with sharpened stick or carving into stone with chisel.

Figure 1.1.1

Right: (4th century B.C.E) Phoenicians votive stele Carthage, Tunisia. The stele bears a four-line inscription to Tanit and Baal Hammon. Left: Evolution from Phoenician letter.

Phoenician wrote from right to left. The Greek established a style of writing called 'boustrophedon' (how the ox ploughs), which the lines of text read alternately from right to left and left to right. Thus, they have to be fluent in reading words in reverse and also normal. They also changed the orientation of the letterforms.

Figure 1.1.2 Boustrophedon

Etruscan (and the Roman) carvers working in marble painted letterforms before inscribing them.

Figure 1.1.3 Change in weight from vertical to horizontal, broadening a stroke at start and finish.

Early letterform development: Phoenician to Roman

Figure 1.1.4 Early letterform development

Some examples of text type classification/development:

Figure 1.1.5 Blackletter (AD1450)

Figure 1.1.6 Italic (AD1500)

Figure 1.1.7 Modern (AD1775)

Figure 1.1.8 Serif/Sans Serif (AD1990)

Typographic development link: https://youtu.be/kmCeFyqlx4M?si=PCl8N7vBT7uMkXQg

Week 3:

1.2 Typo_3_Text (Part 1)

1. Text/Tracking: Kerning and Letterspacing

Kerning: Automatic adjustment of space between letters. Mostly used in headlines.
Letterspacing: Add space between the letters.
Tracking: Addition and removal of space in a word or sentence.

By adding extra spacing between words or sentences, you are reducing the clarity of the patterns they create. There are normal tracking, loose tracking and tight tracking. Increasing the spacing between letters also tends to reduce the readability of text.

Figure 1.2.1 Letters with kerning & without kerning

Figure 1.2.1 Types of text tracking

2.Formatting Text

What is Gray Value? Gray Value refers to text on a white page or darkness of the text on a white page.

Flush left: mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Flush left ragged right. Creates an even gray value.
Centered: imposes symmetry upon the text, assigning equal value and weight to both ends of any line. Transform fields of text into shapes. It is not advisable to use except for small amount of text.
Flush right: emphasis on the end of a line as opposed to its start. Useful in situations (like captions or axial layout) where the relationship between text and image is unclear without clear right alignment. Flush right ragged left.
Justified: like centering, imposes a symmetrical shape on the text. Reduces space between words and letters. Large spaces between words produce rivers. Fix line breaks and hyphenation is required to reduce problem.

Figure 1.2.2 Text Formatting

Typographer first job: CLEAR, APPROPRIATE PRESENTATION of the author's message. Quite simply if you see the type before you see the words, change the type.

3.Texture

Different typefaces suit different messages. Type with large x-height or heavy strokes width produces a darker mass on the page than type with a smaller x-height or lighter stroke. A larger x-height is more readable than tall ascender and descender.

Figure 1.2.3 Anatomy of A Typeface

4.Leading and Line Length

Type size: large enough to be read easily at arm's length. (between 8-12 characters)
Leading: text too tightly result in vertical eye movement which can easily loose peoples' place. Text too loose creates striped patterns that distract the reader. (should be 2.5-3 characters)
Line length: shorter lines require less reading; longer lines more. Keep line length between 55-65 characters for best readability.

Figure1.2.4 Leading

5.Type Specimen Book

What is Type Specimen Book?

Type Specimen Book is a sheet, or a book shows sample of typefaces in multiple sizes.

Compositional requirement: Text need to fill the page or screen with a balanced gray toned, avoiding stripes pattern.

On screen, enlarged type to 400% to get clear sense of the relationship between descenders on one line and ascenders on the line below.

Figure 1.2.5 Sample Type Specimen Sheet

Typo Text (Part 1) link: https://youtu.be/adjqGyk4v_c?si=pHji5m1YPWWfs2Cf

1.3 Typo_4_Text (Part 2)

1. Indicating Paragraph

'Pilcrow' (¶) is used in text to indicate paragraph space/ indicate the start of a new paragraph. 'Pilcrow' was used in manuscripts and is rarely used today.
'Line Spacing' (Leading) can be used to separate paragraphs.
Indentation is another way to indicate a paragraph. The size of the indent must be the same size as the line spacing or the same as the point size used in the text. Remember, whenever you are using indentation, you should never use left alignment and never have ragging on the right.
Indentation is best to use when the text is JUSTIFIED.
Extended paragraphs usually create a wide column of text. Despite these drawbacks, there are still strong functional to use it.

IMPORTANT TO REMEMBER AND NOTE

If text is 10pt, leading must be 12/12.5-3pt (2.5pt-3pt larger than typeface)
Press 'ENTER' twice is a mistake.
Paragraph space/ Paragraph break must same as your Leading space (para spacing 12pt = leading 12pt) to maintain cross alignment and good reading rhythm.
Line spacing is different from the word leading.

Figure 1.3.1 Line space vs Leading

2. Widows and Orphans

Widow: a short line of type left alone at the end of column of a text.
Orphan: short line of type left alone at the start of a new column.
Widows and Orphans are serious gaffs in justified text. Widows may be allowable in flush right text, but orphans are never acceptable. Try to avoid orphan.
Solution to widows: rebreak your line endings throughout your paragraph
Orphans are trickier and require more care. Make sure that no column of text starts with the last line of the last paragraph.
When kerning/letterspacing to solve widows or orphans, 3 is enough, not more or less than 3 times. Tracking value has to be in 5.

Figure 1.3.2 Widow and Orphan

3. Highlighting Text

How do you highlight important text within a large amount of text?

Using Italics
Differentiating Text
Increase boldness/weight of text
Change the typeface (make sure to reduce the point size around 0.5pt)
Highlight it (change color of the text) but only can use black, cyan, magenta and yellow
Creating a highlight box around the text

Figure 1.3.3 Highlight box around the text

Quotation marks, like bullets can create a clear indent, breaking the left reading axis.

Single prime (') = feet
Double prime (") = inches
To reduce the number of keys, they did away with the quotation and just maintained a prime.
prime is not a quotation marks.

Figure 1.3.4 Primes and Quotation Marks

4. Headline within Text

The letters A B and C are used to indicate different type of headlines. Letters A, B and C labeled content according to the levels of importance.
'A' head indicates a clear break between the topics within a section. 'A' heads are set larger than the text, in bold and in small caps, or 'extended' to the left of the text.
'B' heads are subordinate to the 'A' heads. They indicate a new supporting argument or example of the topic.
'C' heads although not common, highlights specific facets of material within 'B' heads. 'C' heads are used especially when you have a large amount of complicated text (example in our e-portfolio).
'C' head can be styled in small caps, italics, serif bold, and sans serif bold.
Putting 3 heads together creates hierarchy

Figure 1.3.5 'A' head

Figure 1.3.6 'B' head

Figure 1.3.7 'C' head

5. Cross Alignment

Cross aligning headlines and captions with body text strengthens the architectural sense of the page (the structure) while articulating the complementary vertical rhythms.
Doubling the leading can maintain the cross alignment. For example, the small text is 13pt, the headline leading would be (13pt x 2) which is 26pt.

Typo Text (Part 2) link: https://youtu.be/u5meWAB32wA?si=mhIQXISqX6j8m6Ca

Week 4:

1.4 Typo_2_Basic

1. Describing Letterforms

Baseline: the imaginary line the visual base of the letterforms.
Median: the imaginary line defining the x-height of letterforms.
X-height: the height in in any typeface of the lowercase 'x'. (between median and baseline)
Ascender height tends to be slightly above the capital letter.

Figure 1.4.1

Stroke: any line that defines the basic letterform.
Apex/Vertex: the point created by joining two diagonal stems (apex above, vertex below)
Arm: short strokes off stem of letterform, either horizontal (E, F, L) or inclined upwards (K, Y).
Ascender: the portion of the stem of a letterform that projects above the median.
Barb: the half-serif finish on some curved stroke.
Beak: the half-serif finish on some horizontal arms.
Bowl: the rounded form that describes a counter. The bowl may be either open or closed.
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 letterform that joins two stems together.
Crotch: Interior space where two strokes meet.
Descender: the portion of the stem of a lowercase letterform that projects below the baseline.
Ear: the stroke extending out from the main stem or body of the letterform.
Em/en: referring to the width of an uppercase M, and em is the distance equal to the size of the typeface. (A gap between words) 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, either at the bottom of the stroke (L) or inclined downward (K, R).
Ligature: character formed by the combination of two or more letterforms. (example fl joined together)
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.
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 the articulates 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 a stroke without a serif. Terminal may be flat ('T' above), flared, acute, ('t' above), grave, concave, convex, or rounded.

Figure 1.4.2 Describing Letterforms

2. The font

To work well with type, use a full font and understand how to apply it effectively.

Uppercase and Lowercase.

Figure 1.4.3 Uppercase and Lowercase

Small capitals: uppercase letterforms drawn to the x-height of the typeface. Small caps found in serif fonts, often called as expert set.
Uppercase Numerals: also called lining figures. Same height as uppercase letters and are all set to the same kerning width.
Lowercase Numerals: known as old style figures or text figures. They are set to x-height with ascenders and descenders.

Figure 1.4.4 Uppercase Numerals and Lowercase Numerals

Italics: most fonts today are produced with matching italic. Italic refers back to 15th century Italian cursive handwriting.
Small caps are usually in Roman. Oblique is typically based on the roman form of the typeface.

Figure 1.4.5 Italic (left) vs Roman (right)

Punctuation, miscellaneous characters: all fonts include punctuation marks, but miscellaneous characters can change from typeface to typeface.

Figure 1.4.6 Punctuation, miscellaneous characters

Ornaments: used as flourishes invitations or certificates.

Figure 1.4.7 Ornaments

3.Describing typefaces

Roman: called Roman because the uppercase forms are derived from inscription of Roman monuments. (Book: lighter stroke in Roman)
Italic: named for 15th century Italian handwriting
Oblique: based on roman form pf typeface
Boldface: thicker stroke than a roman form. Can be called as 'semibold', 'medium', 'black', 'extra bold' or super.
Light: a lighter stroke than the roman form. Even lighter strokes are called 'thin'.
Condense: extremely condense styles are often called compressed.
Extended: an extended version of a roman font.

Figure 1.4.8 Describing typefaces

4. Comparing typefaces

Every typeface creates a different impression, that is why it is important to understand them well and select the right typeface to deliver messages in every particular work.

You can't be a good typographer, if you aren't a good reader.

10 typefaces to use for this semester exercise:

Figure 1.4.9 10 typefaces

Typo Basic link: https://youtu.be/KlMWFpJ-VQg?si=Sd77QozG_rogBPpi

Week 5:

Typo_5_Understanding

1. Understanding letterforms

The uppercase letter forms below suggest symmetry, but in fact it is not symmetrical.
Both Baskerville and Univers create letterforms that internally harmonious and individually expressive.

Baskerville stroke form: easy to see the two different stroke weights

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

Figure 1.5.1

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 two.

Figure 1.5.2

Left: Helvetica 'a' Right: Univers 'a'

2. Maintaining x-height

X-height: describe the size of the lowercase letterform
Median line: the line above the baseline
All letterforms that are curved (such as 's') generally will exceed the median line/ must rise above the median (or sink below the baseline) in order to be the same size as the vertical and horizontal strokes they adjoin.

Figure 1.5.3 lowercase maintaining x-height

Figure 1.5.4 Median line and baseline

3. Form/Counterform

The space describes, and often contained, by the strokes of the form. When letters are joined to forms words, the counterform includes the spaces between them. Counterform is important for readability, as it helps to recognize the shape of letters.

Figure 1.5.5

white spaces: Form black spaces: Counterform

Before you begin designing a typeface, it's good to analyze certain letters. Going closer into the letterforms and looking at them in greater detail to understand how this form is constructed. It also gives you a glimpse into the process of letter-making.

4. Contrast

When and why do you need to know about contrast?

When dealing with different sets of information, to differentiate that information, you are required to contrast. Contrast is required to differentiate information in text.

Figure 1.5.6 Examples of contrast in typography

Typo Understanding link: https://youtu.be/k-Vbx50e-eA?si=U2J3Qxx0YqrX238w

Typo_6_Screen&Print

1. Different Medium

Typography in screen is quite limited since we have to view it through the screen.

Figure1.6.1 Screen Design for Website

Good typography and readability were the result of skilled typesetters and designers.
Today, typography not only exists on paper but also on a multitude of screens.

2. Print Type vs Screen Type

Type for Print

Print type came before screen type.
Designer's job is to ensure that the text is smooth, flowing, and pleasant to read.
Good typefaces for print: Caslon, Garamond, Baskerville (due to their characteristics which are elegant and intellectual but also highly readable when set at small font size.)

FIgure1.6.2 Example of Print Type

Type for Screen

Often modified to enhance readability and performance onscreen in a variety of digital environments.
Example 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.
Another important adjustment: more open spacing. (especially for typefaces intended for smaller sizes)
All adjustments improve character recognition and overall readability in non-print environment. (Web, e-books, e-readers, and mobile devices)

Hyperactive link/ hyperlink

Hyperlink: a word, phrase, or image that you can click on to jump to a new document or new section within the current document.
Can be found in web pages, allowing users to click their way from one page to another.
Normally blue and underlined by default.
When moving the cursor over a hyperlink, the arrow should change to a small hand pointing at the link.

Font Size for screen

16-pixel text on a screen is about the same size as text printed in a book/magazine, this is accounting for reading distance.
10 points on screen because we read books pretty close. (often only a few inches away)

Figure 1.6.3 Screen Font (left) vs Print Font (right)

System Fonts for Screen/Web Safe Fonts

Web safe fonts: appear across all operating systems. They're the small collection of fonts that overlap from Windows to Mac to Google.
Web safe fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond.

Pixel Differential Between Devices

PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too, because they have different sized pixels.
As an example, 100 pixels on a laptop is very different from 100 pixels on a big 60" HDTV.

Figure 1.6.4 Pixel Differential Between Devices

3. Static vs Motion

Static typography: has minimal characteristics in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.

Figure 1.6.5 Static typography

Motion typography: 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.
Example: The movie se7en (1995) from David Fincher was edited using motion typography.

The movie se7en (1995): Movie se7en (motion typography)

Typo Screen&Print link: https://youtu.be/h8lTwvffrZw?si=vwJS79kqUXIflors

INSTRUCTIONS

Module-Briefs_BDCM_2025 (1).pdf

PROCESS WORK

Task 1: Exercises (Type Expression)

For the first week exercises, we were asked to choose four words from the following of six (6) words to express typographically:

PULL
DRIP
SCRATCH
KICK
STEP
FLOAT

1. Research

Before starting this exercise, I conducted some research on words I chose as references. I searched for them on Google and Pinterest. To broaden my ideas, I also looked up synonyms and related concepts, such as movement, for additional inspiration.

Below are some of the findings from my research:

Figure 2.1 My research

2. Sketches

We were asked to sketch out ideas for our chosen word and digitized the artwork in Adobe Illustrator. A few dots and lines may be used to help in type expressions, but it is not recommended to use too many graphical elements. We should only use the 10 type families provided to express the meaning of words. The words I chose were 'pull,' 'kick,' 'step,' and 'float,' but I also sketched an extra word: 'drip.'

My Sketches:

Figure 2.2 Type Expression Sketches

3. Ideation

I noticed that some words hold multiple interpretations, so I looked into their definitions, synonyms and made brief summaries, hoping it would lead to more creative ideas.

PULL

For the word 'PULL,' I envisioned the letter 'P' as a hand grasping and pulling the remaining letters 'U,' 'L,' and 'L.' Another idea depicted 'PU' and 'UL' being tugged from opposite directions, echoing the dynamics of tug-of-war. I also explored the motion of pulling a door, with 'P' symbolizing the hand and 'U' as the door being drawn toward it.

KICK

In the word 'KICK,' I visualized the letter 'K' as a leg in motion while the remaining letters form the object being kicked, like a ball. I also saw 'I' and 'K' as parts of a human figure performing a kick. While I didn't develop many different concepts, I experimented with various ways to represent the motion, each sketch showing a different take on the same action.

STEP

For the word 'STEP,' the first image that came to mind was a footprint. However, I found it challenging to illustrate a footprint using the letters of the word itself. So, I shifted my focus to the human leg — something that literally performs the action of stepping. I imagined the letter 'S' as a leg stepping onto the remaining letters 'T,' 'E,' and 'P,' which helped visually reinforce the meaning of the word. 'STEP' can also refer to a staircase, so I experimented with arranging the letters to resemble stair steps. Another idea involved using the letters 'S' and 'P' to represent human legs in motion, suggesting the act of walking — which is also a form of stepping. Through these different approaches, I aimed to express the word 'STEP' in both a literal and abstract visual form.

FLOAT

When exploring the word 'FLOAT,' I found it quite natural to think of objects resting on the surface of water. One idea I had was to use the letter 'F' to represent the water's surface, with the remaining letters 'L,' 'O,' 'A,' and 'T' appearing to float above it. Another concept involved the letter 'O' as a lifebuoy floating on water, with the word 'FLAT' positioned on top of it — visually reinforcing the idea of floating. I also experimented with a reverse perspective, imagining the letter 'O' as the only one floating above the others, acting as a lifebuoy itself. Finally, I visualized the letters slowly rising into the sky to capture a lighter, more airy interpretation of the word. In this version, letters like 'O' and 'A' appear to gently float upward, symbolizing the motion of drifting or flying toward the sky.

DRIP

'DRIP' wasn’t my first choice, but I still came up with several ideas and decided to explore them through illustration. My first concept was inspired by donut glaze dripping. I imagined the letter 'D' as a donut, with the letters 'RIP' representing the glaze or sauce dripping around it. Another idea was based on rain. Instead of simply illustrating raindrops, I took a different approach — using the letter 'D' as an umbrella and the letters 'RIP' as the drops of water falling from it. Although it wasn’t my strongest visual, I wanted to try something unique and different from the usual interpretations. Lastly, I illustrated the word 'DRIP' itself melting or dripping like a droplet of water, which I felt captured the meaning in a simple yet effective way, and I think it turned out well visually!

4. Digitization of Sketches

After some changes and advice from Mr. Max, I begin digitized my artwork in Illustrator. During the process, I played with different typefaces to reflect the mood of each word. Initially, I overlooked the requirement to use only the 10 assigned typefaces, so I had to redo the words 'KICK' and 'FLOAT' using the correct fonts. Following future feedback from Mr. Max, I reworked some parts from my first outcome, which he suggested to be better. I encountered some difficulties with Illustrator tools along the way, but after seeking help from Mr. Max, I was able to overcome them. In the end, I completed and digitized my type expressions successfully.

Final Digital Type Expression

Figure 2.3 Final Type Expression (JPEG)

Figure 2.4 Final Type Expression (PDF)

5. Type Animation

In week 3, after Mr. Max gave us feedback on our digitalized type expressions, we started animating one of the words we picked. Initially, the word I wanted to animate was either 'STEP' or 'KICK.' Mr. Max suggested I choose the word 'KICK' as it was easier. In the end, I settled on the word 'STEP,' which had been my original choice. Then, I proceed to animate it. The more frames the animation has, the smoother it becomes.

Figure 2.5 Progress (Adobe Illustrator)

My plan was to represent the movement of walking, where the letters 'S' and 'P' act like legs stepping forward on the floor. So, I came out with the first animated 'STEP' (Fig 2.5).

Figure 2.6 First Attempt of animated 'STEP'

In my first attempt, I showed the animation to Mr. Max for feedback. He said the idea was great but expressed concern that the animation might make the letters 'T' and 'E' less readable, as the 'S' and 'P,' which act as legs, could end up covering them. He reminded me that, above all, the word must remain readable.

Based on the feedback, I revised my animation to improve its readability. I adjusted the positions of letters 'T' and 'E,' raising them slightly higher than in the original version so they wouldn't be obscured by the animated 'S' and 'P.' I also repositioned the letter 'P' slightly farther from the other three letters, creating more space between them to enhance both readability and overall visual balance.

Figure 2.7 Second Attempt of animated 'STEP'

Mr. Max reviewed my second attempt at the animation, and he found it much improved after the corrections and approved it!

Final Animated Type Expression

Figure 2.8 Final GIF animation

Task 1: Exercise 2 (Text Formatting)

Before creating the final layout that involves text formatting, such as choosing typefaces, setting type size, leading, and line length. We first need to understand and practice kerning and tracking.

1. Kerning and tracking exercise

Mr. Max guided us through the basics of InDesign, where we practiced kerning and tracking through an exercise. We have to use 10 typefaces provided to work with kerning and tracking our name. We are allowed to use different fonts and type sizes in each typeface.

Figure 2.9 Names with kerning and tracking practice (JPEG)

2. Layout exercise

After completing the kerning and tracking exercise, we were assigned to think of 8 different layout designs for the text given in Microsoft Teams. Following Mr. Max's instructions, we worked together in class to complete the first layout. Before starting this layout exercise, Mr. Max reminded us of some important tips on layout to avoid common mistakes.

Notes:

Avoid RIVERS (spacing not too big)
Avoid RAGS (do not create uncomfortable layout, make sure is proper and nice)
Avoid WIDOWS (adjust leading and tracking)
Avoid ORPHANS (they disrupt balance and impact readability)
CORRECTED TEXT (make sure is clean and smooth)

I created 8 layouts for this exercise (Fig 2.9) and received feedback from Mr. Max. He selected one final layout and pointed out several issues that I need to fix before submitting the final version.

Figure 2.10 Eight (8) layout designs

Final Layout (before solving issues):

Mr. Max pointed out that I hadn't fixed the rags and that my text should be left-aligned and justified. He also mentioned that my headline should be larger, so it aligns with the right side of the text and image.

Figure 2.11 Final layout before solving issues

Final Layout (after solving issues):

Figure 2.12 Final layout after solving issues

After reviewing all the corrections and fixing the issues, Mr. Max approved my final work!

Final Text Formatting Layout:

Head

Font/s: ITC Garamond Std Ultra Narrow Italic (headline)
Type Size/s: 30pt
Leading: 32pt
Paragraph Spacing: 0pt

Body

Font/s: Bembo Std Regular
Type Size/s: 12pt
Leading: 14pt
Paragraph Spacing: 14pt
Characters per-line: 50-60 characters
Alignment: Left aligned

Page Margins:

Top/Left/Right/Bottom: 100mm
Columns: 2
Gutter: 4.233mm

Figure 2.13 Final Text Formatting Layout (JPEG)

Figure 2.14 Final Text Formatting Layout (PDF)

Figure 2.15 Final Text Formatting Layout (JPEG with Grids)

Figure 2.16 Final Text Formatting Layout (PDF with Grids)

FEEDBACK

Week 1

Specific Feedback: No specific feedback for week 1.

General Feedback: Set up an e-portfolio and brief the lecture notes. Explained the MIB for the future weeks' exercises in detail. Choose 4 words from the 6 words given and start sketching the 4 words we chose.3 sketches for each word, 12 sketches in total. Consult with tutor next week.

Week 2

Specific Feedback: Mr. Max gave me advice and some ideas on each of my sketches; all of my sketches are acceptable after I fix them.

General Feedback: We learned how to use some of the Adobe tools and shortcuts for Adobe Illustrator. Mr. Max explained to us every function of the tools in detail.

Week 3

Specific Feedback: Mr. Max gave me advice on the word 'float' and taught me some illustration skills I needed. He also suggested choosing the word 'kick' for my animation.

General Feedback: During the tutorial, Mr. Max guided us through the process of exporting our files into PNG and JPG formats. He also provided a detailed, step-by-step demonstration on transforming typography into animation and introduced us to several animation techniques.

Week 4

Specific Feedback: I showed my final animation for review after receiving feedback from Mr. Max. He approved it and commented that it looked good.

General Feedback: Mr. Max gave us a basic introduction to Adobe InDesign. He guided us through Task 1 Exercise 2, and we followed along step by step to complete it. During the session, he explained the differences between leading, kerning, and tracking. He also demonstrated the layout for the second exercise and assigned us a task to create an 8-page layout, which we need to complete by next week.

Week 5

Specific Feedback: Mr. Max gave feedback on my layout exercise. He thought that layout #2 was the best among all the drafts. He pointed out several issues in my layout, which I have since fixed. Therefore, layout #2 is my final layout for the text formatting exercise.

General Feedback: Mr. Max gave a brief introduction to task 2 to give us an idea of what’s coming next. The full tutorial for task 2 will begin in the next class. He also reminded us to complete task 1 before starting task 2.

REFLECTIONS

Experience

Over the past five weeks, I've realized that I'm still not very familiar with all the functions in both Adobe Illustrator and InDesign and sometimes struggle to use them, but I will continue to push myself to improve. Mr. Max also taught me several techniques that I didn't know in detail before, and I really appreciate his guidance and support. At the beginning, I was quite puzzled about what to do and how to create the e-portfolio. However, now I understand the process better and am becoming more comfortable with it.

Observations

I observed that I have worked in more detail in my projects. Completing our work step by step each week allowed us to receive continuous guidance and valuable feedback, which was very helpful for the learning process and for completing each task effectively. I also noticed that the mistakes I often overlooked were always spotted by Mr. Max, who would point them out and help me improve my work.

I found that the type animation and text formatting were the most challenging tasks for me. It was my first time working with type animation, and I realized that the process takes much longer than the final result suggests. For the text formatting task, I struggled to fix the ragging and make it look visually balanced. I'm also not very confident about the layout designs I created, as I feel that some of the compositions are a bit too simple and lack excitement. Because of this, I've been a little stressed, worrying that I didn't perform as well as I hoped in this exercise.

Findings

Overall, typography is about thinking outside the box while still keeping things simple and following design principles. It's not an easy task; there's a lot of unseen work that needs to be considered, such as leading, letter spacing, and font choices. Typography is not just about words; it's a form of art. Good typography requires a great deal of detail and effort.

I found that typography can be both stressful and enjoyable. It has taught me many things that I had never encountered before. Before taking this class, I didn't even know what typography, typefaces, or leading were. Through this course, I learned the importance of patience and attention to detail. I often take a long time to complete typography tasks because they require smoothness, cleanliness, and precision.

I've realized that I need to manage my time more effectively and learn to be more confident in my work. I often lack confidence in my designs, but I believe it's time for me to explore more, learn more, and trust myself. Moving forward, I will continue to improve and apply what I've learned to future tasks.