Typography - Task 1: Exercises
24/9/2025-22/10/2025/ Week 1 - Week 5
Janice Cheah Pei Ern / 0376497
Typography / BDCM / Taylor's University
Task 1
LIST / JUMP LINK
LECTURES
Week 0: Introduction to Typography
- Font: individual font or weight within the typeface (Ex. Georgia Regular, Georgia Italic and Georgia Bold)
- Typeface: the entire family of fonts/weights that share similar characteristics/styles (Ex. Georgia, Arial, Times New Roman, Didot and Futura)
Week 1: Development and Timeline
- Started from Phoenicians using straight lines and circles
Figure 1.1 Evolution of Phoenician Letterform
-
Greeks developed 'boustrophedon' (how the ox ploughs) writing style, alternating between left and right along with the letterforms orientation.
Figure 1.2 Boustrophedon
- Etruscan (then Roman) painted letterforms on marble before inscribing them.
Figure 1.3 Marble carving
- Square capitals were found in Roman monuments. Variety of stroke was achieved by holding the pen at approximately 60° off the perpendicular.
- Rustic capitals, a compressed version of square capitals, helped reduce time to write. The pen was held at approximately 30° off the perpendicular. However, it is harder to read.
- Square and rustic capitals were for documents
- Cursive hand for everyday transactions
- Uncials incorporated some aspects of Roman cursive hand. Broad forms of uncials are more readable than rustic capitals
- Half-uncials marked the formal beginning of lowercase letterforms by formalizing cursive hand
- Charlemagne, first unifier of Europe, entrusted Alcuin of York, Abbot of St Martin of Tours to rewrite the texts using both uppercase, lowercase, capitalization and punctuation to set calligraphy's standard. One of the examples is Caroline miniscule.
- Dissolution of Charlemagne's empire lead to variations of Alcuin's script such as Blackletter from northern Europe and 'Rotunda' from southern Europe.
- Gutenberg used a different brass matrix, or negative impression for each letterform
Figure 1.4 Hand script from 3rd - 10th CE
.png)
Figure 1.5 Text type from 1450 - 1990
Week 2: Text_Part 1
- Kerning: Automatic adjustment of space between letters, not to be mistaken with letterspacing
Figure 1.6 Kerning
- Letterspacing: Add space between the letters
-
Tracking: Addition and removal of space in a word or sentence (Ex. Normal tracking, loose tracking and tight tracking)
Figure 1.7 Tracking
Text Formatting
- Gray value - Value of entire text on a white page
- Flush left - asymmetrical experience of handwriting. Line starts at the same point but end at the point at which the line ends. Even gray value. Ragging on the right.
- Centered - Imposes symmetry as equal value and weight on both ends of lines. Ragging on both left and right hence line breaks are important to reduce ragging.
- Flush right - Emphasis on the end of the line. Ragging on the left.
- Justified - Symmetrical shape on text. Reduces space between word and letters causing 'rivers' of white space in text. Line breaks and hyphenation required to solve this.
Figure 1.8 Types of Text Formatting
Texture
Figure 1.9 Anatomy of a Typeface
Leading and Line Length
- Type size: Large enough to be read easily at arms length
- Leading: Too tightly encourages vertical eye movement causing readers easily loosing their place, too loosely creates striped patterns that distract readers
- Line Length: Shorter lines creates less leading, longer lines more. A good rule of thumb is keep line length between 55-65 characters
Figure 1.10 Leading
Week 3: Text_Part 2
Indicating Paragraphs
- Pilcrow ¶: Holdover from medieval manuscripts seldom use today, marking a new section of text or paragraphs
Figure 1.11 Usage of Pilcrow
- Line space (leading): Used as paragraph break (Line space/paragraph break should be same as leading)
Figure 1.12 Leading vs Line Spacing
- Indentation: Indicate start of paragraph (Should be same size as line spacing or point size of text, best in justified text)
Figure 1.13 Indents
- Extended paragraphs: Create unusually wide column of text (For strong compositional or functional reasons)
Figure 1.14 Extended paragraphs
Widows and Orphans
- Widow - Short line of type left alone at the end of a column of text
- Orphan - Short line of type left alone at the start of new column
Figure 1.15 Widow & Orphan
In justified text, widows and orphans are serious gaffes. Flush right and ragged left text is some what forgiving towards widows but orphans remain unpardonable.
- To fix widows, rebreak your line endings to make sure the last line of paragraph is not too short.
- To fix orphans, make sure no column of text starts with the last line of the previous paragraph.
Note: Make sure not to letterspace/kerning more than 3 times when fixing orphans or widows.
When highlighting text, you can...
Italics, Bold, Switch Typeface and Bold, Change Text Colour (Cyan, Magenta, Black, Yellow) or adding a box
Figure 1.16 Adding box to highlight text
Prime is not a Quote
Figure 1.17 Primes Vs Quotes
Headline within Text
- A Head - Clear break between the topics within a section
Figure 1.18 A Head
- B Head - Indicate new supporting argument of example for the topic at hand
Figure 1.19 B Head
- C Head - Not common but highlights specific facets of material within B head text
Figure 1.20 C Head
Putting together a sequence of subheads = hierarchy
Cross Alignment: Headlines and captions with text type reinforces architectural sense of the page (aka structure) while articulating the complimentary vertical rhythms (Maintain it by doubling the leading)
Week 4: Typo_2_Basic
Describing Letterforms
- Baseline - imaginary line the visual base of the letterforms
- Median - 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 (above) / Vertex (bottom) - the point created by joining two diagonal stems
- Arm - short strokes off the stem of the letterform
- 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 some horizontal arms
- Bowl - the rounded form that describes a counter (can be open or closed)
- Bracket - the transition between the serif and the stem (at the base)
- Cross bar (uppercase) - horizontal stroke that connects two stems together
- Cross stroke (lowercase) - horizontal stroke that connects two stems together
- Crotch - interior space where two strokes meet
- Descender - stem of lowercase below the baseline
- Ear - stroke extending out from main stem or body
- Finial - non-serif terminal of a stroke
- Ligature - character formed by the combination of two or more letterforms
- Stress - orientation of letterform, indicated by thin stroke in round forms
Figure 1.21 Anatomy of Letterforms
- Em - the distance equal to the size of the typeface (gap between words)
- En - half the size of an em
Figure 1.22 Em dash & En dash
- Swash - flourish that extends the stroke of the letterform (not recommended for capital letters)
Figure 1.23 Swash
The Font
- Small Capitals - uppercase letterforms draw to the x-height of the typeface, usually used in acronyms and primarily found in serif fonts
- Uppercase Numerals - lining figures, same height as uppercase letters and all are set to same kerning width
- Lowercase Numerals - old style figures or text figures, set to x-height with ascenders and descenders, used with uppercase and lowercase
- Italic - traced back to 15th century Italian cursive handwriting, Oblique are based on roman typeface with a slant like italics (small caps are almost always only roman)
Figure 1.24 Italic & Oblique
- Punctuation marks - are standard in all fonts, miscellaneous characters it can change from typeface to typeface
- Ornaments - used as flourishes in invitations or certificates
Describing Typefaces
- Roman - uppercase forms are derived from inscriptions of Roman monuments, slightly lighter stroke in roman is known as 'Book'
- Italic - from 15th century Italian handwriting. Oblique conversely are based on roman form of typeface
- Boldface - thicker stroke than roman form, can be called 'semibold', 'medium', 'black', 'extra bold' or super depending on stroke widths, the boldest is known as 'Poster'
- Light - lighter stroke than roman form, even lighter strokes are called 'thin'
Figure 1.25 Typefaces
INSTRUCTIONS
TASK
Task 1: Exercises - Type Expression
During Type Expression, we were tasked to select 4 words and draw out 25 sketches for each of the words before digitising in Adobe Illustrator. The words are played around to show the meaning of the words.
At first, I decided to go with the words 'roll', 'drop', 'melt' and 'swirl'.
Sketches
Figure 2.1 'roll' and 'drop' sketches
Figure 2.2 'melt' sketches
When trying to sketch, I tried to think of the meanings of the word and use those meanings to arrange the letters. For 'roll', I thought of phrases that has the word such as rock and roll and rolling your eyes. I also thought of activities that involve rolling a ball as the letter 'o' looks like a ball. During the word 'drop', I arranged some of the letters are dropping off the other letters and also putting in the droplet element. For 'melt', I tried melting them like cheese and ice along with melting it into a mold. After letting my tutor go through my work, I decided to improve one of the sketches before digitising.
Figure 2.3 'swirl' sketches
As for 'swirl', I tried to make the letters look like it is swirling. However, neither my tutor nor I really like the ideas I drew out. My tutor recommended me to switch to something else which I decided to choose the word 'cut'.
Figure 2.4 'cut' sketches
For 'cut', I thought of simply cutting the letters. Later on, I realised the letter 't' looks like a sword so I decided to use the word 't' cutting through the other letters. I also decided to try and create a cut effect after letting my tutor to review my work.
Final Digitisation
Figure 2.5 Final Type Expression
Type Animation
After letting my tutor review my work on Week 3, I decided to attempt the animation with the words I have. For my first try, I used my first version of 'roll' and animate it rolling its eyes.
Figure 2.6 'roll' first draft
As for my second try, I tried to make the word 'melt' fall down and slowly melt. However, my tutor mentioned it looks more like sink rather than melt so I decided to stick with 'roll' instead.
Figure 2.7 'melt' first draft
After some discussion with my tutor, we decided it's best that we change the type expression for 'roll'. Afterwards, I animate the word 'roll' again with the newer version as my final type animation.
Final Type Animation
Figure 2.8 'ROLL' Type Animation
Task 1: Exercises - Formatting Text
Before continuing with the task, I practised how to do letterspacing and kerning in InDesign according to the lecture videos.
Figure 2.9 Names with letterspacing and kerning practice
Afterwards, we were given an article to practise what we learnt in the lectures such as paragraph spacing, leading and cross-alignment.
Figure 2.10 & 2.11 1st & 2nd Draft
Figure 2.12 & 2.13 3rd & 4th Draft
Figure 2.14 5th Draft
After letting my tutor checked, she mentioned to focus on Balance and Golden Ratio on some of my works. I decided to edit my 4th draft with Golden Ratio.
Figure 2.15 Final Version
Figure 2.16 Final Version PDF
Figure 2.17 Final Version PDF with Guides and Baseline Grids
HEAD
- Font/s: Futura Std Extra Bold (Main Heading) / Futura Std Bold (Sub-heading)
- Type Size/s: 40 pt (Main Heading) / 18 pt (Sub-heading)
- Leading: 42 pt (Main Heading) / 20 pt (Sub-heading)
- Paragraph spacing: 0 pt
BODY
- Font/s: Univers LT Std 55 Roman
- Type Size/s: 10 pt (Main Text) / 8 pt (Photo Caption)
- Leading: 12 pt (Main Text) / 10 pt (Photo Caption)
- Paragraph spacing: 10 pt
- Characters per-line: 50 - 60
- Alignment: Justify with last line aligned to left
Page Margins
- Margins: 12.7mm (Top/Bottom/Left/Right)
- Columns: 4
- Gutter: 5mm
FEEDBACKS
Week 1
General Feedback: Module information and rules are briefed. E-portfolio is set up with necessary information. 25 sketches for each 4 words to be shown next week.
Week 2
General Feedback: Sufficient exploration for some words, some needs further improvement before digitising
Specific Feedback: The words 'roll' and 'drop' are good, 'melt' needs to be improved, 'swirl' needs to be switched to other words
Week 3
Specific Feedback: 'melt' is accepted with minor adjustments, 'cut' is just normal, needs more exploration
Week 4
Specific Feedback: 'roll' is suggested to be changed to another approved version, rearranged the words to make overall look more balance, other words are okay
Week 5
Specific Feedback: Focus on Balance and Golden Ratio for arrangement.
REFLECTIONS
Experience
It was definitely difficult when doing the exercises as I have just started learning about Typography. However, the feedbacks pushed me to work out of my comfort zone, especially during the text expression. I also got stuck with text formatting so I tried to play around with my arrangement to see which one looks better.
Observations
Throughout all the tasks, I feel like text expression is still the hardest here because the things I designed can get repetitive which makes it somewhat not special. I stepped out from the task for a while and try to focus on the other tasks first which helps a little.
Findings
Overall, there are a lot of things to take note of when applying what we learnt during the Typography lectures into our work. I will definitely need to prepare for what comes next as this is only Task 1.
Comments
Post a Comment