Typography Task 2: Typographic Exploration & Communication

At first, I felt a bit lost when deciding which article to focus on for my template design. To get some inspiration and clarity, I started studying both Article 1 and Article 2 by exploring layout and design ideas on Pinterest. This helped me understand the different visual directions I could take for each article.

Figure 3.1 Layout references study for Article 1 and Article 2 from Printerest

3.2 Ideation

I began by sketching six layout ideas for Article 2, which follows a punk design style. However, I wasn’t fully satisfied with the results. To improve, I pushed myself to explore more possibilities and ended up creating four additional layout designs—some for Article 1 with a Bauhaus style and others again for Article 2. This gave me a total of ten layout sketches and a clearer direction moving forward.

Figure 3.2 Headline + Text Layout Sketches (1)

I decided to keep two designs from my initial sketch exploration—Sketch 1 and Sketch 2 from Article 2’s punk design. Although I wasn’t fully satisfied with the overall results, these two had potential. So, I moved forward by developing four new layout designs: a mix of styles for both Article 1 (Bauhaus design) and Article 2 (Punk design). This brought my total to ten layout sketches, giving me more variety and a better sense of direction for the final design.

Figure 3.2.1 Headline + Text Layout (2)

Figure 3.2.3 Sketches with body text designs

After a consultation with Mr. Max, he suggested that I could try working with Sketches 1, 2, and 8. Taking his advice, I moved on to adding the body text and focused on refining the details, working on the alignment, kerning, and leading. I also experimented with different font sizes, depending on the layout design, to see what would create the best visual balance and readability.

After several rounds of adjusting the layout, tracking, and kerning, I decided to go with Design #1 as my final choice.

3.3 Final Outcome

HEAD LINE

Typeface: ITC Garamond Std

Font/s: Ultra

SUB HEADLINE

Typeface: ITC Garamond Std

Font/s: Ultra

Type Size/s: 24 pt

BODY

Typeface: Bembo Std

Font/s: Regular

Type Size/s: 10 pt

Leading: 12 pt

Paragraph spacing: 9pt

Characters per-line: 50-60 characters

Alignment: Left justified

Margins (px): 93 top, 93 bottom, 68 inside, 68 outside

Columns: 2

Gutter: 30px

Figure 3.3 Final text formatting and expression layout (JPEG)

Figure 3.3.1 Final text formatting and expression layout (PDF)

Figure 3.3.2 Final text formatting and expression layout with baseline grid (JPEG)

Figure 3.3.3 Final text formatting and expression layout with baseline grid (PDF)

4.0 FEEDBACK

Week 6

General Feedback:
Mr. Max demonstrated how we can take our initial designs and export them into InDesign for further refinement—adjusting text font, font size, kerning, tracking, and leading.

Personal Feedback:
Sketches 1 and 2 were approved during the first consultation, and Sketch 8 was approved in the second. I began working on all three designs (1, 2, and 8) for further development.

Week 7

General Feedback:
Mr. Max mainly focused on consultations this week, checking each student's progress on Task 2 and offering constructive feedback to help guide improvements.

Personal Feedback:
For Sketch 1, Mr. Max suggested changing the grey background to white and adjusting the gutter and text balance in the layout.
For the Bauhaus design, he advised extending the "h" to avoid it visually resembling the letter "n." He also recommended refining the spacing around the text for better overall alignment and readability.

5.0 REFLECTION

Experience

Task 2 felt quite similar to Task 1 in terms of layout and formatting—except this time, we didn’t use any images. That small change actually made it more mentally challenging for me, as I had to rely entirely on type to create visual interest and hierarchy. Without pictures to support the design, every decision about font size, alignment, spacing, and text balance became even more important. It pushed me to think more critically about typography as a design tool. The process involved more careful adjustments, but with the help of feedback and guidance from Mr. Max, I was able to refine my designs and gain a deeper appreciation for the subtle impact of layout decisions.

Observations

Task 2 made it clear that the focus was shifting more toward the visual design aspect of typography itself. Without relying on images, the layout depended entirely on how we use type—its size, weight, alignment, and spacing—to create visual interest and guide the reader’s eye. I noticed that every design decision, even small ones, had a stronger impact since the typography had to carry the full weight of communication and aesthetics. This task pushed me to think more critically about how text alone can create rhythm, emphasis, and balance in a layout.

Findings

From this task, I found that designing without images challenges me to rely fully on typography to convey structure and visual impact. Small adjustments in layout, spacing, and type choices can make a big difference in how effective and engaging the design becomes.

6.0 FURTHER READING

In Computer Typography Basics (2003), David Creamer explores how character formatting—such as font choice, size, weight, and style—directly affects readability and tone. He explains the visual impact of using all caps, small caps, or italics, and how subtle variations like bold or light weights can create hierarchy and emphasis within a block of text. These choices shape the reader’s perception before they even begin reading.

The difference in x-height, ascenders and descenders with the same font size of 24pt

The book also emphasizes paragraph formatting as essential to text flow and structure. It discusses alignment options (left, center, justified), paragraph spacing, indents, and line spacing (leading), showing how these elements can improve visual clarity and reading ease. Proper paragraph formatting ensures that content is not just legible but also well-organized and inviting on the page.

Column of text cross-aligning using baseline grids

Examples of paragraph alignment

Search This Blog

JIA XUAN'S E-PORTFOLIO