Typography - Task 1: Exercise

Typography - Task 1: Exercise

24/09/2024- 05/01/2024 (Week 1 - Week 14)

Alicia Lo Yann Wei / 0357917 / Bachelor of Mass Communication in Digital Media Production
GCD60104 Typography

1. LECTURES

2. INSTRUCTIONS

3. FEEDBACK

4. REFLECTIONS

5. FURTHER READING

LECTURES

Week 1

Typo_0_Introduction

What is typography?

Typography involves creating letters and typefaces/type families.
Geometrical shapes are often used to form letters.

Figure 1.1.1 Typography

Typography is seen in animation, website, and app design.
Typography is more than just text; it requires skill and thoughtful design.
The skills and thinking developed through typography have wide-ranging applications.

A font refers to an individual style or weight within a typeface, such as Georgia Regular, Georgia Italic, or Georgia Bold.
A typeface is the entire family of fonts that share similar characteristics or styles (e.g., Georgia, Arial, Times New Roman).

Figure 1.1.2 The Difference Between Font and Typeface

Fonts within a typeface can vary in weight or style (e.g., bold, italic).

Typo_1_Development

Early Letterform Development: Phoenician to Roman

Early writing involved scratching into wet clay or carving into stone using tools like sharpened sticks and chisels.
Uppercase letterforms evolved over nearly two thousand years, primarily consisting of simple shapes like straight lines and curves, influenced by these tools and materials.
Phoenicians wrote from right to left.
The Greeks developed a style of writing called 'Boustrophedon' which altered the direction of writing, a change from earlier scripts like Phoenician.

Figure 1.1.3 Boustrophedon

Etruscan and Roman craftsmen worked on marble by first painting letterforms before chiseling to avoid costly mistakes.
Their strokes featured variations in weight (thicker verticals, thinner horizontals) and broader strokes at the start and end.

Figure 1.1.4 Etruscan

Hand Script from 3rd-10th Century C.E.

Square capitals were the written version that can be found in Roman monuments.
Around the 5th century AD, square capitals were prominent, developed with thicker and thinner strokes and more visible serifs.

Figure 1.1.5 Square Capitals

Rustic capitals, a compressed version of square capitals, allowed more text to fit on parchment and were quicker to write, with the pen held at a 30-degree angle.
While rustic capitals were faster to write, they were harder to read due to their compressed nature, similar to modern condensed fonts.

Figure 1.1.6 Rustic Capitals

Roman cursive, both square and rustic capitals were used for formal documents or performances.
Everyday writing was done in cursive, where letters were simplified for speed, leading to the development of lowercase letterforms.

Figure 1.1.7 Roman Cursive

Uncial script incorporated elements of Roman cursive, particularly in letters like A, D, E, H, M, U and Q.
Uncial forms were more readable at smaller sizes than rustic capitals with combined characteristics of both uppercase and lowercase letters.

Figure 1.1.8 Uncial

Half uncials, introduced ascenders and descenders, which completed the development of lowercase forms around 2,000 years after the Phoenician alphabet.

Figure 1.1.9 Half Uncial

Charlemagne's Edict (789 CE) is aimed to standardize classical texts across his empire. This task was given to Alcuin of York, abbot of St. Martin's, Tours. The monks introduced majuscule (uppercase), minuscule (lowercase), capitalization, and punctuation, such as Caloline Miniscule.

Figure 1.2.0 Caloline Miniscule

After the dissolution of Charlemagne’s empire, regional styles emerged.
Blackletter (textura) developed in northern Europe: condensed and vertical.
Rotunda style emerged in southern Europe: more open and rounded.
Humanistic script in Italy was based on Alcuin's minuscule script.

Figure 1.2.1 Blackletter (textura) and Rotunda

Text Type Classification

Blackletter (1450)

Based on hand-copying styles used in northern Europe for books.
Examples: Textura, Blackletter fonts common in religious and legal texts.

Old Style (1475)

Lowercase forms based on Italian humanist scholars; uppercase forms from Roman inscriptions.
Notable fonts: Bembo, Garamond, Palatino.

Italic (1500)

Based on contemporary Italian handwriting, condensed and close-set.
Initially considered a separate class, later paired with Roman forms.

Script (1550)

Mimic engraved calligraphic forms, used in short applications.
Examples: Mistral, Snell Roundhand.

Transitional (1750)

Developed with advances in casting and printing technology.
Notable fonts: Baskerville, Times New Roman.

Modern (1775)

Rationalized old style, with extreme contrast between thick and thin strokes.
Notable fonts: Bodoni, Didot.

Square Serif/Slab Serif (1825)

Heavy, bracketed serifs developed for commercial printing.
Later evolved into sans-serif fonts.

Sans-Serif (1900)

Introduced by William Caslon, gained popularity in the 20th century.
Sans-serif forms considered "ugly" (Grotesque/Gothic) compared to classical serif forms.
Notable styles: Humanist (Gill Sans), Geometric (Futura), Akzidenz-Grotesk.

Serif/Sans Serif (1990)

Blend between serif and sans-serif characteristics.
Examples: Rotis, Scala, Stone.

Figure 1.2.2 Text Type

Week 2

Typo_3_Text_P1

Text/Tracking

Kerning refers to the automatic adjustments of space between letter. It is also often mistakenly referred to as 'letterspacing'.
Letterspacing means to add space in between the letters.
Tracking refers to the addition or removal of space in a word or sentence. Tightly set text creates a darker color due to less white space between letters and words; while loosely set text creates a lighter color with more white space, making the text appear less dense.

Figure 1.3.1 Tracking & Kerning

Text/Formatting Text

Flush left

Mirrors the asymmetrical experience of handwriting.
Each line starts at the same point but ends wherever the last word on the line ends.
Space between words is consistent.

Figure 1.3.2 Flush Left

Centered

Imposes symmetry upon the text, giving equal value and weight to both ends of each line.
It transforms the text into shapes, adding a pictorial quality to material that is non-pictorial by nature.

Figure 1.3.3 Centered

Justified

Imposes a symmetrical shape on the text.
Expand or reduced spaced between words results in the openness of lines that produce 'ricers' of white space running vertically through the text.

Figure 1.3.4 Justified

Text/Texture

Refers to the overall visual feel or pattern created by the arrangement of type on a page.
Achieved with a larger x-height or thicker strokes, creating a heavier, darker texture that feels compact and solid.
Formed with smaller x-height or thinner strokes, giving a lighter, more open texture that feels airy and less dense.

Text/Leading and Line Length

Text type should be large enough to be readable.

Leading

Text that is set too tightly encourages vertical eye movement, which also creates stripped patterns that distract the reader.

Line Length

Shorter line require less leading; longer lines more.
Keep line length between 55-65 characters.

Figure 1.3.5 Anatomy of a Typeface

Week 3

Typo_4_Text_Part 2

Text/Indicating Paragraphs

Pilcrow (¶)

Originated in medieval manuscripts to mark the start of paragraphs.

Line Spacing

Refers to the vertical distance between lines of text.
Used to maintain consistent alignment across multiple columns.
Line spacing is typically set equal to the paragraph spacing for balance.

Figure 1.4.1 Line Space vs Leading

Indentation

The indent size should match the line spacing or the point size of the text.
Ideal for justified (no flush left or right) text to avoid disrupting the alignment.

Extended Paragraphs

May lead to wide columns of text, but can be useful for specific compositional or functional purposes.

Text/Widows and Orphans

Widows

A widow is a short line of type left alone at the end of a column of text.
Widows in justified text are serious typographical issues and should be avoided.
In flush right, ragged left alignment, widows are slightly more forgiving, but still not ideal. Thus, rebreak the text by introducing a false line break to ensure at least two lines are present.

Orphans

An orphan is a short line of type left alone at the start of new column.
Orphans are considered unpardonable and should be avoided at all costs.
Use "Shift + Enter" to manually adjust line breaks and avoid widows and orphans.
Adjust letter spacing and kerning slightly (within ±3 units) to refine text flow without making the spacing look inconsistent.

Text/Highlighting Text

Different ways to highlight text:

Italics
Bold/Medium Weight
Changing Typeface. For instance, if the main body uses a serif typeface, you can make the highlighted text sans-serif. When switching from a serif typeface to a sans-serif typeface (or vice versa), reduce the point size of the sans-serif text by 0.5 points as sans-serif fonts tend to look larger at the same point size.
Color. If working with color printing, highlight text using black, cyan, or magenta. Avoid using yellow as it may not be easily readable.

Figure 1.4.2 Serif and Sans-serif Typeface

Notes:

- Consider the leading and whether the point size of the text needs to be reduced.

- Place quotation marks that can create a clear indent, breaking the left reading axis.

Text/Headline with Text

A-Head:

A-heads signify a clear break between topics within a section. They're usually larger than the body text, often set in small caps and bold.

Examples of A-head usage include:

A bold A-head in a different type family aligned with the reading axis.
A bold A-head from a different type family extended to the left of the body text.
A larger size in the same type family as the body text.
A small-cap style to differentiate the A-head from the body text.

B-Head:

B-head is subordinate to the A-head. It typically introduces a new supporting argument for the topic at hand.
B-heads don't use paragraph spaces but rely on leading space (i.e., a line break), allowing them to integrate within the A-head's text structure without breaking the reading flow.

C-Head:

C-head highlights specific facets of the B-head material. It's typically inset into the paragraph or text body.
Common in long, complex texts, C-heads can use small caps, italics, or bold to visually separate the heading from the body.
There should be an M space (the width of the letter 'M') between the C-head and the beginning of the following text.

Cross-Alignment:

Cross-alignment refers to aligning headings and subtext with the body of text to maintain architectural page structure.
For instance, four lines of caption text (with 9-point leading) may cross-align with three lines of body text (13.5-point leading).
Doubling the leading of the smaller text can help maintain alignment between different text sizes.

Week 4

Typo_2_Basics

Basics/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’.

Cap Height: The height of uppercase letters from the baseline to the top of capital letters.

Ascender Height: The height of ascending strokes in lowercase letters, which often extend above capital letters for optical balance.

Descender Height: The portion of certain letters, like "p" and "q," that extends below the baseline.

Figure 1.5.1 Letterform

Stroke: Any line defining a letterform. Each segment of a letter is considered a stroke.

Apex/Vertex: The point created by joining two diagonal stems (apex above and vertex below)

Arm: A short stroke extending from the main stem, either horizontally.

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

Barb: The half-serif finish on some curved stroke.

Beak: A half-serif finish on some horizontal arms.

Bowl: The rounded part of a letter that defines an open or closed counter (enclosed space).

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

Crossbar: A horizontal stroke connecting two main stems, such as in "H" or "A."

Cross Stroke: A horizontal or angled stroke that intersects the stem, as seen in "f" and "t."

Crotch: The interior space where two strokes meet, such as in "K."

Descender: Any part of a letter extending below the baseline.

Ear: The stroke extending out from the main stem or the body of the letterform.

Em/en: Em is equivalent to the point size of the typeface, basically the space in between the words. En is half the width of an em.

An em space is a gap between words, typically the width of the letter 'M'.

Em Dash (—): It’s used to indicate breaks in thought, as a substitute for parentheses, or to attribute quotes (e.g., "—Author Name").

En Dash (–): Commonly used to represent ranges (e.g., "1996–1999") or to join related terms.

Finial: The rounded non-serif terminal to a stroke.

Leg: Short stroke off the stem of the letterform, either at the bottom of the stroke 'L' or inclined downward (K,R).

Ligatures: The combination of two or more letters to avoid visual clashing, commonly seen in combinations like "fi," "fl," or "ff."

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 letter 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 that extends from the stroke. Do not use swashes in capital letters together to form a word or a name.

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

Terminal: The self-contained finish of a stroke without a serif.

Basics/The Font

Uppercase

Lowercase

Small capitals: Uppercase letterforms draw to the x-height of the typeface. Primarily found in serif fonts (expert set).

Uppercase Numerals (lining figures): Numerals are same height as the uppercase letters with same kerning width.

Lowercase Numerals (old style/text figures): Numerals are set to x-height with ascenders and descenders.

Italic

Punctuation, miscellaneous characters

Ornaments: Used as flourishes in invitations or certificates. Can be found in Adobe Casion Pro.

Basics/Describing Typefaces

Roman: A slightly lighter stroke in roman is called as 'Book'.

Italic: Oblique conversely are based on roman form of typeface.

Boldface: Thicker stroke than a roman form. Also called as 'semibold', 'medium', 'black', 'extra bold', and the boldest as 'poster'.

Light: Lighter stroke than the roman form. Even lighter are called as 'thin'.

Condense: Extremely condense styles are known as 'compressed'.

Extended

Basics/Comparing Typefaces

When analyzing typefaces, focus on differences in attributes such as line height, stroke width, and overall feel.
Each typeface conveys different emotions and moods, from whimsical to mechanical or stately.
Choosing the right typeface means aligning it with the intended message.
Common choices might include versatile sans-serif options like Helvetica and Futura or decorative ones like Bodoni for specific, stylish applications.

Week 5

Typo_5_Understanding

Letters/Understanding Letterforms

Uppercase letterforms may appear symmetrical but it is not with a closer examination.

For example:

Baskerville stroke: Each stroke is treated individually but remains cohesive within the overall typeface.
Univers: Optical adjustments make certain strokes appear symmetrical, but they're actually varied in width.

Figure 1.6.1 Baskerville Stroke

Comparing Helvetica and Univers, the subtle variations in letter 'a' reveal unique stylistic choices.

Helvetica’s upper bowl tapers smoothly, while Univers has a more utilitarian, angular look.

Figure 1.6.2 Difference between Helvetica and Univers

Letters/Maintaining X-height

Curved strokes, such as those in letters like 'S' or 'O,' often extend slightly beyond the median or baseline to appear aligned with other letters.
It is to prevent these letters from seeming visually smaller compared to more angular characters, which have more areas of contact with the median lines.

Letters/Form/Counterform

When letters are joined to form words, the counterform includes the spaces between them.
Balance these counters to ensure each letter is distinguishable within words. Excessive or insufficient spacing can impact readability.

Letters/Contrast

The simple contrasts produces numerous variations: small+organic/large+machined; small+dark/large+light

Figure 1.6.3 Contrast

INSTRUCTIONS

Task 1: Exercises- Type Expression

In Exercise 1, we are tasked with selecting four words from over ten options provided for font design. Through a class vote, we all agreed to the words jump, fish, shake, and chop. Our goal is to digitize them using Adobe Illustrator and also refer to the ten typefaces shared on Teams to assist with our designs.

1. Sketches

First, we began by sketching out ideas for each word we voted on in class. I sought inspiration online, especially on Pinterest, and then started drawing a few sketches based on ideas that came to mind.

Figure 3.1.1 Type Expression Sketches (30/9/2024)

My goal was to make the designs as straightforward and readable as possible, following Ms. Vitiyaa's instructions. After receiving feedback, I proceeded to the digitalization process.

2. Digitalization

Following several tutorial videos provided by our lecturer and additional resources on YouTube, I decided to digitize four versions of each word.

Figure 3.2.1 Digitalization Process (1/10/2024)

For jump, I initially attempted to show a stickman jumping down a valley, but distorting the letters didn’t achieve the effect I wanted. For shake, I tried adding a horizontal and vertical shake to create a sense of movement. For fish, I encountered some challenges in translating my sketches digitally, as the complexity of the idea made it difficult to execute. Finally, for chop, I visualized chopping something on a board.

Final Type Expression:

Figure 3.2.2 Final Type Expressions (9/10/2024)

Ms. Vitiyaa’s feedback helped me refine my work, particularly suggesting that chop and shake would benefit from animation for added visual appeal. This feedback, combined with my growing familiarity with Adobe Illustrator, enabled me to experiment more confidently. I noticed how some fonts enhanced the design’s appeal while others fell short, which taught me the impact of typeface selection on overall aesthetic. Below is the final digitalization of my work.

3. Type Expression Animation

In week 3, I initially wanted to animate chop, intending to have the “p” letter split and fall. However, I struggled to make it visually dynamic through my imagination.

Thus, I eventually pivoted to animating the word 'shake'.

Figure 3.3.1 Initial Animation Frames (14/10/2024)

I felt that simply making the word shake seemed a bit dull.

Figure 3.3.2 Blurry Effects Added (14/10/2024)

To convey a blurry, shaky effect, I added shadow layers behind the word. However, to avoid compromising readability, I adjusted the radial blur effect for better clarity.

Through trial and error, I discovered that a smooth shake required more frames to prevent the blur effect from appearing too sudden. Thus, I added 12 more frames to make it smoothly animated, with a 24 frames in total.

Figure 3.3.3 'Shake' Animation Frames (14/10/2024)

By layering several identical frames, I achieved a gradual, realistic shake with a visible blur effect behind the word as it sped up. After refining this, I converted the final animation into a GIF.

Final Animation Type Expression

Figure 3.3.4 'Shake' Animation (14/10/2024)

Task 1: Exercise 2 - Formatting Text

We're tasked with refining an article titled "I am Helvetica" in InDesign by adjusting letterspacing, paragraph spacing, and leading and etc. To support our learning, we have tutorial videos that guide us through text formatting techniques. Throughout, we'll tackle incremental exercises that cover all important text formatting elements that help us build a solid grasp of typesetting, text hierarchy, and layout arrangement.

Kerning and Tracking

By using the ten typefaces provided, I started off practicing kerning and tracking with my name.

Figure 3.4.1 Without Kerning (20/10/2024)

Figure 3.4.2 With Kerning (20/10/2024)

Layouts

After finishing the practice, I moved on to the actual assignment. I downloaded and reviewed the text from the team, then began planning the layout. I initially explored some magazine layouts online, but without subheadings, I found it challenging to fill blank spaces in a way that wouldn’t make the layout feel empty. To address this, I added pictures to cover those areas, while also considering the importance of spacing for a clean look.

Figure 3.5.1 Layouts (3 columns) (22/10/224)

Using three columns initially made kerning and tracking easier, but it felt somewhat overwhelming, so I switched to two columns. This brought new challenges with hyphenation, widows, and orphans, but I minimized these issues as best as I could and felt pleased with the result.

Figure 3.5.2 Layouts (2 columns) (22/10/2024)

After receiving feedback from Ms. Vitiyaa, I made adjustments to the layout by reducing font size and leading to achieve more consistent spacing and alignment.

Figure 3.5.3 Final Text Formatting Layout (27/10/2024)

Figure 3.5.4 Final Text Formatting Layout (PDF) (27/10/2024)

Figure 3.5.5 Final Text Formatting Layout - Grids (27/10/2024)

Figure 3.5.6 Final Text Formatting Layout - Grids (PDF) (27/10/2024)

TEXT FORMAT :

HEAD LINE

Typeface: Bembo Std

Type Size/s: 52 pt

Leading: 48 pt

Paragraph spacing: 0

Font/s: Bold

LEAD IN TEXT

Typeface: Bodoni Std

Font/s: Book Italic

Type Size/s: 24 pt

Leading: 26 pt

Paragraph spacing: 0

BODY

Typeface: Serifa Std

Font/s: Bembo Std

Type Size/s: 8.5 pt

Leading: 11 pt

Paragraph spacing: 11 pt

Characters per-line: 49

Alignment: Flush left

Margins: 80 mm top, 26 mm left + right , 56 mm bottom

Columns: 2

Gutter: 6 mm

FEEDBACK

Week 1

General Feedbacks: We were introduced to the module and provided an overview of its structure and expectations. We also learned how to set up our e-portfolio, which allow us to show cast our work throughout the course. Following that, we participated in a class vote to decide the four words that would be used for Task 1. After a collaborative discussion and voting process, the chosen words were: fish, jump, shake, and chop, which will guide our creative tasks moving forward.

Week 2

General Feedbacks:

In Week 2, I began my type expression project by watching a YouTube video that enhanced our understanding of the subject. This helped me start digitizing my creative designs. I took note of the shortcut keys for Adobe Illustrator and additional videos to improve my design skills. I sketched a few drafts and presented them to Ms.Vitiyaa. I also updated my blog to ensure I was staying on track.

Specific Feedbacks:

Sketches look fine. Please proceed to digitalization.

Week 3

General Feedbacks:

During Week 3, I finalized my drafts and received approval from Ms.Vitiyaa. I submitted my four designs to our Facebook group, where she suggested my word "shake" for its creativity and expressiveness, making it ideal for animation.

Specific Feedbacks:

She suggested maintaining a consistent font style for each word. At the mean time, I also updated my blog immediately after getting approval for my 4 sketches.

Week 4

General Feedback:

Ms. Vitiyaa emphasized simplicity in design and also to avoid any heavy text distortion. This feedback helped reinforce the importance of maintaining a clean composition for clarity.

Specific Feedback:

Ms. Vitiyaa was pleased with my shake animation. With her approval, I moved forward by adding the completed animation to my e-portfolio.

Week 5

General Feedback:

Ms. Vitiyaa reminded us the submission of e-portfolio on 29/10/24. She also mentioned about the importance of following the instructional steps meticulously, as deviating from them could lead to serious layout errors. She cautioned that skipping or altering steps could result in layout issues, such as orphans or widows.

Specific Feedback:

She mentioned that my layout appeared a bit plain, and the formatting was incorrect. After redoing it, I presented the revised layout to her, and she offered additional suggestions to enhance its design.

REFLECTIONS

Experience

Working through this exercise introduced me to the basics of typography, which, while new and a bit challenging, has been deeply rewarding. With each week came a fresh task, supported by instructional videos, which made the learning process structured and enjoyable. Initially, Adobe Illustrator felt unfamiliar, but exploring it more opened up a whole new world of design possibilities. Even though this module is outside my main area of study, I approached it with sincerity, recognizing how typography is essential in so many parts of life. I particularly enjoyed the freedom in the first exercise, which allowed me to creatively interpret words in unique ways despite the challenge of making my designs stand out. My overall classroom experience was positive and supportive, with lighthearted classes that didn’t add stress and encouraging feedback that kept me engaged.

Observations

During our weekly check-ins, seeing others’ interpretations of the same words was incredibly inspiring, revealing the wide range of creative possibilities within typography. Working on the digitization of designs, however, proved more challenging than anticipated, especially when transforming specific words like "FISH" and "SHAKE" into a shape that matched its meaning. This pushed me to research further online, and with patience, I reached results that felt rewarding. Observing the variety in my peers’ work helped me appreciate how typography allows for unique perspectives, showing how each person’s view can shape the text in powerful, distinctive ways.

Findings

Through this project, I discovered a newfound appreciation for typography, realizing it goes beyond aesthetics to involve precise technical elements, like spacing and alignment, that convey messages visually. Weekly feedback played a crucial role in my learning, driving productivity and fostering a growth mindset as I navigated the balance between creative expression and technical accuracy. This experience shifted my approach from relying on intuition alone to applying typography principles that make my work more structured and impactful.

FURTHER READING

Early Evolution of Roman Letters 1

Early writing began with simple symbols representing tangible objects.
Egyptians advanced with "phonograms," symbolizing sounds.
Phoenicians developed the first phonetic alphabet for practical record-keeping.
Greeks added vowels and aesthetic changes, influencing Western alphabets.
Romans refined letterforms into capital letters, still influencing modern design.

Figure 4.1.1 Design Progression of Letterforms

First Alphabets

Monumental Capitals: Roman capitals were initially carved into monuments, creating formal and enduring lettering.
Square Capitals: These were used in formal books, resembling monument inscriptions but quicker to write.
Rustic Capitals: Narrower, simpler letters saved space and effort in less formal texts.
Roman Cursive: A quicker, casual writing style with running strokes, it influenced the development of lowercase letters.

Figure 4.1.2 Square Capitals

Figure 4.1.3 Rustic Capitals

Figure 4.1.4 Roman Cursive

Search This Blog

Alicia Lo Yann Wei (0357917)