Typography - Task 1: Exercises

April 29, 2025

Typography - Task 1: Exercises

25 April 2025 - 29 May 2025 / Week 1 - Week 5

Caitlin Alina Anthony - 0383177

Typography - Bachelor of Design in Creative Media - Taylor's University

Task 1: Exercises

Lectures

Instructions

Task 1

Feedback

Reflections

Further Reading

Lectures

Week 1: The Origins of Letterform (Typo 0 - Introduction & Typo 1 - Development)

Font vs. Typeface: A font is a specific style within a typeface family (like bold or italic), while a typeface is the overall design that encompasses various fonts.
Historical Development: Early writing systems evolved from Phoenician to Roman scripts, often carved into stone or inscribed on clay. The tools used influenced the shapes of letters. (fonts essentially).
Boustrophedon: An ancient Greek writing style where lines alternate direction, left to right, then right to left.
Evolution of Scripts: Over time, scripts transformed from square capitals to rustic capitals, cursive hands, uncials, and eventually to more standardized forms like Carolingian minuscule, which laid the groundwork for modern lowercase letters.

Week 2: Text Formatting Essentials (Typo 3 Text Part 1)

Spacing Techniques

Kerning: Adjusting space between specific letter pairs for visual appeal.
Letterspacing: Uniform spacing between letters.
Tracking: Overall spacing across a word or paragraph. Too tight or too loose can affect readability.

Text Alignment

Flush Left: Aligns text to the left, creating a natural reading flow with a ragged right edge.
Centered: Symmetrical alignment, often used for titles or invitations.
Flush Right: Aligns text to the right, less common but can be effective for specific design purposes.
Justified: Aligns text to both left and right margins, which can create uniform blocks but may introduce spacing issues.

Texture and Readability

The visual gray value of text blocks affects readability. Factors like x-height, stroke weight, and leading (line spacing) contribute to this texture.

Leading and Line Length

Optimal leading enhances readability. Line lengths are typically 55-65 characters.

Week 3: Text Formatting Part 2 (Typo 3 Text Part 2)

Paragraph Indicators:

Pilcrow: An old symbol denoting paragraph breaks.
Line Spacing: Using spaces between lines to separate paragraphs.
Indentation: Starting paragraphs with an indent, commonly used in justified text.

Windows and Orphans

Single lines at the beginning or end of a paragraph that appear isolated. Considered typographic issues to be corrected.

Highlighting Techniques

Emphasizing text using italics, bolding, color changes, or enclosing in boxes.

Headings Hierarchy

A-heads: Primary headings, prominent and distinct.
B-heads: Subheadings under A-heads, less prominent.
C-heads: Further subdivisions, subtle in appearance.

Cross Alignment

Aligning elements across columns or sections to create cohesive and organized layout.

Week 4: Typo 2 Basic

Describing Letterterms, Key Terms:

Ascenders, descenders, strokes, apex/vertex, bowls, arms, brackets, crossbars, crotch, ears, serifs (barbs/beaks), stress, etc.
EM/EN: Measurement units (M= full width, N= half).
Ligature: Two letters combined into one.

The Font

Full Font: More than just letters and numbers. Includes punctuation, weights, italics, etc.
Small Capitals: Same height as x-height.
Uppercase Numerals: Lining figures.
Lowercase Numerals: Oldstyle/text figures with ascenders/descenders.
Italics: Originated from 15th century handwriting.
Obliques: Slanted Roman type, not true italics.
Weight Variants: Roman, Boldface, Light, Thin.

Week 5: Typo 5 Understanding

Understanding Letterforms

At first glance, many uppercase letters may appear symmetrical, but there are subtle asymmetries. For example, the letter A in the Univers typeface features one stem slightly thinner than the other. Small adjustments enhance the internal harmony of the letterform, making it feel balanced and visually appealing.

Maintaining X-Height

Letterforms with curved strokes (like e, o, or c) often extend slightly above the median line or dip below the baseline. This optical adjustment ensures they appear visually consistent in size next to letters with straight horizontal or vertical strokes.

Form and Counterform

Counterform refers to the negative space inside and around letterforms. It plays a crucial role in legibility. By studying existing counterforms, designers can better understand how to craft readable, aesthetically pleasing type.

Letterform Contrast

Contrast in typography helps differentiate and organize content. This includes differences in type weight, style, size, or color, all of which work together to emphasize hierarchy and clarity.

Instructions

Task 1 - Exercise 1: Type Expression

For the 'Type Expression' exercise, the class voted on 4 words that we must compose and express:

- SHAKE

- WALK

- MELT

- STRETCH

1. Sketches

Figure 1.1 - Type Expression Sketches

We were tasked with sketching visual interpretations of our chosen words. We had to sketch them out first with pen/pencil and paper, before we start in Adobe for digital refinement. To get ideas, I searched Google and Pinterest for the words, synonyms, and things related to the following words: shake, melt, stretch, and walk. Here is a breakdown of the process and thought behind the words in figure 2.1:

Shake

For "shake" I had a tough time finding/thinking of anything unique, I experimented with a variety of visual effects to give the impression of movement and instability. The final design (bottom right sketch) was chosen because it best illustrated the jumbled energy of shake. It's as if the letters were caught mid-shake, bouncing all over the place. I took inspiration from the word "earthquake" for this word.

Figure 1.2 - Shake Sketches

Stretch

Out of the 5 variations, the 5th was the chosen one. I originally only had 4 but Mr Max agreed that combining the top left and bottom left would make a unique version of stretch that he doesn't often see, that is box number 5. Having the words go diagonal while also being individually stretch horizontally gives a unique touch. It's like slime being stretched diagonally.

Figure 1.3 - Stretch Sketches

Melt

The chosen sketch (bottom right) shows "melt" melting into oblivion. The letters begin to drip and distorts into a puddle like a mirror puddle of the word. It's like if you lit a candle and all the wax drips down into a puddle and creates a mirror like reflection of the candle, but in this case for the word "melt".

Figure 1.4 - Melt Sketches

Walk

This was inspired by 'The Beatles' iconic Abbey Road stroll (Figure 2.5), I designed the chosen sketch (bottom right) to mirror that steady movement. The text tilts slightly and trails off, with variations in placement to mimic footsteps. A note from Mr Max is to have a light 3D concept to the idea and a sideways visual concept, emphasizing the transition from point A to point B.

Figure 1.5 - The Beatles, Abbey Road Stroll

Figure 1.6 - Walk Sketches

2. Digitization of Sketches

During the digitization process, I focused on finding the most fitting font for each word and worked on composing them in a visually balanced way. I struggled the most with walk, melt and shake, trying to find a way to express them clearly and effectively. In the end, I went with a simple melt that drips like candle wax and a shake that feels simple yet fun. The struggle with walk was not the idea but more the execution of it, in Figure 3.2 is all the alternate versions of walk.

Figure 2.1 - 1st Attempt Sketches in Illustrator

Figure 2.2 - Alternative attempts for WALK

Final Digital Type Expression

Figure 2.3 - Final Digital Text Expression

Figure 2.3 - Final Digital Text Expression (PDF)

Walk: The final outcome for walk was still based on the famous Beatles photo. Hence the characters each walking over the crosswalk, I decided to use the Bembo font because of how each letter has somewhat similarity to a foot.
Melt: Although it was not my original idea with the reflection, I did want to include it as though it is a candle and all the wax is being melted off.
Stretch: The idea came to life, as it looks and feels like an elastic when you stretch it out.
Shake: Is like a vibration, like when you shake a hairspray can, so this is essentially what all the molecules feel inside the can.

3. Type Animation

In week 3/4 once our words were finalized, with the advice of Mr. Max we chose one word to animate to a GIF format. My chosen word was "STRETCH". I already had an idea to stretch is sideways like you would an elastic band, but then on loop. I started by adding the original stretch to an Artboard and holding Shift to expand and make the word bigger and bigger each Artboard I added.

Figure 3.1 - Illustrator ArtBoard for Animations

Once that was done, I exported it to Photoshop. It took a few attempts to get the animation right, it was either too choppy or not enough transition between them. So, after being back and forth between Illustrator and Photoshop (Figure 3.3), I was satisfied with the animation in Figure 3.4.

Figure 3.2 - Adobe Photoshop Animation

Figure 3.3 - First Attempts Animation

Final GIF Animation:

Figure 3.4 - Final Stretch GIF Animation

Task 1 - Exercise 2: Formatting Text

For this exercise, we almost completed the font formatting (Figure 4.1) in class, but finalized at home. This was done on Adobe InDesign, Mr. Max gave us an introduction and instructions on how to use InDesign.

Figure 4.1 - Kerning, Tracking, and Landing

After completing the previous exercise, we got briefed on how to do the 'Text Formatting' exercise. Where to find the text to be used in it, it is called 'Transform the World: The Unsung Architects of Modern Life'. After we got briefed, I started sketching potential layouts on my iPad. (Figure 4.2).

Figure 4.2 - iPad Sketches

After I finalized my sketches, I went ahead on InDesign to create these digitally with the actual text etc.

Figure 4.3 - InDesign Sketches

After getting feedback from Mr Max, the final sketch would be page 8. With the feedback he gave me I changed the page columns from 1 to 2, made the bottom higher, evened out the sides and made the gutter smaller. Then I proceeded to adjust the lettering in the columns to not have the continuous line.

Figure 4.4 - Final Text Formatting

Final Text Formatting Layout

Head

Font: Bembo Std Regular
Type size: 42 pt (Transform....) & 24 pt (The Unsung...)
Leading: 50,4 pt (Transform....) & 30 pt (The Unsung...)
Paragraph Spacing: 0 pt

Body

Font: Bembo Std Regular
Type size: 11 pt
Leading: 12 pt
Paragraph Spacing: 3,881 mm
Character per Line: +/- 55
Alignment: Justify Left

Margines:

Top: 93 mm
Bottom: 81 mm
Left: 17 mm
Right: 20 mm

Columns: 2
Gutter: 8 mm

Figure 4.5 - Final Text Formatting Layout

Figure 4.6 - Final Text Formatting Grid

Figure 4.7 - Text Formatting PDF & Grids

Feedback

Week 1: Introduction and Briefing - April 25th

Recap

The first class was very informative regarding how the course works and what is expected from us. Our first task was made clear, regarding the exercises on 'Type Expression' and 'Text Formatting'. Mr. Max gave us pointers on what the do's and don't are for this assignment and how to score as high as possible. Then we joined the FB group to choose our 4 words. Mr. Max was going to guide us on how to set up our e-portfolio's, but I received an upsetting phone call and had to go home, so I could not complete the practical session of this week's class.

Outcomes of the lecture:

- Understanding of the Module Information Booklet.

- What is expected from each assignment.

- Joining FB group

General Feedback:

Mr Max advised to not use graphical elements as it can look great, but for this assignment it can decrease the grade. Logical elements and deformations are accepted.

Week 2: May 2nd

Specific Feedback:

SHAKE: even tho basic can work on it when illustrating it. The middle witit's being shaken.
MELT: while the melting ones are good, melt is a highly used word and done many times. So for the one where it is melted in the reflection of the floor is really cool aspect. He will teach how to do that in next class.
STRETCH: while i had some unique and basic ones, mixing two of them together would be unique because he has not really seen people doing stretch horizontally, mostly vertically. So by doing the stretch diagonally and horizontally would be a cool result.
WALK: he had to think if the crosswalk would not intrude on the grading, but overall accepted. But to make the words walking over it the focal point, e.g. bold and black lettering and crosswalk a light grey. Make it 3D perhaps the words

General Feedback:

How to use Illustrator for Typography. No color, nothing crazy. What should and shouldn’t be done.

Week 3: May 9th

Specific Feedback:

Stretch is great. Should be used for animation because it makes for an easy loop GIF = higher grade.
Shake is a bit confusing because it's more letters everywhere not giving the impression that it’s shaking, the sketch was good having little around the letter. Last attempt was good.
Melt is worrying because it looks more like reflection in water than melting. Perhaps incorporate the big letters to melt as-well like on the corners, like a candle or ombre them or similar color. Last attempt, great.
The different walks are cool, just use the simple classic.

General Feedback:

Mr Max provided 2 hours to get feedback on our 4 words. Next hour he taught us how to animate our words using Illustrator and Photoshop.

Week 4: May 16th

Specific Feedback:

4 words are good, adjust the shake abit sideways and melt centered. For animation gave tips for the smoother transition by shift adjusting etc.

General Feedback:

Mr. Max started the morning by going through our Task 1's individually and provided approval or feedback and then the remainder time until 10am was left for us to finalize our part 1 assignments. Mr Max Advised to downloaded InDesign in the morning and gave an in depth tutorial on how to use InDesign, how to start doing the Task 2, including all shortcuts, kerning, tracking, margins etc. We completed Task 2 Part 1 and gave us a tutorial on how to do part 2. The rest of the class was free time for feedback.

Week 5: May 23rd

Specific Feedback:

My page 8 was chosen by Mr Max, but with the suggestion to make the body text into 2 columns instead of 1 column.

General Feedback:

Class was online this week due to road closures, we got a walkthrough of how to start Task 2 and the requirements. After that was done we got time to work on our sketches and ask for feedback.

Reflections

Experience

Mr. Max was incredibly helpful throughout this exercise. He explained everything clearly in class, which really helped me understand what was expected and how to approach each task. Having that kind of guidance made the whole process of learning and executing much more manageable.

I felt that the tasks were evenly distributed overall, which gave me enough time to work on each one. However, since this is my first semester, I still found parts of it a bit confusing, especially when switching between different tools and design concepts. It took some trial and error to get the hang of things, but I'm getting better with the workflow of Adobe.

Observation

Throughout the exercise, I noticed how much impact small adjustments in typography can make. Playing around with letterspacing, alignment, and typefaces helped me see how these elements can completely change the mood and readability of a layout. I didn't find the process too difficult. It made me more aware of how intentional every detail in typography needs to bem even if it seems minor at first.

Findings

This exercise helped me realize how detail-oriented typography is. It's not just about choosing a nice font and placement, there's a lot to consider, like layout, spacing, alignment, and consistency. Even small adjustments can make a difference in how the final design looks, it's a lot of trial and error. Typography is definitely more complex than I expected, and while it can be stressful and a lot, it's also rewarding to see improvements as I continue learning.

Search This Blog

Caitlin Alina Anthony (383177)