Typography Task 1: Exercises
21/4/2025-19/5/2025 / Week1-Week5
Tan Tzu Yu / 0374460
Typography / Bachelor of Design (Honors) in Creative Media / Taylor's University
Task 1/ Exercises
LECTURES
Week 1 :Today was my first class of my degree course. Since it was just the beginning, we didn’t have any assignments to complete yet. Instead, we were asked to start working on our E-portfolio, which I’m doing now. During class, we had a briefing session where Mr. Vinod explained what this module is about and what we’ll be learning. He also guided us through the steps to create our E-portfolio using a video tutorial and gave us a hand whenever we needed help. Besides that, we were asked to download and take a look at 10 different typefaces in Typography, so it’ll be easier for us when we start our first assignment.
However, there were a online lecture where we were asked to watch a YouTube video talking about the history and development of typography
In the early stages of writing, people inscribed symbols onto materials like wet clay and stone using tools such as sharpened sticks and chisels. These tools naturally led to the creation of uppercase letters composed mainly of straight lines and simple curves, as these shapes were easier to produce on such materials. For nearly two millennia, these uppercase forms were the standard in writing.
The Greeks introduced a significant change by altering the direction of writing. While the Phoenicians and other Semitic cultures wrote from right to left, the Greeks developed a method called "boustrophedon," meaning "as the ox plows." In this style, lines of text alternated direction: one line would be written from right to left, and the next from left to right.This approach not only changed the reading direction but also influenced the orientation of the letterforms themselves.
|
|
Fig. 1.1: Boustrophedon writing style (Uploaded on 22/4/2025)
From the 3rd to the 10th century CE, a handwriting style known as
square capitals was commonly used, especially in Roman monuments.
These letters were designed with small decorative strokes, or
serifs, at the ends of the main lines. The contrast between thick
and thin strokes in the letters came from using a reed pen held at
about a 60-degree angle, which gave the writing a formal and elegant
look.
 Fig. 1.2: Developments of handwriting styles (Uploaded on 22/4/2025)
Week 2 : In this week lecture, we talked about the text
information also can be known as textual formatting. We were
introduces to few terms of words including:
|
- Kerning : It is the automatic adjustment of space between letters. It removes the letter spaces between words or sentences
- Letter Spacing : It means add space in between letters
- Tracking : Refers to doing kerning and letter spacing at the same time in a word or a sentence.
- Gray Value: The balance between the letters and the negative space.
|
|
Fig. 1.3: Difference of Kerning & Letterspacing (Uploaded on 30/4/2025) |
- Flush Left (Left-Aligned) : This is the most common and natural alignment for left-to-right languages like English. Each line of text starts at the same point on the left, creating a clean, straight edge, while the right side remains uneven or "ragged." This style mirrors the way we write by hand, making it comfortable and easy to read. It's widely used in books, articles, and websites because it allows the eye to move smoothly from one line to the next.
- Centered : Center alignment places each line of text in the middle of the page or column, resulting in uneven edges on both sides. This approach can give your text a formal or artistic appearance, making it stand out. It's often used for titles, headings, invitations, and poems. However, for longer paragraphs, centered text can be harder to read because the starting point of each line varies, disrupting the reader's flow.
- Flush Right (Right-Aligned) : In this alignment, text lines up along the right margin, leaving the left edge ragged. While less common in English, it's useful in specific contexts, such as aligning numbers in tables, creating captions, or designing elements that need to align with the right side of a page. This style can create a unique and modern look but may reduce readability in large blocks of text.
- Justified : Justified text aligns evenly along both the left and right margins by adjusting the spacing between words and, occasionally, between letters. This creates a clean, block-like appearance, often seen in newspapers and books. While it offers a polished and organized look, it can sometimes lead to uneven spacing between words, known as "rivers," which may affect readability. Careful attention to hyphenation and spacing is needed to minimize this effect.
Designers often choose how to set type based on a mix of personal preferences, cultural influences, and the desire to convey a particular tone or message. However, the primary responsibility of a typographer is to present the author's message clearly and appropriately. If the typography draws attention to itself before the reader engages with the content, it becomes a distraction and should be reconsidered. In essence, if the design overshadows the words, it's time to adjust the typography.
Beyond understanding the unique characteristics and historical context of each typeface, it's crucial to grasp how different fonts feel when used in text. Different typefaces are suited to different messages, and a skilled typographer knows which font best aligns with the intended message.
To ensure text is comfortable for extended reading, it's essential to consider type size, leading (line spacing), and line length.
- Type Size: The text should be large enough to be easily read at a typical reading distance, such as holding a book in your lap. This ensures that readers do not have to strain their eyes, promoting a more enjoyable reading experience.
- Leading (Line Spacing): Proper leading is crucial for readability. If the lines are too close together (tight leading), it can cause readers to lose their place, as their eyes may inadvertently jump to the wrong line. Conversely, if the lines are too far apart (loose leading), it can create distracting white spaces that disrupt the flow of reading. A general guideline is to set the leading between 120% to 150% of the font size. For instance, with a 12-point font, the leading should be approximately 14.4 to 18 points.
- Line Length: The length of each line of text also significantly affects readability. Lines that are too long can make it difficult for readers to track from the end of one line to the beginning of the next, while lines that are too short can disrupt the natural rhythm of reading. An optimal line length is typically between 50 to 75 characters per line, including spaces.
By carefully balancing these elements—type size, leading, and line length—designers can create text layouts that not only look aesthetically pleasing but also enhance the reader's ability to absorb and retain information.
Additionally, consider the texture or "color" of typefaces. Fonts with a larger x-height or heavier stroke width tend to create a darker appearance on the page compared to those with smaller x-heights or lighter strokes. Being sensitive to these variations is fundamental in crafting effective and visually appealing layouts.
|
|
Fig. 1.4: Explanation of Text/Texture on words and sentences (Uploaded on 30/4/2025) |
A type specimen book is an essential tool in typography, providing designers and typographers with a comprehensive reference to evaluate and select typefaces effectively. It showcases various fonts in different sizes, weights, and styles, allowing for an accurate assessment of how a typeface will appear in print or on screen.
|
|
Fig. 1.5: Sample type specimen sheet (Uploaded on 30/4/2025) |
Week 3 : In this week's lecture, we continue talking about the same topic as last week, which is text information also known as textual formatting. We first start with the different ways of indicating paragraphs, and the first way is by using the "Pilcrow"(¶), a holdover from medieval manuscript seldom use today.
The second way to indicate paragraphs is by using a "line space" (also known as leading) between them. It's important to distinguish leading from general line spacing, as leading refers specifically to the vertical space between lines of text. This space is measured from the baseline of one line to the baseline of the next. Understanding the difference between these two terms is essential. In the example below, a line space (leading) separates the paragraphs. Therefore, if the leading is set to 12pt, the space between paragraphs will also be 12pt, ensuring consistent alignment across text columns.
Then, Indentation can also be used to indicate paragraphs.Typically, the indent is the same size as the line spacing or the same as the point size of the text and it is best used when the text is justified.
Next, we were introduced to two major typographic mistakes that designers consider unacceptable: “widows” and “orphans.” A widow is a short line of text that appears alone at the end of a column, while an orphan is a short line that appears alone at the beginning of a new column. Text that is flush right with a ragged left edge tends to be slightly more tolerant of widows, but only marginally. Orphans, however, are never acceptable.The only way to fix widows is to adjust the line breaks throughout the paragraph so that the final line isn't noticeably short. Orphans require even more attention—skilled typographers ensure that no column begins with the last line of the previous paragraph.
 |
Fig 1.6: Ways of indicating paragraphs & the 2 major mistakes in Typography (Uploaded on 6/5/2025) |
|
|
Fig. 1.7: Leading vs Line Spacing (Uploaded on 6/5/2025) |
In addition to exploring paragraph indicators, we were also introduced to various techniques for highlighting text. Different forms of emphasis require different types of contrast. These include italic highlights, bold highlights, bold highlights using different fonts, and color highlights. One important consideration when using bold text for emphasis is to reduce the font size by 0.5pt to maintain visual harmony. Additionally, when using a colored background to highlight text, it's essential to preserve the left reading axis to ensure optimal readability.
|
||
|
Fig. 1.8: Difference of Italic Highlights and Bold Highlights (Uploaded on 6/5/2025)
|
An A head (main heading) signals a significant break or shift in topic within a section. In the examples provided, A heads are displayed larger than the body text, set in small caps and bold, creating a strong visual cue. One example even demonstrates an A head aligned to extend into the left margin, further emphasizing its prominence.
 |
Fig. 1.10 : Types of Headings (Uploaded on 6/5/2025) |
|
Fig. 1.11: Cross Alignment (Uploaded on 6/5/2025) |
Week 4 : Typography, a craft refined over 500 years, has developed a technical vocabulary to describe the intricate anatomy of letterforms. Familiarity with this lexicon is essential when working with type, as it allows for more informed design choices and makes it easier to distinguish and select appropriate typefaces.
One of the first concepts covered was the structure of letterforms. Here are some examples of letterforms:
- Baseline : The invisible line that letters sit on
- Median : The top boundary of the x-height
- X-height : The height of the lowercase ‘x’ in any given typeface
|
|
Fig 1.12 : Baseline, Median & X-height (Uploaded on 6/5/2025) |
- Em/En : Originate from typesetting, where an em is equal to the current point size (e.g., 12pt type = 12pt em), and an en is half that size. These units are often used to describe spacing and punctuation like em/en dashes.
- Stress : The orientation of a letterform’s thin stroke, often revealing whether it’s vertically or diagonally slanted — a subtle nod to handwritten origins.
- Swash : A flourish extending from the stroke of a letter, are commonly used in elegant designs, but should be used sparingly, especially with capital letters, to maintain legibility.
- Ligature : A single character formed by merging two or more letters — to create a smoother and more harmonious connection.
- Apex / Vertex : The pointed ends formed when diagonal strokes meet. Apex is at the top (like in 'A'), Vertex at the bottom (like in 'V').
- Arm:A short stroke that extends from a stem, like the horizontal line in 'E' or the upward angle in 'K'.
- Ascender : The part of a lowercase letter (like ‘h’ or ‘d’) that rises above the x-height.
- Descender : The part of a lowercase letter (like ‘p’ or ‘g’) that goes below the baseline.
- Bowl : The rounded part of letters like ‘b’, ‘d’, or ‘o’
- Bracket : The curved or angled transition between a serif and the stem of a letter.
- Crotch : The inside space where two strokes meet, like the center of a capital 'Y'.
- Ear : A small stroke that extends from the main body, like the one often seen on a lowercase ‘g’.
 |
Fig 1.13 : Examples of Letterforms mentioned above (Uploaded on 6/5/2025) |
A full type family includes much more than just letters. There are Uppercase and Lowercase letters, as well as Small Capitals — uppercase-style letters drawn to the x-height, often found in serif fonts. Numerals come in two forms: Uppercase Numerals (also called lining figures), which align with capital letters, and Lowercase Numerals (also known as old-style figures), which align with the x-height and include ascenders and descenders, blending more naturally into body text.
 |
Fig 1.14 : Different type families (Uploaded on 6/5/2025) |
 Fig 1.39 : Italic (Uploaded on 6/5/2025) |
Fig 1.41 : Punctuation and Miscellaneous Characters (Uploaded on 6/5/2025) |
|
|
Fig 1.42 : Ornaments (Uploaded on 6/5/2025)
|
Understanding these components also makes it easier to recognize variations within type styles. Roman forms are the standard upright shapes, typically derived from classical inscriptions. Italic styles, on the other hand, reference historical handwriting. Boldface features thicker strokes and is often labeled as Semibold, Medium, Black, or Poster, depending on the typeface. Light and Thin styles have softer, more delicate strokes, while Condensed and Extended versions alter the width of the original font to fit different design needs.
|
|
Fig 1.43 : Difference of each type styles (Uploaded on 6/5/2025)
|
Ten key typefaces — including Garamond, Janson, Caslon, Baskerville, Bodoni, Serifa, Futura, Gill Sans, and Univers — represent some of the most important milestones in the evolution of typography. These typefaces have stood the test of time due to their balance of legibility and aesthetic appeal. Studying these classics offers a solid foundation for understanding and using more contemporary typefaces with intention.
|
|
||||||||||||||||
|
Fig 1.45 : Difference of each typefaces (Uploaded on 6/5/2025)
Week 5 : : In today's lecture, we delved into the often-overlooked intricacies of typeface design. What might seem like clean, symmetrical letterforms at first glance are, in fact, carefully crafted illusions—each letter imbued with subtle, intentional variations that enhance readability, harmony, and visual character. Our lecturer, Mr. Vinod, emphasized that there's no single “correct” way to design type. Instead, it's about achieving a delicate balance between form and function—where aesthetics meet legibility. Using classic examples like Baskerville, Univers, and Helvetica, we explored how type designers deliberately incorporate asymmetries to prevent a mechanical or rigid appearance. We began by looking at uppercase letterforms, starting with Baskerville (Fig 3.1). At a glance, the letters may appear symmetrical, but a closer look reveals otherwise. The stroke weights differ—thicker on one side, thinner on the other—and each serif connection (or bracket) has a uniquely curved arc. These details add elegance and life to the typeface.
Next, we examined Univers (Fig 3.2). Although it’s a sans-serif typeface and generally more uniform in appearance, it also contains subtle asymmetries. For example, the left stroke of a letter might be thinner than the right. Again, this is not a flaw—it’s a deliberate design choice, one that adds internal harmony and expressiveness.
We then took a closer look at the lowercase ‘a’ in both Helvetica and Univers (Fig 3.3). Despite belonging to the same sans-serif category, their characters behave very differently. The way the bowl of the 'a' connects to the stem, or how the terminals are finished, brings out a unique character in each typeface. This part of the lecture really highlighted how even subtle differences in letter construction can affect the overall tone of a typeface.
One key piece of advice Mr. Vinod shared was about restraint. Many students, when starting out in type design, make the mistake of overloading their typefaces with excessive features. Instead, he recommends starting with one distinctive feature and building from there. Type design, it seems, is as much about control and subtlety as it is about creativity. We also revisited the concept of x-height—the height of lowercase letters—and its impact on visual balance. Curved characters like 's' often need to slightly extend above or dip below the x-height to appear optically aligned with straight characters (Fig 3.4). It’s a small tweak, but essential for maintaining visual consistency.
An equally important (and sometimes overlooked) concept in typography is counterform—the space inside and around letters. Counters define the character of a letter as much as the strokes do. When letters combine into words, the counterforms between them become critical in determining how legible and cohesive the text feels (Fig 3.5). Take the lowercase ‘r’ for instance—it doesn’t have a closed counter, but the negative space around it still plays a crucial role in how it fits with adjacent letters. The way you manage counterforms can make or break the reading experience.
One of the most insightful parts of the lecture was when we examined individual letters in extreme detail (Fig 3.6). By focusing on the structure of the letter ‘S’ in Helvetica Black and the letter ‘g’ in Baskerville, we gained a better appreciation for the craft behind each curve, stroke, and counter. This close analysis helps us understand the balance between form and counter, and gives a glimpse into the designer’s mind.
Finally, we connected these type concepts to a broader graphic design principle: contrast. Contrast is one of the most powerful tools in design—it helps create hierarchy, differentiate information, and draw attention. We looked at various contrast pairings (Fig 3.7) such as small/organic vs. large/machined or dark vs. light, especially when comparing typefaces like Helvetica Bold and Baskerville. Understanding and applying contrast effectively in type not only clarifies your message but also adds visual interest and flow to your designs.
|
INSTRUCTIONS
|
|
Fig. 2.0: Sketch 1 of my Type Expression (Uploaded on 28/4/2025) |
|
| Fig. 2.1: Sketch 2 of my Type Expression (Uploaded on 28/4/2025) |
|
|
|
.jpg)
|
|
Fig. 2.3: Final version of my digitized type expressions (Uploaded on 7/5/2025)
|
|
|
|
|
||
|
Fig. 2.6: Sleep ; Animation frames (Uploaded on 8/5/2025) 
|
- Bembo Std
- ITC Garamond Std
- Janson Text Lt Std
- Adobe Caslon Pro
- ITC New Baskerville Std
- Bodoni 72
- Serifa Std
- Futura Std
- Gill Sans Nova
- Univers LT Std
|
||||
|
Fig. 2.9 : Kerning & Tracking exercise of my name ( JPEG) (Uploaded on 23/5/2025)
|
|
|
Fig. 2.12 : Final Design of my Text Formatting ( JPEG ) (Uploaded on 23/5/2025) |
 |
Fig. 2.13 : Final Design of my Text Formatting ( JPEG ) (with grid) (Uploaded on 23/5/2025) |
|
|
( Fig. 3.0 : Detail In Typography) (Uploaded on 9/5/2025) |
Comments
Post a Comment