Typography Task 1 / Exercises

28/09/2024 - 03/11/2024 / Week 1 - Week 4

An Hongzheng / 0378415

Typography / Bachelor of Design (Honours) in Creative Media / Taylors University

Task 1 : Exercises

CATALOGUE

LECTURES

Week 1 :

Typo_0_Introduction

Typography is a fundamental aspect of design, used in various fields like animation, graphic design, and new media. It involves creating letters, typefaces, and type families, and is essential in website and app design, signage, and product packaging. Typography focuses on arranging text to enhance legibility and visual appeal, making it a skill practiced by many today.

Figure 1.1.1 Examples of typography using in website design, app design, signage design, labels.

Typography is the art and techniques of arranging type to make written language legible, readable and appealing when displayed.

/It is now something everybody does./

Terminology

Font:a font refers to the individual font or weight within the typeface, l.e.: Georgia Regular, Georgia Italic and Georgia Bold.

Typeface: a typeface refers to the entire family of fonts/weights that share similar characteristics/styles, l.e.：Georgia, Arial,Times New Roman, Didot and Futura.

Figure 1.1.2 Left: examples of Georfia fonts. Right:examples of different typeface

Typo_1_Development

1. Early letterform development: Phoenician to Roman

Writing began with scratching symbols into clay or carving into stone.
For nearly 2,000 years, uppercase letterforms evolved from these tools, consisting mainly of straight lines and curves, reflecting the limitations of early materials.

Figure 1.1.3 Right: 4 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.

The Greeks altered writing direction, introducing "boustrophedon," where lines alternated between right-to-left and left-to-right. This change also affected the orientation of letterforms.
Initially, the Greeks wrote without spaces or punctuation, similar to the Phoenicians, but later adopted a strict left-to-right direction.

Figure 1.4 Greek "boustrophedon" writing style

Figure 1.1.4 Greek fragment, stone engraving. (Date unknown)

Etruscan carvers, before inscribing in marble, painted letterforms that influenced Roman writing. Their strokes featured a change in weight and broadening at the ends, impacting the carved letterforms.

Figure 1.1.5 Late 1 century B.C.E Augustan inscription in the Roman Forum, Rome.

Figure 1.1.6 Changing process from Phonecian to Roman

2. Hand script from 3rd - 10th century C.E.

Figure 1.1.7 The development of Hand Script. Week 1 (29/9/2024)

3. Text Type Development

Figure 1.1.8 Text Type Development. Week 1 (29/9/2024)

Week 2 :

Typo_3_Text_P1

InDesign

ctrl + shift + > larger

ctrl + alt + > larger faster

ctrl + ; display columns

alt + leftarrow/rightarrow reduce/increase the amount of space bettween two letters

Kerning, Letterspacing, and Tracking:
- Kerning is the automatic adjustment of space between individual letters. It is often confused with letterspacing, which involves adding space between letters.
- Tracking refers to the uniform addition or removal of space in a word or sentence. Designers often letterspace uppercase letters but avoid doing so with lowercase letters, as lowercase characters require the counterform between them to preserve readability.
Text Formatting Styles:
- Flush Left: Reflects the asymmetry of handwriting; text aligns on the left, while the right side varies in length.
- Flush Right: Emphasizes the end of a line, often used to clarify the relationship between text and images.
- Centered: Imposes symmetry, making text appear more like a shape. Line breaks should be carefully managed to avoid a jagged appearance.
- General Guidelines: The primary aim of formatting should always be clear communication. If the type draws attention to itself over the words, adjustments are needed.
Text and Typeface Selection:
- A key aspect of typography is understanding how different typefaces and their characteristics (e.g., x-height, stroke width) affect the overall texture of the text. The selection of the right typeface should enhance the message being conveyed.
Leading and Line Length:
- Leading refers to the space between lines of text. Proper leading ensures comfortable vertical eye movement while reading.
- Line Length should ideally fall between 55-65 characters. Longer or shorter lines can disrupt the flow of reading.
- Figure 1.2.1 Text Type Development. Week 2 (06/10/2024)
Type Specimen Book:
- A type specimen book provides examples of typefaces at different sizes and settings, helping designers make informed choices. Enlarging type on screen (e.g., to 400%) can reveal subtle differences in leading and alignment that are not always visible at smaller scales.

This structured overview helps emphasize how the principles of kerning, letterspacing, formatting, and text layout work together to enhance both the visual appeal and readability of text in typography.

Week 3 :

Typo_3_Text_P2

1. Text / Indicating Paragraphs

Several options are available for indicating paragraphs, such as using a pilcrow (¶), line spaces, or indentations. Line spacing ensures alignment across columns. It's important to differentiate between leading (from physical letterpress) and modern digital line spacing.

Figure 1.3.1 Text Type Development. Week 3 (09/10/2024)

2. Text / Widows and Orphans

Widows (a short line at the end of a paragraph) and orphans (a short line starting a new column) are considered serious mistakes in justified text. The key to avoiding widows and orphans is adjusting the line endings and ensuring that no paragraph starts or ends awkwardly.

3. Text / Highlighting Text

Highlighting text can be done in various ways, including adjusting font size, using bold, italics, or placing color fields behind the text. Ensuring visual cohesion, especially with figures and capital acronyms, is crucial for readability.

Figure 1.3.2 Text Type Development. Week 3 (09/10/2024)

4. Text / Headline within Text

Creating a clear hierarchy of subheads within the text is essential to guide the reader through different levels of importance. The sequence of subheads helps express the hierarchy, and while there is no single method, effective typography depends on the clarity of the structure.

5. Text / Cross Alignment

Cross alignment of headlines, captions, and text reinforces the structural sense of the page, creating vertical rhythm and architectural consistency. Aligning different text elements across lines and sections ensures a clean and organized layout.

Week 4 :

Typo_2_Base

Typography is a nuanced craft that has developed over the past 500 years, rich with technical terminology used to describe the various components of letterforms. Familiarity with this lexicon is essential for identifying and working with specific typefaces.

Components of Letterforms:

Baseline: An imaginary line that serves as the visual base for letterforms.

Median: Another imaginary line that defines the x-height, which is the height of lowercase letters, notably represented by the letter 'x.'

X-height: This refers specifically to the height of the lowercase 'x' in a typeface, impacting overall legibility and aesthetics.

Stroke: Any line that outlines the basic shape of a letterform.

Apex/Vertex: The point formed by the joining of two diagonal stems; the apex is located above the median, while the vertex is below.

Ascender: The part of a lowercase letter that extends above the median.

Descender: The portion of a lowercase letter that extends below the baseline.

Barb and Beak: These refer to the finishes of certain curved strokes and horizontal arms, respectively.

Bowl: The rounded part of a letter that forms a counter, which can be either open or closed.

Bracket: The curved transition between the series and the stem of a letter.

Cross Bar and Cross Stroke: Horizontal strokes that connect two vertical stems in letterforms.

Crotch: The interior space formed where two strokes meet.

Ear: A stroke that extends from the main body of a letterform.

Finial: A rounded non-serif terminal of a stroke.

Ligature: A character formed by the combination of two or more letterforms.

Em/en: Originally refering to the width of an uppercase ,and em is now the distance equal to the size of the typeface (an em in 48 poits, for example). An en is half the size of an em,. Most often uesd to describe em/en spaces and em/en dashes.

Link: The stroke that connects the bowl and the loop of a 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 taht extends the strke of the letterform.

Tail: The curved diagonal stroke at teh finish of certain letterforms.

Terminal: The self-contained finish of a stroke without a serif. This is something of a catch-all term. Terminals may be flat('T' above), flared, acute, ('t' above), grave, concave, convex, or rounded as a ball or a teardrop (see finial).

Understanding Fonts:

A full font of a typeface includes more than just the basic 26 letters; it also contains numerals and various punctuation marks. It is crucial for typographers to work with a complete font set and understand its various components:

Uppercase and Lowercase Letters: Both include essential characters and their respective variations.

Small Capitals: These are uppercase forms drawn to the x-height and are often found in serif fonts.

Uppercase and Lowercase Numerals: Uppercase numerals are the same height as uppercase letters, while lowercase numerals are set to x-height and often include ascenders and descenders.

Italic and Oblique Forms: Italic fonts are derived from fifteenth-century Italian handwriting, while oblique styles are based on the roman typeface.

Comparing Typefaces:

The study of typefaces over the centuries emphasizes the dual goals of typography: ensuring readability and reflecting contemporary aesthetics. A selection of ten significant typefaces showcases the evolution of design and their successful expression in modern contexts.

When comparing typefaces, it is essential to focus on the unique differences rather than similarities. Variations in x-height, line weight, and overall form contribute to the personality of each typeface, conveying different feelings and suitability for various contexts. For instance, some Rs may appear whimsical, while others seem more stately or mechanical.

Ultimately, a typographer’s emotional response to type and their choice of typefaces reflects their understanding of appropriateness in design. Many designers develop a limited palette of typefaces, sometimes relying on just one or two throughout their careers, allowing them to cultivate a distinct visual language.

INSTRUCTION

Task 1: Exercises - Type Expression

For the first week exercise, we came up with six words and were asked to choose four to sketch. Our letterforms should not be distorted, some minor exceptions can be considered, if approved. We could not use color, and good ideas should be simple yet impressive.

I have chosen the words Rush, Explode, Wind and Chop for the type expression sketches.

1.Reserch

Figure 3.1.1 Rush Reference & Research Images. Week 1 (29/9/2024)

Figure 3.1.2 Explode Reference & Research Images. Week 1 (29/9/2024)

Figure 3.1.3 Wind Reference & Research Images. Week 1 (29/9/2024)

Figure 3.1.4 Chop Reference & Research Images. Week 1 (29/9/2024)

I picked four words that I thought were most suitable for expressing the concept (rush, wind, explode, chop), and searched for some related designs on the Internet for reference.

2.Sketches

Figure 3.2.1 Wind and Chop sketches. Week 1 (29/9/2024)

Figure 3.2.2 Explode sketches. Week 1 (29/9/2024)

Figure 3.2.3 Rush sketches. Week 1 (29/9/2024)

I first sketched it out on paper using a pencil.

3.Digitise

I chose the typefaces I thought would work best for each font and started working on the designs digitally.

Figure 3.3.1 DIGITAL. Week 2 (06/10/2024)

4.Final Work

Figure 3.4.1 FINAL DIGITAL Design. Week 3 (07/10/2024)

Figure 3.4.2 FINAL DIGITAL DESIGN PDF Week 3 (07/10/2024)

After Mr. Vnoid gave his opinion, I made the final revision.

RUSH: The lines added to the font did not fully express the feeling of rush, and the layout above and below did not make much sense. So I added lines between each letter to represent the track, and made the "s" tilted to show the feeling of rush.

EXPLODE: The design itself is interesting and there are no big problems. I chose to adjust the size of each letter to express the feeling of enlarging from the inside to the outside to express "explode"

WIND: The design of wind fits the characteristics of the word, but the performance effect is not obvious. I used the letter "d" as a flagpole and twisted the letter "w" as a flag to highlight the feeling of wind blowing.

CHOP: The design of chop is relatively simple. In the new version, I enlarged the letters and the composition became better.

4. Animation for Word

Although the designs of explode and wind are the most distinctive, I finally chose wind to make the animation

Figure 3.4.1. Progress of Animation work for word - WIND Week 3 (13/10/2024)

Figure 3.4.2. Animation for word - WIND Week 3 (13/10/2024)

Use "w" to represent the flag and "d" to represent the flagpole. Utilize the sway of the flag to convey the sensation of wind blowing. 'i' is used to suggest the direction of the wind, thereby amplifying its impact on the viewer.

Figure 3.4.2. Animation for word - WIND - (version2) Week 4 (14/10/2024)

Under Mr. Vnoid's guidance, I found myself adding unnecessary decorations, which reduced the readability of the original design. In the final version, I removed the animation of the letter "I" fluttering in the wind, making the picture more concise without losing interest.

Task 1: Exercises 2 - Text Formatting

I first practiced using my own name according to the tutorial.

Figure 4.1.0. Practice - 1 Week 5 (19/10/2024)

1.Progress Work

The following is a learning process of the overall steps.

Figure 4.1.1. Progress - 1 Week 5 (19/10/2024)

Figure 4.1.2. Progress - 2 (version2) Week 5 (19/10/2024)

Figure 4.1.3. Progress - 3 Week 5 (19/10/2024)

After I had all the technical stuff down, I moved on to the formal design and created three different layouts.

Figure 4.1.4. layouts Week 5 (19/10/2024)

Figure 4.1.5. layouts - 3 Week 5 (19/10/2024)

Figure 4.1.6. layouts - 3 Week 5 (19/10/2024)

2.Final Text Formatting Work

Figure 4.2.1. Text Formatting without grid Week 5 (19/10/2024)

Figure 4.2.2. Text Formtting with grid Week 5 (19/10/2024)

Among the three different layouts I designed, I first excluded the first 4.1.4 because it was a little less common than the other two, and I thought it would cause some confusion when people read. Finally, among 4.1.5 and 4.1.6, I chose the 4.1.6 design because it uses two columns, which is more suitable for my text, font, font size, etc., and reduces orphans and widows.

Figure 4.2.3. Final Text Formtting without grid Week 5 (19/10/2024)

Figure 4.2.4. Final Text Formtting with grid Week 5 (19/10/2024)

Figure 4.2.5. Text Formtting with grid Week 5 (19/10/2024)

Figure 4.2.6. Text Formtting with grid Week 5 (19/10/2024)

After Mr. Vnoid gave his advice, I reduced the font size of the headline so that they can be in a straight line. For the river problem in the fourth paragraph, I used kerning and tracing to improve it.

HEAD LINE

Typeface: Bembo Std

Font/s: Bembo Std Bold

Type Size/s: 52 pt

Leading: 27 pt

Paragraph spacing: 0

BODY

Typeface: Bembo Std

Font/s: Bembo Std

Type Size/s: 9 pt

Leading: 11 pt

Paragraph spacing: 11 pt

Characters per-line: 54-60

Alignment: left justified

Margins: 123 mm top, 26 mm inside + outside + bottom

Columns: 2

Gutter: 10 mm

<touch here to back>

FEEDBACK

Week 1

General Feedback：I have studied the overall concept and development history of typography.

I have learned to create my personal e-portfolio. I try to create my own letter'form for certain words as exercises.

Specific Feedback：The e-portfolio is overly complex and time-consuming.

It aids students in studying on schedule, managing their learning progress, and reviewing. However, it lacks flexibility and places excessive emphasis on formality. So next time I should plan the time for making e-portfolios better and do a little every day to finish the work ahead of time. I should try to identify the key learning points. So far, I'm still somewhat confused about what the important parts of the course are.

Week 2

General Feedback：Learned how to make e-portfolio looks better.

Learned how to improve our letterform design and how to use Adobe Illusrator to create digital work.

Specific Feedback：The e-portfolio should be clear and easy to read. the lecture part could be more brief. less personalize things to keep the interface clean.

The design should include less illustration, use more change of typeface,fonts,shape,position to do work, so that the design could be simple ,clear and readable.

Week 3

General Feedback：Learned how to improve my digital design in Adobe Illustator.

Learned that everyone's preference may be vairied, however a good design should always keep its readability.

Specific Feedback：When create a expression word, we should involve less illustration, and use the tools flexibly and appropriately in software, we may achieve the same effect in many different ways. For example, for the word wind, we want to make a fan effect, we can directly use the shortcut key "T" to spell out the letter "i", or choose to use the rectangle tool and ellipse tool to form the letter "i", copy and rotate them. The advantage of this is that the control and deformation of the graphics are more flexible than the prototype letters.

Week 4

General Feedback：Learned how to design the animation fo word to better fix in the expression.

Go throught with the task2 requirement and standard. Mr.Vinod introduced the detail of the next assignment.

Specific Feedback：In the animation work, we should avoid the unnecessary decorations and focus on the key part, not every letter need to be in animation form.KEEP the readability.

REFLECTIONS

Week 1

Experience:

During the first week, I focused on sketching letterforms and understanding the essential elements of good typography design. This exercise involved learning how to create a strong visual identity through proper letterform design, ensuring the proportions, balance, and readability were consistent. Additionally, I learned how to organize and present my work in an e-portfolio, which included summaries of lectures, research for sketches, and ongoing design progress.

Observations:

Through the sketching process, I realized that attention to detail in typography is crucial, especially in terms of spacing and alignment. Comparing my work with that of others, I observed that some peers had better control over their strokes and overall composition, highlighting an area I can improve on. The process of building the e-portfolio was a useful exercise in documentation and presentation, but I noticed that my summaries could be more concise and focused.

Findings:

This week helped me better understand the foundations of typography and its role in effective communication. I learned that refining the smallest details in letterform design can greatly impact the overall aesthetic. Moving forward, I will focus on improving my sketching techniques, particularly in consistency and balance, while also working on creating a more streamlined and visually appealing e-portfolio.

Week 2

Experience:

In the second week, I focused on refining my letterform sketches from Week 1 and converting them into digital format using Adobe Illustrator. I was introduced to the vast array of tools and functions that Illustrator offers. One key realization I had was that good typography design doesn't necessarily need to be intricate—sometimes, simplicity and selecting the right typeface can be enough to create a powerful impact. I also learned several techniques for creating Type Expression Words using the software, which allowed me to explore different ways of manipulating typefaces.

Observations:

As I worked through converting my sketches into digital form, I noticed that Illustrator provides both precision and flexibility that are difficult to achieve by hand. However, it was also challenging to familiarize myself with the countless functions the software offers. The simpler designs I produced often had a more polished and professional look than the more complex ones. Observing my classmates’ work, I noticed that those who mastered the tools better were able to create designs that felt both clean and expressive.

Findings:

This week taught me that mastering digital tools like Adobe Illustrator is essential for transforming ideas into professional-quality designs. The experience also reinforced the importance of simplicity in design—choosing the right typeface and applying minimal adjustments can be more effective than overly complex designs. Moving forward, I plan to deepen my understanding of Adobe Illustrator’s tools and continue experimenting with type expressions.

Week 3

Experience:

Learning about typography deepened my understanding of how visual elements influence readability and design. I practiced techniques like kerning, leading, and using type specimen books, which highlighted the importance of careful text formatting.

Observations:

I noticed the critical role of hierarchy and alignment in typography. Effective design must balance aesthetic appeal with clear communication, ensuring that type does not distract from the message. Recognizing common pitfalls, like widows and orphans, has improved my attention to detail.

Findings:

Week 4

Experience:

In the Typography 2 module, I explored the technical elements of letterforms and fonts. Though initially overwhelming, learning terms like ‘apex’ and ‘stem’ helped me appreciate the importance of these components in distinguishing typefaces. Applying the terminology deepened my understanding of type construction.

Observations:

I found that understanding the baseline, median, and x-height was crucial for grasping legibility and aesthetics. Comparing typefaces taught me that subtle differences in stroke and weight dramatically influence their emotional and functional impact. Studying fonts in full, including uppercase, lowercase, and numerals, also improved my design approach.

Findings:

I realized that effective typography is not just about visual appeal, but understanding how technical elements shape both readability and expression. To enhance my design sense, I’ll focus on mastering a few key typefaces and improving my ability to analyze their differences.

Search This Blog

An Hongzheng