Typography | Task 2: Typographic Exploration and Communication
21/10/24 - 17/11/24 (Week 6 - Week 8)
Kimberly Miaw Jya Nee | 0366836
Bachelor of Design (Honours) in Creative Media | The Design School
Typography
Task 2: Typographic Exploration & Communication (20%)
[Table of Contents]
1.
Lectures
2.
Instructions
3.
Process Work
4.
Feedback
5.
Reflection
[Lectures]
Week 6
Typo_5_Understanding
Letters: Understanding Letterforms
Fig. 1. Uppercase 'A', Baskerville
Baskerville (Uppercase)
- Uppercase letters look symmetrical but aren't.
- Different stroke weights are visible.
- Each serif-to-stem connection (bracket) has a unique arc.
Fig. 2. Uppercase 'A', Univers
Univers (Uppercase):
- Appears symmetrical but isn’t too.
- Left stroke is thinner than the right.
- Both Baskerville and Univers show how type designers balance harmony and expression.
Fig. 3. Lowercase 'a', Helvetica vs. Univers
Lowercase ‘a’ (Helvetica vs. Univers)
- Small differences in sans-serif typefaces affect character.
- Comparison shows how stems finish and bowls meet the stems.
- These subtle differences define the typeface's character.
Letters: Maintaining X-height
Fig. 4. X-height, Median, Baseline
X-height: Refers to the height of lowercase letters.
Curved strokes (like ‘s’)
- Need to go slightly above the median or below the baseline.
- This creates the illusion of equal size with vertical and horizontal strokes.
Letters: Form & Counterform
Fig. 5. Form & Counterform
Counterform (Counter):
- Space inside and between letterforms.
- Crucial for readability when letters are joined to form words.
Example - Lowercase 'r':
- Has no internal counter.
- Skill in handling counters affects how well words “hang together” (readability).
Fig. 6. Close-up of letter 'S' and 'g'
Close Examination (e.g., 'S' vs. 'g'):
- Form and counter balance gives letters their unique characteristics.
- 'S' retains identity at all sizes; 'g' loses it when examined in parts.
- Studying form and counter helps understand the process of letter design.
Letters: Contrast
Fig. 7. Contrast in Typography
Contrast in Typography
The basic principles of Graphic Design apply directly to typography.
Examples:
- Small + organic vs. Large + mechanical.
- Small + dark vs. Large + light.
- Creates dynamic and visually appealing designs.
[Instructions]
[Process Work]
In this task, we were required to express an editorial spread
typographically. We were provided with 3 text options to choose. We had to
utilise the knowledge gained from the exercises in Task 1 and from other
modules in the same semester. We can use Adobe Illustrator to create the
headline expression. However, the final layout (text formatting and
layout) has to be completed in Adobe InDesign.
- Only use the prescribed 10 typefaces.
- Minor graphical elements, i.e. line, shade, etc. might be allowed.
- No colour may be used.
- No images allowed.
Research
I chose to do the Bauhaus Text, so I went on Pinterest for inspiration and
to get an idea of what Bauhaus designs visually looked like.
Fig. 8. Inspiration Pictures from Pinterest
Bauhaus (German for building houses)
- A German artistic movement which lasted from 1919-1933.
- Its goal was to merge all artistic mediums into one unified approach, that of combining an individual’s artistry with mass production and function.
Characteristics of Bauhaus Design
-
Simplicity
-
Functionality
-
Abstract
-
Angular
-
Geometric
-
Bold Colours
-
Modern Materials
Ideation
Digitisation
I started my process in Illustrator right away, experimenting on different designs for the headline's type expressions.
My first concept is the one in the top left. I aimed to create thought
bubbles using straight lines instead of rounded edges, reflecting
Bauhaus's preference for geometric styles. However, the idea didn’t
translate well and doesn’t clearly resemble a thought bubble.
Since "Bauhaus" means "building house" in German, I explored another
concept by extending the ends of the letters to create a house outline
around the word "Bauhaus." Then, I tried doing different layouts.
Fig. 10. Drafts for Bauhaus Text Layout (PDF)
Blocking
Fig. 11. Layout Blocking for Bauhaus Text (PDF)
Final Outcome
Fig. 13. Final Layout - Without Grid (PDF)
Fig. 14. Final Layout - With Grid (JPEG)
Fig. 15. Final Layout - With Grid (PDF)
HEAD LINE
Typeface: Futura Std
Font/s: Futura Std Medium
BODY
Typeface: Futura Std
Font/s: Futura Std Book
Type Size/s: 9 pt
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 55-60
Alignment: Left justified
Margins: 10 mm top + left + right + bottom
Columns: 2
Gutter: 5 mm
[Feedback]
Week 6 (28/10/24)
General Feedback:
For Task 2, we started by sketching out 4 ideas for our chosen editorial
text. I chose to do the Bauhaus one.
Week 7 (4/11/24)
General Feedback:
Still exploring different concepts as I felt like my ideas are still not
solid enough.
Specific Feedback:
I have shown one sketch for Bauhaus editorial text to Mr Max, but my
direction is not really clear so I continued working on my sketches.
Week 8 (11/11/24)
General Feedback:
This week I mainly worked on finalising my chosen sketch and worked on
the blog.
Specific Feedback:
My progress for this task is quite slow, I need to work faster and catch
up.
[Reflection]
Experience
I get to experiment with different concepts when trying to create
Bauhaus-inspired designs. I focused on geometrical forms and how well the
entire composition express the text headline well.
Observation
I noticed that incorporating straight lines and simple shapes aligned
well with the Bauhaus aesthetic, but translating abstract concepts like
thought bubbles into geometric forms was challenging for me.
Findings
I learned that simplicity is key to good Bauhaus-inspired designs, even
small adjustments can make impact how a concept is perceived by other
people.
[Further Readings]
[Article] What Font Should I Use? 5 Principles for Choosing and Using Typefaces
This short article is published by Dan Mayer, on the 14th of December 2019. In the article, he shared tips on how to select, apply and mix different fonts.
1. Dress For The Occasion
2. Know Your Families: Grouping Fonts
3. The Principle of Decisive Contrast
4. A Little Can Go A Long Way
5. Rule Number Five is 'There Are No Rules'
Thank You
