Typography - Task 1: Exercises

 Typography - Task 1: Exercises

21/4/2025-30/5/2025（week1-week6）

Yuan Xiaoyue ,0367988

Typography

Task I: Type Expression & Text Formatting

Table of Content:

I. Lecture

2.⁠ ⁠Instructions

3.⁠ ⁠Process Work

4.⁠ ⁠Feedback

S. Reflection

6.⁠ ⁠Further Reading

1. Lecture：

week1：

Typo _0_Introduction：

Listening to Mr. Vinod’s explanation, I have a deeper understanding of the importance of typography in design research. As a basic skill, good typography not only enhances the visual appeal and reading comfort of the text, but also directly affects the effective transmission of information. In addition to introducing the basic principles of typography, Mr. Vinod also briefly talked about the relevant historical background, such as the development of the alphabet.

It is particularly noteworthy that the explanation clearly distinguishes between font and typeface. Font refers to the specific design style of each individual character, while typeface refers to a group of font families with common design features. Understanding this is crucial to accurately use the language of fonts to express emotions and intentions.

Typo _0_Eportfolio Briefing：

After watching the Typography E-Portfolio example, I have a more intuitive understanding of how to organize my learning process in a standardized and clear manner. The work shows good information organization and clear content structure, covering the process of each exercise task (Brief, Research, Process, Final Outcome) and personal reflections (Reflections).

Through this viewing, I realized that an excellent Typography E-Portfolio not only shows the results, but more importantly, it clearly records the design process and thinking.

Typo_1_Development：

In this lecture, Mr. Vinod led us to explore the development of typography over the past 500 years and emphasized its important position in design and culture. He especially called on us, as design students, to actively explore and record the contributions of local designers in the field of typography and design, rather than just imitating Western designers.

Before the invention of printing, people used pointed sticks to carve on clay or chisels to carve text on stone. The limitations of materials and tools directly affected the shape of letters, making the early letter forms very simple.

In terms of early writing methods, the Phoenicians used a right-to-left writing method, while the Greeks used a writing method called "boustrophedon". The text of this period had no spaces and punctuation, making it extremely challenging to read.

Slowly, the stroke style also changed: the weight of the stroke gradually shifted from vertical to horizontal. This change is particularly evident in Etruscan marble carvings.

Between the 3rd and 10th centuries, different styles of handwritten fonts also appeared, such as lower case roman cursive and Uncials capital letters.

Between the 3rd and 10th centuries, different styles of handwritten fonts also appeared, such as lower case roman cursive and Uncials capital letters.

week2:

Typo_3_Text_Part 1：

Kerning refers to the automatic adjustment of the distance between letters, but not the distance between letters. Letter spacing refers to increasing the space between letters, while kerning focuses on the balance and beauty of the distribution of characters in the entire word.

When dealing with long texts, it is not advisable to adjust the spacing frequently. It is usually recommended to adjust it only in text that needs visual emphasis, such as titles.

When typesetting text, it is recommended to use Adobe InDesign or Illustrator. InDesign is a more ideal choice, especially when faced with a large amount of text content that needs to be formatted.

The following are common operations for text formatting using Adobe InDesign.

The font style, letter spacing, line spacing, and other typographic elements can significantly affect the reader's reading experience. Good design should be based on the core goal of conveying information clearly and effectively.

Common text alignments include left, center, right, and justified.

Left-aligned is the most common format, especially for long paragraphs of text. This alignment mimics the natural rhythm of handwriting, with each line starting in the same place and ending naturally on the right, with consistent spacing between words. Although the right edge is irregular, maintaining its smooth transition is essential for the overall aesthetic.

Centered alignment emphasizes symmetry, giving the beginning and end of the line the same visual weight, making the text look more graphic. However, because centering affects reading fluency, it is usually only suitable for short texts.

Right-aligned text emphasizes the end of the line, and is often used for titles or short sentences that need to be aligned with images or sidebars. When using it, make sure the line spacing remains smooth to avoid visual breaks.

Justified text automatically adjusts the spacing between words or letters to make the text block appear neat and symmetrical rectangular.

When choosing a font, focus on its functionality and readability. Different fonts have different visual characteristics, which determine how they work in specific situations.

Different fonts are good for conveying different messages. For example, fonts with larger x-heights or thicker strokes appear "heavier" overall, while fonts with smaller x-heights or thinner strokes appear "lighter."

The purpose of choosing a body text font is to provide a comfortable and continuous reading experience. At the same time, the space occupied by a paragraph of text on the page should be comparable to the size of a photo to achieve visual balance.

The text size should be large enough to be easily read at handheld distance. Too little line spacing will cause frequent vertical movement of the eyes when reading, which can easily make people lose their reading position. Shorter lines need smaller line spacing, while longer lines need more line spacing.

In particular, avoid using uppercase letters in handwritten-style fonts in formal texts, as this will create a bad visual experience. The wedding invitation on the left in the picture made this design mistake.

Font sample books provide clear and intuitive visual references for font styles, font sizes, line spacing, etc., helping designers make reasonable typographic choices.

Appropriate line spacing is essential to improve the readability of text. Generally, enough space should be left to ensure a smooth and comfortable reading process.

For example, refer to the examples in the font sample book.

week3:

Typo_4_Text Part 2:

Mr. Vinod explained the relationship between line spacing and paragraph spacing, and pointed out that paragraph marks are a traditional and effective way to clearly indicate the spacing between paragraphs. He emphasized that ideal paragraph spacing should be equal to line spacing, and line spacing should generally be 2 to 3 points larger than the font size to ensure that the text is visually aligned. He then demonstrated the practical application of this typographic principle using InDesign software.

A key technique for paragraph formatting is to avoid creating paragraph spacing by pressing the Enter key twice in a row. Instead, set a clear value for paragraph spacing to ensure that the text maintains good horizontal alignment when typeset, thereby improving overall readability.

Mr. Vinod then further explained the core concepts in typesetting, especially the difference between "leading" and "line height":

1. Leading and line height:

Leading refers to the vertical distance between the baselines of two lines of text; while line height includes the ascenders and descenders of the characters, which is the space occupied by the entire character frame.

2. Indents and alignment:

Indents and alignment are used to clearly mark the beginning of a paragraph or chapter, and also help reduce clutter on the left and right sides of the page. Ideally, the indent value should match the size of the font used or the line spacing. In some layout scenarios (such as newspaper layout), left indentation can save space, so journalists often write short paragraphs to accommodate layout needs. Nevertheless, from the perspective of layout neatness, it is generally considered better to use right indentation and ensure that the text is realigned.

3. Orphan and widowed lines:

"Orphan" and "widowed lines" are common problems in layout, which can easily affect the coherence and aesthetics of the text.

Orphan: A single line of text that appears at the top of a new column or new page, lacking a visual connection with the previous text.

Widowed: A single line of text that appears at the end of a paragraph or at the bottom of a column, making the page look incomplete.

In such cases, you can optimize the text layout by fine-tuning the letter spacing (kerning) or word spacing (tracking). However, it should be noted that this adjustment should not exceed three times to avoid disrupting the consistency of the overall layout.

4. Text emphasis techniques:

To highlight key information in text, you can use a variety of methods, such as using italics, bold, color changes, underlining, or adding border elements to the text. These methods help to draw readers' attention to specific content.

It is important to note that when using color to highlight, you should avoid choosing colors that are too bright and affect readability (such as bright yellow). Another effective way to emphasize is to add a colored background behind the text. When applying a colored background, make sure the text still maintains a clear left-aligned reading axis to help maintain good readability and visual consistency.

5. Title settings in the text:

The main function of the title is to sort out the information structure and help readers quickly grasp the content hierarchy. Common title classification is as follows:

A-level title: used to present the main theme or chapter, the font size should be larger than the main text, and use lowercase letters and bold style to enhance the visual hierarchy.

B-level title: used to introduce new arguments or paragraphs, often using lowercase letters, combined with italics, bold serif or bold sans serif fonts.

C-level title: used to supplement details or mark subsections, also mainly in lowercase letters, can use italics or bold styles, the style is consistent with the B-level title but distinguish the level.

Clearly dividing the title hierarchy not only helps to establish the text structure and context, but also effectively guides readers to read the path, improving the overall reading experience and readability.

6. Cross alignment: By cross-aligning the title with the body or caption, it not only improves the overall coherence of the page structure, but also creates a complementary vertical rhythm, thereby enhancing the visual organization and reading guidance of the layout.

week4:

Typo_2_Basic：

In this lesson, we'll start by discussing the basics of typography. Typography also uses a lot of technical terms that describe specific parts of letter forms. Therefore, it's important to be familiar with this vocabulary.

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 any typeface of the lowercase 'x'.

Stroke: All the lines that make up the basic shape of a letter.

Apex/Corner: The point where two diagonal lines meet, at the top of a letter is called an apex, and at the bottom is called a corner.

Arm: A short stroke that extends from the stem of a letter, either horizontally (e.g., E, F, L) or diagonally (e.g., K, Y).

Ascender: The part of a lowercase letter that extends upward beyond the midline, such as the strokes in b, d, h.

Barb: A semi-serif decoration at the end of a curved stroke.

Beak: A small semi-serif at the end of a horizontal arm of a letter.

Bowl: A closed or semi-closed rounded part of a letter, such as the lower half of an o or b.

Bracket: A curved transition area that connects a serif to the stem, making the transition softer and more natural.

Horizontal line: The horizontal stroke that connects two stems in a letter, such as the middle horizontal line in H.

Crossover: The space formed by the intersection of two strokes, common in letters such as V, Y.

Descender: The part of a lowercase letter that extends below the baseline, such as g, p, y.

Ear: A small decorative stroke that extends from the stem of a letter, common in g or r.

em / en: Originally the width of a capital M, em now refers to a unit of width equal to the point size of a font; en is half that.

Termination: The rounded non-serif shape at the end of a stroke, common in sans serif fonts.

Leg: A short stroke that extends from the stem, usually at the bottom or slanting downward, such as the bottom stroke of L or the diagonal strokes in K and R.

Ligature: A single character made of two or more letters, used to enhance typographic beauty or solve spacing problems between letters (e.g., fi, fl).

Ligature: A small connecting stroke that connects the upper "bowl" and lower "loop" of a lowercase g.

Loop: A closed or semi-closed circular portion formed by the descender of a lowercase g in some fonts.

Serif: A decorative right-angled or angled line added to the end of a letter stroke to enhance readability and style.

Shoulder: A curved but not closed stroke in a letter, such as the arc at the top of an n or h.

Spine: The main curved structure of the letter S, i.e. its curved center stroke.

Spur: The connecting part that extends when a curved stroke connects to a straight stroke, used to smooth the transition.

Stem: The main stroke in a letter, usually vertical or slanted, such as the vertical line of an H or K.

Accent stroke: refers to the main visual direction in a font, often represented by thin strokes in circular structure letters, such as the contrasting thin line in O.

Swash: A decorative element that extends the stroke of a letter, often used in swash or title fonts; in formal text, capital swash letters should be used with caution to avoid affecting reading.

Tail: A curved or tilted decorative stroke at the end of some letters, often used in font design to enhance the sense of movement.

End line: The way a stroke ends in a sans serif font, including flat ends, flared ends, pointed ends, accent ends, concave ends, ball ends or teardrop ends.

2. Font：

A basic font family usually includes 26 uppercase letters and 26 lowercase letters. But in fact, a complete font is much more than that, including numbers, punctuation marks, and various special characters.

Small Caps are uppercase glyphs scaled to the same x-height as lowercase letters. They are mainly found in serif fonts and are often called "specialist fonts". This glyph has a specific purpose in typography, such as abbreviations or emphasis.

In order to design typography efficiently, you should make sure you are using a complete font and understand the purpose of its individual glyphs.

A font family refers to multiple weights and style variations contained in the same font, such as regular, bold, semi-bold, extended, etc. Therefore, when we talk about "complete fonts", we actually mean the font family that covers these variations, not just a single glyph.

Uppercase numerals (also called serif numerals): 

These numerals are the same height as uppercase letters and have uniform spacing and fixed width. They are ideal for typographical situations that require neat alignment, such as tabular data or text mixed with uppercase letters.

Lowercase numerals (also called old-style numerals or text numerals): 

These numerals follow the typesetting structure of lowercase letters, with an x-height and ascenders and descenders. They work best in body copy mixed with uppercase and lowercase letters to maintain a consistent visual rhythm. Lowercase numerals are more common in serif fonts and relatively rare in sans-serif fonts.

Italic: A cursive style originally derived from 15th century Italy, it is usually based on the structure of roman script. Today, most modern fonts have a corresponding italic style for emphasis, tone of voice, or typographic style.

Punctuation and other characters: Fonts include not only letters and numbers, but also a variety of punctuation and special characters. These characters vary greatly from font to font, so when choosing a font, you should ensure that all the characters you need are included and can be displayed correctly.

Ornaments: used as flourishes in invitations and certificates.

3. Describing typefaces：

Roman: This font is named after the shape of its capital letters. It comes from the style of engraving on ancient Roman inscriptions and is the most basic form of text font in Western typesetting.

Italic: Named after the handwriting of 15th century Italy, its font is usually tilted and deformed based on the structure of Roman font, used to express emphasis or hierarchical contrast.

Bold: It has thicker strokes than Roman font. According to the thickness of the strokes, bold can be subdivided into "semi-bold", "medium bold", "black", "extra bold" or "super bold". In some fonts (such as Bodoni), the boldest version is often called "poster font".

Thin: Thinner than Roman font, usually used for lightweight design or contrasting typesetting in body text.

Condensed: A font variant that is narrowed in the horizontal direction, making the font more compact, suitable for typesetting with limited space.

Extremely Condensed: A style with a higher compression ratio, used for special design needs.

Expanded: A roman variant that is wider in the horizontal direction, often used for titles or typography that requires visual tension.

4. Comparing typefaces：

In a world of rich fonts, it’s not their similarities that are worth noting, but their differences. In addition to the obvious x-height differences, different fonts also show extremely diverse visual characteristics in stroke weight, relative stroke proportions, and overall style.

2.Instructions：

3. ⁠Process Work：

Exercise1: Type Expression:

week1:

SHAKE, WALK, MELT, STRETCH 

(1). Sketches

Before using Adobe Illustrator, we needed to sketch it out.

SHAKE：When I saw this word, I first thought of violent shaking, trembling, and tearing, so I tried to make them move in the design.

WALK：Seeing this word reminds me of people walking, road structure, shadows, and the feeling of wind, so I tried four different styles.

MELT：When I saw this word, I immediately thought of candles, flames, collapse, evaporation, and lava, so I tried to combine several of them.

STRETCH：I think this word is related to stretching, length, vines, and diffuse，movement, so I tried to combine several of them.

These are my sketches. 

week2:

SHAKE: I still wanted to design around the feeling of violent shaking, tearing and being shaken, but I could not achieve the effect I wanted. After final revisions, I designed a few.

WALK: Referring to the initial sketch design, there were many inspirations for this word, but in the end I designed several designs about walking, roads, and shoe prints.

MELT: The word was inspired by melting, candles, etc. I tried to draw it with the effect of candle melting, and other melting feelings.

STRETCH: I always wanted to give this word a feeling of stretching and extending, but I could not achieve the desired effect. After referring to the example pictures and making many revisions, I finally designed a few.

The final effect is as follows.

week3：

Animate Type Expression：

After careful consideration, I decided to use the word "walk" as the font animation. My first impression of this word is walking, with two legs swinging back and forth.

The creative process in Adobe Photoshop:

At first, when I previewed each frame, the legs were still, and there were many legs on the same layer. Later, after many studies and corrections, I finally achieved the effect I wanted.

The following animation is the final effect I made:

Task 1: Exercise 2 - Text Formatting：

week4：

1. Kerning and Tracking：

We need to use the 10 fonts provided by the professor, design our own names in InDesign, and adjust and optimize the spacing between letters and line spacing.

2.Layouts：

In this phase of the exercise, we systematically learned the relevant skills of text editing by watching a series of InDesign teaching videos. During the learning process, I encountered some minor problems, but I eventually solved these technical problems by consulting materials online.

After that, I adjusted the font style, letter spacing and page layout, added illustrations and  and performed text cross-alignment to enhance the overall layout structure and visual effect.

Here are some of the layouts I made:

Finally, I tried various layout designs and finally chose the one below with my teacher.

HEAD LINE

Typeface: Adobe Caslon Pro

Font/s: Adobe Caslon Pro Bold

Type Size/s: 25 pt

Leading: 24 pt

Paragraph spacing: 0

BODY

Typeface: Adobe Caslon Pro

Font/s: Adobe Caslon Pro Regular

Type Size/s: 12 pt

Leading: 11 pt

Paragraph spacing: 14 pt

Characters per-line: 62

Alignment: left justified

Margins: 12.7 mm top +left + right，50 mm bottom

Columns: 2

Gutter: 5 mm

4.⁠ ⁠Feedback：

Week 1：General Feedback：In the first class, we introduced the learning objectives and course introduction, taught us how to create a blog account, and did a "font expression" exercise. The words we chose were "shake", "walk", "melt" and "stretch".

Week 2: General Feedback：We received comments and suggestions from professors on our sketches and learned how to translate them into digital designs.

Week 3: General Feedback：We reviewed the assignments and found some issues to avoid, such as failure to clearly communicate the intended message, inappropriate techniques, and using graphic elements to convey meaning rather than relying on typography itself.

Week 4: General Feedback：In Exercise 2 of Task 1, we started to learn about a new typesetting software, InDesign. It is widely used in the design and typesetting of newspapers, books and other publications. Through this exercise, we learned how to create a new document according to the specified format requirements, and further understood the differences between InDesign and Illustrator in terms of text tools.

5. Reflection：

Experiences：

Before taking this course, I had no experience with software such as Adobe Illustrator. This was my first attempt at typography design using these software. Initially, I was not good at type design and visual expression, but by watching Vinod's teaching videos and listening to his explanations, I gained a new understanding of the subject. The process from sketch to digital was challenging and interesting. Although I encountered many setbacks in the process, I believe that every failure is a step towards progress. I will continue to work hard and try not to repeat mistakes.

Observations：

I found using Adobe Illustrator more challenging than hand sketching. Due to my lack of proficiency in software operation, I often have difficulty accurately translating the ideas in my mind into visual designs. In this process, I realized that the focus of the design should be on highlighting the text itself, rather than relying on too many decorative elements to express the meaning. This is an area that I need to focus on improving at present.

Findings：

Through this assignment, I realized that typography occupies an irreplaceable position in the overall design. Before I came into contact with this course, I often relied on personal experience and aesthetic preferences for typography design, but ignored a core principle: excellent design should be simple, concrete, elegant and interesting. After observing the sketches and final works of other students, I also saw my own shortcomings in conception and expression. In future assignments, I will pay more attention to these issues and constantly revise and improve my design ability.

6.⁠ ⁠Further Reading：

Among the six typographic books provided, I chose 《typographic design: FORM AND COMMUNICATION》

As a classic typographic design textbook, "Typographic Design: Form and Communication" is systematic and rigorous in terms of professionalism, and pays equal attention to theory and practice. It not only explains the basic knowledge such as glyph structure, visual semantics, layout organization, etc. in detail, but also constructs a complete font design language system through historical development, screen application, dynamic typography and other special extensions.

First, starting from the chapter "Anatomy of Typography", the book systematically disassembles the various components of the letter structure, such as the standard definition of terms such as x-height, capline, baseline, counter, terminal, etc., which is crucial to understanding the font structure. These basic components constitute the basis for subsequent design judgments and visual analysis.

Secondly, in the chapters "Legibility" and "Typographic Grid", I have a new understanding of the interaction between "readability" and "layout system". For example, the grid system is not only a typesetting tool, but also a regulator of visual rhythm and information hierarchy. By learning single-column, multi-column and modular grids, I have mastered how to maintain unity and flexibility in complex content.

The book also emphasizes the construction principles of "Typographic Syntax" and "Visual Hierarchy", which makes me realize that typesetting is not only the stacking of words, but also the logical arrangement of visual language. Techniques such as "ABA structure", "spatial layering" and "font pairing" have improved my professional judgment in handling long text content and multi-level information typesetting.

In addition, the professionalism of this book is also reflected in its adaptation analysis of different media. For example, the two chapters "Typography on Screen" and "Typography in Motion" provide application strategies in real-life scenarios such as screen reading, responsive design, and dynamic font use. These contents provide technical support and theoretical guidance for font design in the current digital media environment.

In summary, this book not only provides a systematic terminology and theoretical system, but also takes into account practical strategies and extensions in the contemporary context. It has laid a solid professional foundation for me and has become an indispensable tool book for my in-depth research on font design and visual communication.