TYPOGRAPHY - TASK 1: EXERCISES

21/4/2025 - 23/05/2025 / Week 1- Week 5
ZHANG  QIYU /0384019/Bachelor of Design in Creative Media
Typography/Taylor's University
Task 1: Exercises

---

                                                                        LECTURES
Week  1: 

Typo_0_Introduction

Typography is the organization and arrangement of text and related elements such as font, font size, line spacing, spacing, color, and hierarchy, to make it visually clear and readable, while conveying specific styles, emotions or information. It is an important part in fields such as graphic design, publishing, and web design. Text is the main visual element for conveying information, and through the design and layout of text, the hierarchical structure and importance of the content can be reflected. 

Mr. Vinod  explained in his lecture the influence of fonts on layout and the differences between fonts. Fonts refer to the changes in font size and thickness, as well as what is letter spacing and tracking.

                                                            Fig. 0.1 －Georgia fonts / Typefaces

Typo_1_Development

1.Early Letterform Development：Phoenician To Roman

                     

                                                                        Fig. 1.1 Evolution from Phoenician letter

The development of written forms initially involved people making marks on wet clay with sharp sticks or carving on stones with chisels. The core was a simple combination of straight lines and arcs.

                                                                                

                                                                                                  Fig .1.2 boustrophedon style

The Greek developed a style of writing called'boustrophedon', the lines of text read alternately from right to left and left to right.

                                                                              fig.1.3 Square Capitals

Latter or the Greeks would move to a strictly left to right writing.

                                                                             fig.1.4 Rustic Capitals

Etruscan carvers working in marble painted letterforms before inscribing them. The strokes in weight from vertical to horizontal, a broadening of the stroke at start and finish.

                                                                 Fig .1.5 Early Letterform development

The evolution of early alphabets around the year 1000 BC.

2.Handwritten Characters From The 3rd To The 10th Century AD.

Fig. 1.6 Hand script from the 3rd - 10th CE

• Square Capitals：The development of written forms initially involved people making marks on wet clay with sharp sticks or carving on stones with chisels. The core was a simple combination of straight lines and arcs.

• Rustic Capitals：Compressed square capitals, which take less time to write. When writing, the pen or brush is tilted at an angle of approximately 30 degrees to the vertical line. However, it can be a bit difficult to read.

• Roman Cursive：Daily transactions were usually written in cursive script, which simplified the writing form to increase speed and marked the beginning of Roman cursive.

• Uncials：Uncials incorporated some aspects of the Roman cursive hand.The broad forms of uncials are more readable at small sizes than rustic capitals.

• Half－uncials：A further formalization of the cursive hand. half-uncials mark the formal beginning of lowercase letterforms, replete with ascenders and descenders. 2000 years after the origin of the Phoenician alphabet.

• Caloline MIniscules：Using both majuscules , miniscule, capitalization and punctuation which set the standard for calligraphy for a century.

3. Blackletter To Gutenberg's Type

                                                                  Fig.1.7 Texture Blackletter in 1400s,

In northern Europe, a condense strongly vertical letterform know as Blackletter or textura gained popularity. In the south, a rounder more open hand gained popularity. called 'rotunda'.

                                                                            Fig.1.8 Rotunda Blackletter
Gutenberg's  marshaled them all to build pages that accurately mimicked the work of the scribe's hand - Blackletter of northern Europe.

4.Text Type Classification.

Fig.1.9 Text type classification.

Week 2

Typo_3_Text_Part 1

1.Tracking: Kerning and Letterspacing

Kerning   ：The term "kerning' refers to the automatic adjustment of space between letters. It is often mistakenly referred to as 'letterspacing

Letterspacing ：Letterspacing means to add space between the letters. The addition and removal of space in a word or sentence is referred to as 'tracking'.

                                                                   Fig.2.1   Kerning and Letterspacing

                                                           Fig.2.2  Normal tracking, loose tracking and tight tracking

Uppercase letterforms are drawn to be able to stand on their own, whereas lowercase letterforms require the counterform created between letters to maintain the line of reading.

2.Formatting Text

Flush left  :  This format most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even gray value.

Justified  : Like centering, this format imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and, sometimes, between letters. The resulting openness of lines can occasionally produce rivers of white space running vertically through the text .

3.Texture

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

                                                                          Fig. 2.3 Font texture style

4. Leading And Line Length

Type size: Text type should be large enough to be read easily at arms length-imagine yourself holding a book in your lap.

Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.

Line Length: Appropriate leading for text is as much a function of the line length as it is a question of type size and leading. Shorter lines require less leading; longer lines more. A good rule of thumb is to keep line length between 55-65 characters. 

                                                                                              Fig. 2.4  Leading And Line Length

                                                                                  

5. Type Specimen Book

• A type specimen book shows samples of typefaces in various different sizes. A type specimen book (or ebook for screen) is to provide an accurate reference for type, type size, type leading, type line length etc.

• Compositional requirement: Text should create a field that can occupy a page or a screen. Think of your ideal text as having a middle gray value  , not a series of stripes .

• It is often useful to enlarge 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.

                                                                               Fig. 2.5  Times Gothic          

 

Week 3：

Typo_3_Text_Part 2

1.Indicating Paragraph

• There are several options for indicating paragraphs.  The 'pilerow' , a holdover from medieval manuscripts seldom use today.
•  A' line space' (leading) between the paragraphs. Hence if the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text.
• Typically here the indent is the same size of the line spacing or the same as the point size of your text.
• Extended paragraphs below creates unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it.

Fig. 3.1 Line space vs leading

2. Widows And Orphans

In traditional typesetting , there are two unpardonable gaffes widows and orphans. Designers must take great care to avoid the occurrence of the the above mentioned.

• A widow is a short line of type left alone at the end of a column of text.
• An orphan is a short line of type left alone at the start of new column.
• In justified text both widows and orphans are considered serious gaffes. Flush right and ragged left text is some what more forgiving towards widows, but only a bit. Orphans remain unpardonable.
• The only solution to widows is to rebreak your line endings through out your paragraph so that the last line of any paragraph is not noticeably short.
• Make sure that no column of text starts with the last line of the preceding paragraph.

                                                                               Fig. 3.2 Widows and orphans

3. Highlighting Text

• When highlighting text by placing a field of colour at the back of the text, maintaining the left reading axis (right example) of the text ensures readability is at its best.
• Sometimes it is necessary to place certain typographic elements outside the left margin of a colomn of type (extending as opposed to indenting) to maintain a strong reading axis.
• Quotation marks, like bullets, can create a clear indent, breaking the left reading axis. Compare the indented quote at the top with the extended quote at the bottom.

\

Fig.3.3  Primes and Quotation

4.Headline Within Text

There are many kinds of subdivision within text of a chapters. In the following visuals these have been labeled (A, B and C) according to the level of importance.A typographers task is to make sure these heads clearly signify to the reader the relative importance within the text and to their relationship to each other.

A head :

• Indicates a clear break between the topics within a section. 
• A heads are set larger than the text, in small caps and in bold. 
• A head extended to the left of the text.

Fig.3.4 A head

B head:

• The B head here is subordinate to A heads.
• Indicate a new supporting argument or example for the topic at hand.
• They should not interrupt the text as strongly as A heads do. 
• Shown in small caps, italic, bold serif, and bold can serif.

                                                                                                          Fig.3.5 B head

C head:

• Not common, highlights specific facets of material within B head text. They not materially interrupt the flow of reading. 
• As with B heads, these C heads are shown in small caps, italics, serif bold and can serif bold. 
• Followed by at least an em space for visual separation.

Fig.3.6  C head

5.Cross Alignment

Cross aligning headlines and captions with text type reinforces the architectural sense of the page-the structure while articulating the complimentary vertical rhythms.


Week 4：

Typo_2_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.Most often used to describe em/en spaces and em/en dashes.

• Ligature  the character formed by the combination of two or more letterforms

• 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 

                                                                                          Fig.4.1 Describing letterforms



2.The Font

• Uppercase  Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and ole ligatures.
• Lowercase  Lowercase letters include the same characters as uppercase.
• Small Capitals
• Small Capitals  Uppercase letterforms draw to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called expert set.

                                                                                        

                                                                                                Fig.4.2  Small capitals

• Uppercase Numerals Also called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width.
• Lowercase Numerals Also known as old style figures or text figures. these numerals are set to x-height with ascenders and descenders.

Fig.4.3 Uppercase numerals and lowercase numerals

• Italic Most fonts today are produced with a matching italic.  The forms in a italic refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface.

                                                                                     Fig.4.4 Italic

• Punctuation, miscellaneous characters  All fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface. It's important to be acquainted with all the characters available in a typeface before you choose the appropriate type for a particular job.
• Ornaments Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family.

3.Describing Typefaces

• Roman an uppercase form that is derived from inscriptions of Roman monuments .A slightly lighter stroke in roman is known as 'Book'
• Italic based on the fifteenth century Italian handwriting 
  Oblique  based on a roman form of a typeface
• Boldface Characterized by a thicker stroke than a roman form.Depending upon the relative stroke widths within the typeface, it can also be called "semibold", "medium', "black", 'extra bold', or super. 
• Light a lighter stroke than the roman form. Even lighter strokes are called "thin" 
• Condense   a version of the roman form, and extremely condense styles are often called 'compressed'
• Extended  an extended variation of a roman font. 

                                           

                                                                         Fig 4.5 Describing typeface


4.Comparing Typefaces

Beyond the gross differences in x-height, the forms display a wealth of variety, in line weight, relative stroke widths and in feeling. For any typographer these feelings connote specific use and expression.The Rs display a range of attitudes, some whimsical, some stately. some mechanical, others calligraphic some harmonious and some awkward.

                                                                         Fig.4.6.   Comparing Typefaces

Week 5

Typo_5_Understanding

1.Letters

The two different stroke weights of the Baskerville stroke form , the fact that each bracket connecting the serif to the stem has a unique arc.

The width of the left slope is thinner than the right stroke. Both Baskerville  and Univers  are both internally harmonious and individually expressive.

                                                                      Fig.5.1. Baskerville  and Univers

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.

                                                                         Fig.5.2.Helvetica and Univers

2.Maintaining  x-height

The x-height generally describe the size of the lowercase letterforms. However, you should keep in mind that curved strokes, such as in "S",must rise above the median  in order to appear to be the same size as the vertical and  horizontal strokes they adjoin.

                                                                          Fig.5.3..Maintaining  x-height


3.Form / Counterform

• Just as important as recognizing specific letterforms is developing a sensitivity to the counterform (or 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
• The latter is particularly and important concept when working with letterforms like lowercase 'r' that have no counters per se. How well you handle the counters when you set type determines how well words hang together-in other words, how easily we can read what's been set.     

                                                 
                                                                                                  Fig.5.4 Form and counterform

                                                                           
4.Contrast

The basic principles of Graphic Design apply directly to typography.The simple contrasts produces numerous variations: small+ organic/large+machined; small+ dark/ large light ...

                                                            

                                                                                                     Fig. 5.6 Contrast

       

---

                                                                       INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/19L_F5MFsFKaehGJywsbJxVcb4mx5qonv/preview" width="640" height="480" allow="autoplay"></iframe>

Task 1：Exercises - Type Expression

1.Digitization

We are given a set of words to create type expressions of.In response to the Instruction  update Research and Sketches. Base your idea-sketches  around the "4 Fonts" provided to you. 

• STRIKE ：This word, as its name suggests, means to strike or collide. I used the creative approach of gradually reducing the size of the other letters while emphasizing the 's', so I made the top of the 's' strike the ground (some letters) to enhance the effect.

• SLEEP：When seeing this word, everyone immediately thinks of sleeping in bed or closing their eyes. To avoid repetition, I thought of using a clock to represent it. The meaning is that it's already very late and it's time to go to bed (s, e, e, p represent different time periods while l represents the pointer).

• HUNGRY ：This word immediately brought to my mind the concept of appetite. So I focused on the letter "R", which resembles a tongue sticking out of its mouth.

• IMPALED：The meaning of this word is to be pierced or passed through by something. My imagination is of a scene where a bullet passes through each letter. Therefore, when designing, I adopted the concept of a bullet-penetrating font, and used some ink to make it look more realistic and impact force.

Final Digital Type Expression

                                                                                              Fig.6.1  Final Digital Type Expression

                                                                 Fig.6.2   Final Digital Type Expression (PDF)

2. Type  Animation

Three weeks after receiving Mr Vinod's feedback on our vocabulary expressions, we began to create an animation for a selected word.At first, I had intended to create an animation of bullets passing through letters, but later decided to change it to an animation of the word "crush". I already had the idea of the effect I wanted to achieve, so I just did it that way. After planning the storyboard and frames, I exported these frames to Photoshop for animation production.

                                                                             Fig.6.3  Animation Storyboard

My plan is for S to carry out some "strikes" on the ground. I experimented with several different effects for the animation, but found them a bit too confusing. So I chose the simplest version.

                                                                Fig.6.4 The animation production process

Final GIF Animation

                                                                              Fig. 6.5  Final GIF Animation

 Task 1：Exercises 2 - Text Formatting

For this exercise, we need  to edit in InDesign to have proper letterspacing, paragraph spacing, leading, good headline and byline as well as a good layout， only the 10 given typefaces can be used while doing text formatting.

                                                                       Fig.7.1 Names with kerning practice

I searched for relevant information online and found some layout methods that I liked as references. The first time I used this software, it was a bit difficult and I could only follow the steps in the video. During the process, I encountered many problems, such as how to set the font size and spacing appropriately, and how to make the layout of pictures and text more distinctive.

                                                                   Fig. 7.2 refer to the picture 
                                 

I designed different layouts for an article. Eventually, I came up with three different types of layouts. The first two were relatively simple, but I preferred the last one the most.

                                                                                       Fig.7.3  Layout 1

                                                                                                            Fig.7.4  Layout 2

                                                                                          Fig.7.5  Layout 3

Final Text Formatting

HEAD LINE
Font : Bembo Std
Type size : 30 pt and 20 pt
Leading : 36 pt
Paragraph Spacing : 0 pt
BODY

Font : Bembo Std
Type size : 11 pt
Paragraph Spacing : 14 pt 
Characters per line : 56
Alignment : left justified
Margines : Top/Bottom/Inside/Out (12.7mm)
Columns : 10

                                                                                   Fig. 7.6  Final Text Formatting (with grids)

                                                               Fig. 7.7  Final Text Formatting (with grids)

                                                         Fig. 7.8  Final Text Formatting (with grids)（PDF）

                                                        Fig. 7.9  Final Text Formatting (with grids)（PDF）

   

---

                                                                       FEEDBACK

Week 1

• General feedback：I created my own electronic portfolio as required and set up a blog. I understood the course objectives and the relevant requirements for layout. I selected four works from many as sketches. And I watched the course content of the first week.

Week 2

• General feedback：Do not overly distort the font, and do not use too many graphic elements. Reduce the use of graphic elements to highlight the expressiveness of the font itself.
• Specific feedback：For the word "hungry", I originally thought of a little dog biting the letter H (bone). I think this idea is quite innovative, but the other letters are too ordinary and don't have much change.

Week 3

• General feedback：The professor reviewed our homework during the class, pointed out some issues and made corrections on the spot. The professor reminded us not to make the letters too exaggerated, to ensure that the words are clear and easy to read, and to focus on the words themselves.
• Specific feedback：I have come up with a better solution for the word "impaled", one that is more creative yet simple and clear.

Week 4

• General feedback：To create a clear distinction between the picture and the background, it is important to pay attention to factors such as font size, line spacing, and paragraph spacing. If we do not carefully check these minor errors, the visual effect of the text organization will also be quite good.
• Specific feedback：There are too many blank areas. Balance the spacing between each column and try to shorten the length of the editing lines. Overall, it is mainly a problem related to the layout structure that needs to be improved for visual balance. Avoid using compressed fonts.

Week 5

• General feedback：Share your opinions on the text formatting assignment. Try to avoid adding colorful pictures. Optimize the font size and layout, and pay attention to the white space and font issues. It is recommended to refer to the electronic files of previous outstanding graduates.
• Specific feedback：The layout is well-organized, with appropriate line spacing and alignment. The font size matches the line spacing. There are no broken or isolated characters.

---

                                                                           REFLECTIONS

Experience

Through this practice, I felt that I have learned a lot about the basic knowledge of fonts. Each of these exercises has its own teaching video, which shows us the specific steps needed to complete the task. I am relatively weak in font design and need to come up with many creative ideas. After looking at many excellent students' works and videos, I gradually improved my problems. To learn this course, Adobe Illustrator software is needed. This is the first time I have used this software, and I was not very clear about many things. However, after watching the video explanations and searching for tutorials online, I adapted to it after a period of time. In addition, I also mastered the basic knowledge of typesetting. These exercises are an effective teaching method, which can teach me how to express text and how to arrange and format text.

Observations

I have come to understand the significance of every detail in the overall design. During the design process, even a seemingly insignificant change can have a profound impact on the entire layout. This impact is particularly crucial as it affects the visual effect. Creating artistic fonts is more challenging than painting. Different tools yield different results, and it takes some time to fully understand and master these functions. Many design elements are closely related to typesetting, such as the various shapes or images presented by letters, as well as elements like movement, proportion, contrast, and tone. Attention to detail must be heightened. In my future studies, I will pay more attention to refining and deliberating on every detail, striving to achieve perfection in each one.

Findings

These few weeks have made me realize the significant role of layout. Layout design organically combines text, images and decorative elements to present a sense of beauty on the page. Good layout design features reasonable fonts, arrangement and line spacing, making the text easy to read and comfortable, and enhancing visual appeal. Unique layout styles and color schemes can also increase the visual attractiveness of the page. This is something I need to learn more about in the future.

---

                                                             FURTHER READING

                                                                          Fig. 8.1 The Vignelli Canon 

After reading several chapters of the book 《The Vignelli Canon》, I not only felt that it was a design guide, but also sensed a profound reflection by a master on the essence of design. This book lacks ornate language, yet it reveals the core principles of design in a concise and rational way, allowing us to re-examine what truly constitutes good design.

• 1. The essence of design is to solve problems, not to decorate.

Vignelli repeatedly emphasized that the primary task of design is to solve problems, not to pursue superficial beauty. He criticized those designs that are styled for the sake of style, believing that true elegance comes from clear logic and functionality. This reminds me of many designs nowadays that overly pursue "coolness" but lack practicality. They may attract attention, but often sacrifice the effective transmission of information.

• 2. The power of simplicity

"Less is more" is the core concept throughout the book. Vignelli's rigorous application of grid systems, proportions, and layout proves that simplicity does not mean simplicity, but rather precise expression after careful consideration. His works remain classic for decades precisely because they transcend fleeting trends and return to the most essential visual language.

• 3. The "eternity" of design

Vignelli pursued eternal design, not styles that cater to fleeting trends. This is particularly precious in today's rapidly changing design trends. He reminds us that true design should withstand the test of time, rather than being eliminated after a few years.

• 4. Insights in practice

As a practical manual, the specific suggestions in the book regarding font selection, grid application, and color combination are highly operational. For example, he advocated limiting the number of fonts ( "It's enough to use four or five fonts for a lifetime"), and explained in detail how to enhance readability through hierarchical structure. These methods are not only applicable to graphic design but also have guiding significance for brand design and other fields.