Typography - Task 2: Typographic Exploration and Communication

Typography - Task 2: Typographic Exploration and Communication

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 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 2.1.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 2.1.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 2.1.3 Contrast

INSTRUCTIONS

TASK 2: TYPOGRAPHIC EXPLORATION AND COMMUNICATION

1. Research

In Task 2, we were given three texts to choose from for our assignment, and I selected the title "Unite to Visualize a Better World." I chose the word "unite" to emphasize its role as a key theme in the caption. I initially turned to Pinterest for similar design inspiration, but after a round of searching, I found it challenging to locate relevant references specifically for this title. So, I decided to focus on exploring title designs instead. I came up with the idea of separating some letters in "unite" to visually convey a sense of unity among them.

Figure 2.3.1 Research for Layout Design

Figure 2.3.2 Research for 'Unite' Title

2. Layout Progress

After some research, I began designing my title in Adobe Illustrator while formatting the text in InDesign. However, I found it didn't look appealing enough.

Figure 2.3.3 'Unite' Heading (3/11/2024)

Figure 2.3.4 Typographic Layout Idea (5/11/2024)

After receiving feedback from Ms. Vitiyaa, who mentioned that the layout appeared flat, I made further adjustments to improve the assignment by redesigning certain elements.

Figure 2.3.4 'Unite' Headings (8/11/2024)

I tried to add the text for each spread in Adobe Indesign. However, after experimenting with various text formatting options, I still felt unsatisfied with the overall layout and design. Each attempt brought me closer to my vision, but something was still missing in terms of balance and cohesion. I tried adjusting font styles, refining the alignment, and even playing with spacing to create a more harmonious look, but none of these changes fully captured the essence I wanted for.

Figure 2.3.5 Typographic Layout Ideas (8/11/2024)

However, after experimenting with various text formatting options, I still felt unsatisfied with the overall layout and design. Each attempt brought me closer to my vision, but something was still missing in terms of balance and cohesion. I tried adjusting font styles, refining the alignment, and even playing with spacing to create a more harmonious look, but none of these changes fully captured the essence I wanted for.

3. Final Outcome

In the end, I finalized my design with a minimalist approach that highlighted "unite" in a way that felt true to the theme. I increased the white space strategically, giving each section room to breathe, which ultimately enhanced readability. I also refined the alignment of headings and subheadings with the body text, creating a more visually balanced structure.

FINAL OUTCOME FOR TASK 2 ASSIGNMENT:

Figure 2.3.6 'Unite to Visualize a Better World' Final (12/11/2024)

Figure 2.3.7 'Unite to Visualize a Better World' Final (PDF) (12/11/2024)

Figure 2.3.8 'Unite to Visualize a Better World' Final with Grid (12/11/2024)

Figure 2.3.9 'Unite to Visualize a Better World' Final with Grid (PDF) (12/11/2024)

HEAD LINE

Typeface: Gill Sans Std

Font/s: Gill Sans Std Bold

Type Size/s: 397 pt

Leading: 0 pt

Paragraph spacing: 0

SUBHEADLINE

Typeface: Adobe Casion Pro

Font/s: Adobe Casion Pro Semibold

Type Size/s: 18 pt

Leading: 22 pt

BODY

Typeface: Adobe Casion Pro

Font/s: Adobe Casion Pro Regular

Type Size/s: 14 pt, 9.5 pt

Leading: 11 pt

Paragraph spacing: 11 pt

Characters per-line: 55-62

Alignment: Left Justified

Margins: 12.7 mm top, 24 mm bottom, 12.7 mm left + right

Columns: 2

Gutter: 2 mm

FEEDBACK

Week 6

Specific Feedback: For the Helvetica assignment, I need to enlarge my image and align it with the letter "a." Additionally, I should increase the size of Arthur's name. There were no major issues with my leading or kerning.

General Feedback: We need to complete and finalize Task 1's e-portfolio, which includes all lectures and exercises, by the end of today. We should also begin Task 2 soon.

Week 7

Specific Feedback: Ms. Vitiyaa mentioned that my Task 2 layout appears flat. While the leading and spacing are fine, it lacks enough visual appeal to capture the audience's attention.

General Feedback: The layout might need further adjustments to enhance visual interest, though the consistency in leading and kerning is good.

REFLECTIONS

Experience:

This task felt more challenging compared to the last one, "I am Helvetica," which I felt was my strongest exercise. Despite the extra difficulty, "I am Helvetica" gave me a solid foundation to tackle this task. I made more mistakes this time, like struggling to balance letter spacing, but even with these challenges, I managed to produce a satisfying final result. Ms.Vitiyaa's feedback was incredibly helpful, reminding me to take note of key adjustments. I’m also becoming more comfortable with Adobe InDesign, no longer needing to replay the tutorial videos as often.

Observation:

I noticed that getting a balanced layout with both text and graphics is much harder than I expected. The space between letters can’t be too tight or too loose, or it affects readability. Following the tutorial, I initially tried a three-column layout, but after two attempts, I realized it was tough to balance the kerning and spacing within those constraints. I also made mistakes like going beyond the page margins, which taught me the importance of staying within them to avoid issues with printing.

Findings:

I learned that typography requires more than creativity; it’s a detailed and sometimes time-consuming process. Relying only on the screen can lead to problems, as Ms.Vitiyaa encouraged us to print the layout to see how it actually looks on paper, reminding me that the final version always exists physically, not just digitally. Going forward, I plan to study more layout examples from other designers to improve my own skills and avoid the mistakes I made this time.

FURTHER READING

Week 6

Tips for Lettering Part I: Know Your Letterforms

1. Understand Type Classifications and Anatomy

Familiarize yourself with type classifications (e.g., Modern, Slab Serif) and features like aperture, x-height, and serifs.

For example:

Contrast between thicks and thins of the strokes — is the change from thick to thin smooth or abrupt?
vertical axis & stress — perfectly upright or sloped?
aperture — how open or closed is the space?
x-height & ascenders/descenders — what is the proportion between the different parts?
serifs — how are they bracketed, if at all?
terminals — how curvy or squared are they?
thickness — condensed? wide?
density — open, thin calligraphic strokes? fat, tightly spaced strokes?

Figure 2.6.1 Examples

2. Focus on Proportions and Relationships

Study proportional patterns among similar characters for a refined look (e.g., how B and R, E anf F, e and c differ).

3. Refine for Optical Balance

Use visual adjustments (like thinning horizontal strokes) to achieve balance and avoid clunkiness.

For example:

Horizontal strokes look thicker than vertical strokes of the same width. Horizontal strokes are made thinner to balance the optical illusion.

Figure 2.6.2 Comparison

Week 7

Thinking with Type: A critical guide for designers, writers, editors, & students

Vertical Text: Stacking Roman letters, especially lowercase, looks uneven due to ascenders and descenders. Capital letters stack more stably, while rotating Latin text is an easier way to create vertical alignment.

Figure 2.6.3 Vertical Text Example

Enlarged Capitals: Enlarged initials invite readers into a text. Historically, they began in manuscripts and are now easily implemented with digital tools. Drop caps create emphasis by occupying multiple lines but need careful spacing.

Figure 2.6.4 Enlarged Capitals

Marking Paragraphs: Paragraphs are visually separated by indents or spaces. Standard practice includes em indents or paragraph spacing, while page layout programs offer precise control for consistent formatting.

Search This Blog

Alicia Lo Yann Wei (0357917)