Typography - Task 1: Exercises

21.4.2025 - 26.5.2025（Week 1 - Week 5)
Lee Xiang Ling / 0384095
Typography / Bachelor of Design (Honours) in Creative Media / Taylors University
Task 1 / Exercises

LIST / JUMPLINK

LECTURES

Week 01

Typo_0_Introduction

Through this lecture, we have come to realize the importance of Typography. Typography is a fundamental element of any design disciplines. It trains our attention to detail and composition skill. Typography is widely applied in web design, app design, logo, book and posters. It is playing a key role in enhancing user experience and communication effectiveness. After going through the development from manual methods to digital processes, the popularity of Typography has increased but often reducing quality of it.

In this lecture, Mr. Vinod explained the impact of fonts on typography and the difference between fonts and typefaces. Fonts refer to the variations in size and weight of a typeface, while typefaces refer to a family of fonts that are similar in style but have different weights or styles.

Fig. 0.1 - Example of Georgia fonts & Typefaces_JPG, Week 01 (22/4/2025)

Fig. 0.2 - Example of Type Family_JPG, Week 01 (22/4/2025)

Typo_0_Eportfolio Briefing
This lecture enabled us to understand the definition and tools of E-portfolio, and teach us how to set up our E-portfolio in Blogger. Besides, the E-portfolio should be structured into five chapters: Lectures, Instructions, Feedback, Reflections, and Further Reading with each chapter containing summaries, task records and reflections.

Typo_1_Development

This lecture is talking about the historical background of Typography. The evolution of early letterforms was influenced by changes in writing tools, and Greek innovations further advanced writing systems. Gutenberg’s invention of the modern printing press greatly accelerated the spread of knowledge, while various regions developed rich and diverse typographic traditions. Typography has continued to evolve, and differences in the visual effects and application contexts of typefaces have profoundly influenced modern design.

Early letterforms developed through practical needs, with people initially scratching wet clay or carving stone using simple tools. It mainly composed of straight lines and curves.

Fig. 1.1

(Right: 4th century B.C.E. - Phoenicians votive stele Carthage, Tunisia.)

(Left: Evolution from Phoenician letter. )_JPG, Week 01 (22/4/2025)

The Greeks introduced ‘boustrophedon’, alternating reading directions, which changed letterform orientation.

Fig. 1.2 - The Greek writing style: Boustrophedon_JPG, Week 01 (22/4/2025)

Etruscan and Roman carvers painted letters before carving, with stroke weight changes and broadening influencing the final letterforms.

Fig. 1.3 - The evolution of the letter “A” from the 1000 B.C.E to 100 B.C.E_JPG, Week 01 (22/4/2025)

Hand script from 3ʳᵈ - 10ᵗʰ century C.E.

Fig. 1.4 - Hand Script_JPG, Week 01 (22/4/2025)

After Charlemagne’s empire fell, regional variations of Alcuin’s script emerged: Blackletter in the north and Rotunda in the south, with Italy’s humanistic script based on Alcuin’s minuscule.

Gutenberg used his skills in engineering, metalsmithing, and chemistry to create pages mimicking northern Europe’s Blackletter, requiring a unique brass matrix for each letterform.

Fig. 1.5 - Europe’s Blackletter_JPG, Week 01 (22/4/2025)

Text type classification (Dates of origin approximated to the nearest quarter century):

Fig. 1.6 - Text type classification_JPG, Week 01 (22/4/2025)

Week 02

Typo_3_Text Part 1

In this lecture, Mr. Vinod conveyed to us concepts regarding text formatting, kerning, letter spacing, and overall tracking.

Fig. 2.1 - Example of Kerning_JPG, Week 02 (30/4/2025)

Kerning and letter spacing are different concepts. Kerning refers to the automatic adjustment of space between specific letter pairs, usually to improve the visual appearance of letter combinations. Letter spacing, on the other hand, refers to uniformly increasing or decreasing the space between letters, often used to enhance text readability.

Fig. 2.2 - Example of Kerning in AI_JPG, Week 02 (30/4/2025)

The text below looks more visually appealing compared to the one above, so sometimes giving letters enough space can make the typography look better.

Tracking refers to the process of adjusting both kerning and letter spacing across a word or sentence as a whole. Uppercase letterforms are drawm to be able to atand on their own, whereas lowercase letterforms require the counterform created between letters to maintain the line of reading.

Fig. 2.3 - Types of Tracking_JPG, Week 02 (30/4/2025)

The appearance of the typeface, letter spacing, kerning, line spacing, and other factors all influence the reader’s reading experience. Therefore, good design should aim to convey information clearly.

Common Text Alignment: Left, Center, Right, and Justified

Left alignment is the most common and is especially suitable for long passages of text, as it supports natural reading flow.
Center alignment is generally harder to read and is best reserved for short pieces of text, such as titles or decorative elements.
Right alignment is less commonly used but can be effective for elements like captions or aligning text with images.
Justified (end-point) alignment aligns both the left and right edges of the text block, giving a clean and orderly appearance, often used in books and newspapers.

Choosing a Font: Applicability and Readability
When selecting a font, consider both its applicability to the context and its readability. Different fonts have unique characteristics that influence how appropriate they are for various scenarios. A well-chosen font enhances communication and supports the content's purpose.

Meanwhile, Mr. Vinod reminds us that uppercase letters should not be used in script fonts for formal texts, as they can create an unpleasant visual effect.

Fig. 2.4 - Two styles of the same wedding invitation_JPG, Week 02 (30/4/2025)

The wedding invitation on the left side of the image is a typical example of this mistake.

Mr. Vinod also discussed the “gray value” of text fonts. The gray value of text should be kept within a moderate range to ensure good readability. In addition, he explained the influence of x-height on legibility: fonts with a higher x-height are generally easier to read, especially at smaller sizes—an important factor when dealing with text that requires quick comprehension.

Fig. 2.5 - The "X-Height"_JPG, Week 02 (30/4/2025)

The three key elements that make text more readable are:

Type Size: Text should be large enough to be read comfortably at arm’s length—imagine holding a book in your lap.
Leading (Line Spacing): If text is set too tightly, it encourages vertical eye movement, making it easy for readers to lose their place. Conversely, overly loose line spacing creates distracting striped patterns that can pull attention away from the content.
Line Length: Appropriate leading is not only a matter of type size but also closely tied to line length. Shorter lines require less leading; longer lines require more. A good rule of thumb is to keep line length between 55–65 characters per line. Extremely long or short lines can impair readability and hinder smooth reading.

Fig. 2.6 - Sample Type Specimen Sheet_JPG, Week 02 (30/4/2025)

A type specimen book is an essential tool that showcases how various typefaces appear at different sizes. It presents printed samples of fonts in a range of sizes, allowing designers to make informed decisions based on actual visual impressions. Without printed pages showing type in multiple sizes, it's impossible to make a truly reasonable type selection.

For screen-based projects, you can only determine the suitability of a typeface once it is displayed in its final digital context. Since screen and print render type differently, evaluating type choices must be done in the medium where the final output will appear.

Week 3

Typo_4_Text Part 2
Before starting today's lecture, we briefly reviewed the key points from the previous lecture.

Mr. Vinod introduced us to the Pilcrow symbol (⁋), which was historically used to indicate paragraph spacing. Although it is still in use today, it is rarely seen.

Fig. 3.1 - Example of using the Pilcrow (⁋) symbol_JPG, Week 03 (9/5/2025)

When laying out an article, there are a few key points to keep in mind: paragraph spacing should be adjusted by setting a specific value rather than hitting the return key twice. Additionally, maintaining proper alignment across columns is crucial for enhancing text readability.

Mr. Vinod also explained several important considerations to keep in mind when laying out an article:

1. Line Space & Leading
In typography, line spacing and leading are often referred to as "leading." Line spacing refers to the vertical distance between the baselines of two lines of text, while leading specifically describes the vertical space between the ascenders and descenders within a line.

Fig. 3.2 - Example of Line Spacing vs Leading _JPG, Week 03 (9/5/2025)

2. Identation & Alignment
Indentation is typically set to the same size as the line spacing or the font size used. In newspaper layouts, left indentation is often employed to save space, which is why journalists tend to write shorter paragraphs. When aligning text, indentation is considered the best practice.

3. Orphan & Widow
In traditional typography, there are two common mistakes known as "widows" and "orphans." These issues frequently appear in various publications, especially when dealing with large amounts of text. It is essential to be particularly mindful of them.
If this situation occurs, you can adjust the letter spacing and word spacing to optimize the layout.

Orphan - a short line of type left alone at the start of new column.
Widow - a short line of type left alone at the end of a column of text.

Fig. 3.3 - The orphans and widows_JPG, Week 03 (9/5/2025)

4. Highlighting Text
Adding elements such as italics, bold, color changes, underlines, or borders to text can effectively highlight key information.
(When using color, it's recommended to choose bright tones like yellow to enhance visibility.)

Additionally, applying a colored background behind the text can help, but it's important to maintain a clear reading axis on the left side for optimal readability.

Fig. 3.4 - Example of Highlighting Text_JPG, Week 03 (9/5/2025)

5. Headline within Text
A basic structure primarily used to emphasize information within the text:

A-Head - the main topic, it larger than the body text, and uses lowercase letters and bold styling to enhance its visual impact.

B-Head - a subheading that introduces a new argument, commonly displayed in lowercase letters with italic, bold serif, or bold san-serif styling.

C-Head - the details or sub-sections, typically in lowercase letters with italic, bold serif, or bold san-serif styling.

A clear healine is essential for shaping the background and structure of the text, helping guide the reader through the content and enhancing overall readability.

Fig. 3.5 - Types of Headline_JPG, Week 03 (9/5/2025)

6. Cross Alignment
Cross aligning headlines and captions with text types helps strengthen the structural coherence of the page, while also establishing a complementary vertical rhythm.

Fig. 3.6 - Example of Cross Alignment_JPG, Week 03 (9/5/2025)

Week 4

Typo_2_Basic

This week’s lecture focused on the fundamental concepts and knowledge of typography. It began with an introduction to the anatomy of letterforms. Like any craft that has evolved over more than 500 years, typography employs a range of technical terms, primarily used to describe the specific parts that make up letterforms.

Describing letterforms

The Types of Letterform_PDF, Week04 (15/5/2025)

The Font

A complete font includes far more than just 26 letters—it also contains numerals, punctuation marks, and other symbols. To work effectively with type, it’s important to ensure you're using a full font and to understand how to use it properly.

A font family refers to a group of related fonts that include various styles such as regular, bold, extended, and semi-bold. So, when we talk about a complete font, we’re actually referring to the full font family.

Uppercase - Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.
Lowercase - Lowercase letters include the same characters as uppercase.

Fig. 4.1 - Uppercase & Lowercase_JPG, Week 04 (15/5/2025)

Small Capitals are uppercase letterforms that are drawn to match the x-height of a typeface. They are most commonly found in serif fonts and are often included in what’s known as an "expert set."

Most type software includes a style command that generates small caps by scaling down full-size uppercase letters. However, it's important not to confuse these artificially generated small caps with true small capitals, which are specifically designed.

Additionally, when using software-generated small caps, the stroke weight may change and become thinner, which can affect visual consistency.

Fig. 4.2 - Small Capital_JPG, Week 04 (15/5/2025)

Uppercase numerals, also known as lining figures, are numbers that align with the height of uppercase letters and have uniform width and spacing. They are especially effective in tabular data or in contexts where uppercase text is used.
Lowercase numerals, also known as old-style figures or text figures, are designed with varying heights, featuring ascenders and descenders, and align with the x-height of the typeface. They are best used in running text alongside uppercase and lowercase letters. These numerals are more commonly found in serif typefaces and are relatively rare in sans serif fonts.

Fig. 4.3 - Uppercase Numerals & Lowercase Numerals_JPG, Week 04 (15/5/2025)

Italic styles are included with most modern fonts. The term “italic” originates from 15th-century Italian cursive handwriting and is typically based on the structure of Roman typefaces.
Punctuation, miscellaneous characters - While all fonts include standard punctuation marks, miscellaneous characters—such as symbols and special marks—can vary between typefaces. It's important to familiarize yourself with all the available characters in a typeface before selecting it for a specific project

Ornaments - often used as decorative flourishes in invitations or certificates, are typically offered as a separate font within a larger typeface family. Only a few traditional or classical typefaces—such as Adobe Caslon Pro—include ornamental fonts as part of the complete typeface family.

Fig. 4.4 - Italic/Punctuation, miscellaneous characters/Ornaments_JPG, Week 04 (15/5/2025)

Describing Typefaces

Once you can recognize the parts of a letterform, you can use that knowledge to identify different typefaces. Keep in mind that some or all of these styles—Roman, Italic, Oblique—may be found within a single typeface family.

Roman: This style is named after the uppercase forms derived from Roman monument inscriptions. A slightly lighter version of Roman is often called Book.
Italic: Named after 15th-century Italian handwriting, Italic styles are based on cursive letterforms.
Oblique: Unlike Italic, Oblique styles are simply slanted versions of the Roman form without the cursive structure.
Boldface: Characterized by a thicker stroke than the Roman form. Depending on the stroke weight hierarchy within a typeface, boldface may also be labeled as semibold, medium, black, extra bold, or super. In some typefaces (notably Bodoni), the boldest version is called Poster.
Light: Refers to a lighter stroke than the Roman form. Even lighter variations are called thin.

Fig 4.5 - Example of Describing Typefaces_JPG, Week 04 (15/5/2025)

Comparing Typefaces

The 10 typefaces introduced next reflect 500 years of type design. Designers created them to achieve two goals: clear readability and modern aesthetic appeal.

These fonts have lasted for decades—even centuries—and still express how we think, read, write, and print today.

As a beginner, you should study these ten typefaces carefully. Mastering them will strengthen your design skills and help you appreciate other typefaces as you grow.

Fig 4.6 - 10 Typefaces_JPG, Week 04 (15/5/2025)

What truly matters in typefaces is not how they are similar, but how they differ — each font is a unique result of many design choices.

Beyond just differences in x-height, fonts show variety in line thickness, stroke proportions, and the overall feeling they express. For a typographer, these subtle traits suggest specific uses and emotional tones.

For example, the letter “R” can feel playful, formal, mechanical, artistic, elegant, or even awkward — each version reflects a different attitude.

Fig 4.7 - Different between 'a' and 'R' in the font_JPG, Week 04 (15/5/2025)

"You can't be a good typographyer, if you aren't a good reader." ------ Stephen Cole

INSTRUCTIONS

EXERCISES

Task 1: Exercise 1 - Type Expression

SKETCHES

In the fisrt task, we need to select words from the Facebook Group that will be used in our exercise. Then, we need to setect 4 words from the words which we selected in the Facebook Group and make the sketches. Here are my sketches:

Hungry - This word reminds me: when people are hungry, the feeling of hunger will keep echoing in their mind, so I present this in a circular way.
Sleep - This word evokes a sense of drowsiness and blurred consciousness, so I used a font that gradually becomes smaller and more flowing, making people feel like they are about to fall alseep.
Impaled - This word means to be pierced with the sharp stakes or points. My first thought was a heart pierced by thousands of arrows, so I designed it with the concept of many spikes piercing through the font.
Divide - This word sybolizes division, so I made the font with floating and add a cracked stroke to it.

Figure 1: Sketch of my Type Expression_JPEG, Week 01 (27/4/2025)

After listening to Mr. Vinod's comments and suggestions, and viewing the reference workd and other students' sketches, I gained some new inspiration and insights. I also realized my mistakes, so I made adjustments to my sketches.

Figure 2: My Type Expression_JPEG, Week 02 (3/5/2025)

Hungry - My concept still revolves around the idea of the word echoing repeatedly in the mind. However, after listening to Mr. Vinod's feedback, I removed the text shadow and changed the presentation. I used opacity adjustments and rotation to create a faint, elusive effect.
Sleep - Since the original sketch was not viable, I made major adjustments. My idea was to create a sleepy effect, so I added a hazy "Zzz..." to the design. I used curved and floating lettering to convey my idea.
Impaled - The design of my orignal sketch was good, but I used the wrong creative method. After researching some tutorials, the word I made appeared somewhat blurry, so I used overlapping word to make it clearer and better to convey my concept.I also added some dashed lines in the blackground to help communicate the message effectively.
Divide - The sketch design for this word was also not viabe, so I changed my concept. After watching some tutorial videos, I learned techniques to create a sense of conflict within the typography. I applied it to the design of this font to achieve a "split" feeling. To avoid the overall look feeling too flat, I added the shadows to enhance the dimensionality of the word.
I also experimented with some other design ideas, but they may still be underdeveloped, as I am continuting to learn and make improvements.

Figure 3: Other Type Expression_JPEG, Week 02 (3/5/2025)

FINAL SUBMISSION - TYPE EXPRESSIONS
After receiving feedback from Mr. Vinod, I realized that I enjoy using pattern elements to convey textual information. After making a few adjustments, here is my final piece:

Divide - I divided it into three parts using a cutting technique and pulled them apart to create a split effect.
Shattered - I used cutting and random floating effects to create a sense of fragmentation, conveying the underlying message it carries.

Figure 4 - My Final Text Expressions - JPEG, Week 03 (9/5/2025)

Type Expression (PDF)_Week 03 (9/5/2025)

TYPE EXPRESSION ANIMATION
After some careful consideration, I ultimately chose the word "SHATTERED" for my Type Expression Animation. My initial impression of the word was a sense of breaking apart, followed by dispersal.

Figure 1:Creation process in Adobe Illustrator_JPG, Week 03 (10/5/2025)

Since the text might become hard to read during the shattering process, I extended the duration before the word breaks apart, allowing viewers to clearly see the original form of the word.

Figure 2: Creation Process in Adobe Photoshop_JPG, Week 03 (10/5/2025)

This is the completed version of my Type Expression Animation.

Figure 3: My Type Expression Animation_gif, Week 03 (10/5/2025)

Task 1: Exercise 2 - Text Formatting

In this exercise, we begin learning how to use InDesign for layout design.

KERNING AND TRACKING

We were instructed to use the 10 fonts provided by the professor in InDesign to design our names and adjust the letter spacing and line spacing.

Figure 1 - Kerning and Tracking_JPG, Week 04 (18/5/2025)

PRACTICE - TEXT FORMATTING

Next, we learned text editing techniques in InDesign by watching a series of tutorial videos shared by Mr. Vinod. I encountered a few minor difficulties along the way, but was able to resolve them through online research.

The following outlines the specific steps I took while working on this exercise:

Figure 2 - Different Types of Layouts_JPEG, Week 04 (18/5/2025)

Finally, I experimented with various layout designs to find the most effective visual presentation.

Figure 3 - Different Types of Layouts_JPEG, Week 04 (18/5/2025)

MY FINAL TEXT FORMATTING

I revised my exercise based on the suggestions provided by Mr. Vinod.

Figure 4 & 5 - My Final Text Formatting - JPEG, Week 05 (20/5/2025)

Final Text Formating (PDF)_Week 05 (20/5/2025)

HEAD LINE

Typeface: Gill Sans Std

Font/s: Ultra Bold Condensed

Type Size/s: 23pt

Leading: 28pt

Paragraph spacing: -

BODY

Typeface: ITC Garamond Std

Font/s: Book Narrow

Type Size/s: 10pt

Leading: 14pt

Paragraph spacing: 14pt

Characters per-line: 60

Alignment: Justify with last line aligned left

Margins: 20 mm top + left + right, 70 mm bottom

Columns: 2

Gutter: 10 mm

FEEDBACKS

Week 1

General Feedback: We learn about how to create and use the Blogger to do our E-Portfolio. (Completed to set up our blogger and label.) We also join the Facebook group and choose 6 words which must select four of them for the sketches.

Week 2
General Feedback: This exercise is very challenging. What we need are multiple sketches, not a final product. The font should not be distorted and should be expressive enough. Reduce the use of graphic elements to express font. The position and rotation of fonts can be powerful tools to express the concept.
Specific Feedback: The design of "Impaled" is good, but not sure if it's used in the right way. "Sleep" and "Divide" can be present in a better way. The idea of "Hungry" is good, presented in a rectivative way, but too may shadows are used, and the font cannot be well expressed. It needs to be strengthened.

Week 3
General Feedback: Mr. Vinod pointed out several common mistakes in students’ typographic designs: distorted fonts that fail to clearly convey the intended message, improper techniques, and the use of graphic elements to express meaning instead of relying on the typography itself.
Specific Feedback: Most of the design ideas are good, but try to avoid using graphics to overshadow the words. One of the "Divide" designs has too many slicing elements, which would be more fitting for "Shattered."

Week 4
General Feedback: This task was very engaging and offered a great deal of creative freedom, allowing us to fully express our ideas. Although there were still some technical issues and limitations in expressiveness, everyone is making progress and improving.
Specific Feedback: The overall result is solid, but the final Type Expression title size should be adjusted to 7 or 8 pt to better meet typographic standards. The Type Expression Animation looks good overall.

Week 5
General Feedback: Comment on the Text Formatting assignment, try not to add color images, improve the font size and layout, pay attention to white space, font issues, etc. Discuss the deadline for Task 1- Eportfolio. Refer to the Eportfolios of outstanding seniors in the past and some homework notes.
Specific Feedback: The overall layout is well-structured, but the images and text could be shifted downward slightly to reduce excessive white space at the bottom and improve visual balance. It’s important to note that "Condensed" fonts should be avoided, as they are not suitable for reading large blocks of text.

REFLECTIONS

Experience

Before taking this course, I had used Adobe Illustrator before, but only for basic drawing tasks. Since it had been a long time, I had forgotten most of what I learned. This was my First time using the software to create typographic art. I am a little bit weak in font design and expression skills, but after watching Mr. Vinod's tutorial videos and listening to his explanation, I gained a new understanding of this subject. In addition, in the text formatting exercise, how to choose the right font and adjust the layout, how to make the overall more impressive, it is a very challenging task. I really like this kind of exercise with a high degree of freedom, as it gives me a reason to constantly try out my new ideas. Although I made many mistake in the process, I believe mistakes are not meaningless. Every failed attempt brings me one step closer to getting it right. I will continue to work hard to avoid making mistakes again.

Observation

In Task 1, I observed that typography is an indispensable part of overall design. Fonts are often easier to convey information than pictures. In the past, I relied on my instincts, aesthetic sense, and understanding when it came to layout, and I preferred using images over text to express ideas. However, after taking this course, my perspective has changed. I now understand that both imagery and text are essential elements in art and design. After observing other students' sketches and final works, I also became aware of many of my own shortcomings.In the next assignment, I will try to pay attention to my shortcomings and work to improve them. In addition, I found that by adjusting the font, line spacing and etc., it can change the overall visibility, visual center, readability and etc. of the article.

Findings

During the learning process, I realized that I struggled to accurately convey the meaning of the word and my own ideas. In addition, using Adobe Illustrator to create artistic fonts is much more difficult than drawing. Different tools and commands can produce very different effects, and some functions seem similar but result in completely different outcomes. It takes some time to fully understand and master these features. Besides, I also learned that not all fonts are suitable for articles. Different fonts have different properties: some fonts are suitable for titles, while others are suitable for content text.

Search This Blog

XiangLingLee (0384095)