TYPOGRAPHY - TASK 2: TYPOGRAPHIC EXPLORATION AND COMMUNICATION

TYPOGRAPHY - TASK 2: TYPOGRAPHIC EXPLORATION AND COMMUNICATION

27/10/2025 - 14/11/2025 (Week 6 - Week 8)
Nur Adila binti Nazary / 0377352
Typography / Bachelor in Design (Honours) in Creative Media / Taylor's University
Task 2

TABLE OF CONTENTS

1) Lecture
2) Instructions
3) Process work
4) Feedback
5) Reflection
6) Further reading

LECTURE

All lecture notes are done in the Task 1.

INSTRUCTION

PROCESS WORK
TASK 2: TYPE EXPRESSION / TEXT FORMATTING
We had to make a 2 page layouts based on our understanding and knowledge from Task 1.
There were 3 editorial text options to choose from:
1) Bauhaus: The Movement That Changed Design
2) Punk’s Design Revolution: Breaking the Rules
3) Designing Change: How Designers Shape the World We Live In

RESEARCH
We had to choose only 1 text option but, before I chose any text option, I went through Pinterest to see what type of style is it so that, I can choose the most interesting one for me to do.

1) Bauhaus: The Movement That Changed Design

Figure 1. Bauhaus image reference #1

Figure 2. Bauhaus image reference #2

Figure 3. Bauhaus image reference #3

I can say that Bauhaus is a very straight forward design with lots of shapes and blocks. Most of them would adjust the shape to make an interesting design. It is a minimalistic style. Mostly explored through the colours and lines as well.

The only downside is that, in my class a lot of people choosing this since its the simplest one.

2) Punk’s Design Revolution: Breaking the Rules (CHOSEN)

Figure 4. Punk image reference #1

Figure 5. Punk image reference #2

Figure 6. Punk image reference #3

The punk design is the one that intrigues me the most with its creative design. Its a bit more messier than the Bauhaus style. The design that goes into the punk style is very sharp edge yet blocky at the same time. With this style, I can explore more on the elements, fonts and the arrangement of the layout.

3) Designing Change: How Designers Shape the World We Live In

Figure 7. Design change image reference #1

Figure 8. Design change image reference #2

Figure 9. Design change image reference #3

Based from my research, it seems like the 'design change' style layouts is the most minimalistic out of the other two text option. They explored more on the arrangement of letters, the rotation of it and all. But even with those simple adjustments, they can make an interesting layout

The only downside is, I think that it is TOO minimal.

In the end, I chose to do punk since I can explore more through the design and layouts.

IDEATION
In the punk style, generally, from what I see in pictures and inspirations I see a lot of sharp edges, slanted fonts, ripped out notes or pages and a bit of a messy style.

INSPIRATIONS:

Figure 10. Punk inspiration #1

Figure 11. Punk inspiration #2

Figure 12. Punk inspiration #3

Figure 13. Punk inspiration #4

Figure 14. Punk inspiration #5

MY IDEA:
Based on what i found in my inspiration category, I wanted to do something very sketch-like or scratchy-like illustration for the graphics, maybe a guitar or a speaker. Make some ripped paper graphic to match with the sketch. The font must be messy and inconsistent but for the text will be a normal simple font for readability.

MY SKETCHES:
My first few sketches was to do the main titles which was "Punk's Design Revolution: Breaking the Rules". The main focus was to have that raw and rebellious energy of a punk design by making rough, sketch-like graphics.

Title sketches:

Figure 15. Punk title sketch #1

Figure 16. Punk title sketch #2

Figure 17. Punk title sketch #3

After doing some sketches, I started to make the layouts and more titles for it. The sharp edges, uneven strokes and a slight messy style layout were explored to emphasized the punk style. To stick with the theme, elements like the electric guitar and ripped paper textures were added to bring that grungy feel. The messy font for the main title and then withe the clean and simple typeface for the body text is to maintain the readability while still keeping the visual style of punk.

Layout sketches:

Figure 18. Punk layout sketch #1

Figure 19. Punk layout sketch #2

Figure 20. Punk layout sketch #3

Figure 21. Punk layout sketch #4

COMMENTS FROM MR MAX FOR SKETCHES:
Try to digitize all of the 4 layout sketches in Adobe Illustrator then show it again to Mr. Max.

AFTER DIGITIZATION:

Figure 22. Digitized layout #1

Figure 23. Digitized layout #2

Figure 24. Digitized layout #3

Figure 25. Digitized layout #4

COMMENTS FROM MR MAX FOR DIGITIZED LAYOUT:
For layout #2, need to add a white star at the bottom right
For layout #3, the word 'Punk's' should be rearrange so that readability is better. Change the typeface of the 'design revolution' to the same box style typeface like the 'Punk's'. Make sure that the black box has more space for text box.
For layout #4, add a ripped page diagonally from bottom left to top right, there should be a white space in the middle. The word 'Punk's Design Revolution' should be at the bottom left and then 'Breaking the Rules' should be place at the top right.

LAYOUTS AFTER FEEDBACKS:

Figure 26. Digitized layout after feedback #2 (CHOSEN)

Figure 27. Digitized layout after feedback #3

Figure 28. Digitized layout after feedback #4

LAYOUTS WITH TEXT BOXES:
Mr. Max told me that I need to put the textboxes into all of the layouts and he can choose one from there. All textboxes are justified with added kerning and leading to get rid of the rivers in the paragraph.

LAYOUT #1 (CHOSEN)

Figure 29. Layout #2

HEAD

- Font/s: Hit me, punk! 14 Regular and Helvetica Punk Regular 

- Type Size/s: Hit me, punk! 14 Regular for P (585.4586 pt), U (465.7001 pt), N (335.7814 pt), K (259.6925 pt), 'S (224.3537  pt) and Helvetica Punk Regular (72 pt)

 

BODY

- Font/s: Bembo Std Semibold

- Type Size/s: 24 pt

- Leading: 22 pt

- Paragraph spacing: 24 pt

- Characters per-line: 47-58

- Alignment: Justify with last line aligned left

 

Page Margins

(Left page)

- 36 px + 36 px + 36 px + 36 px

- Columns: 3

- Gutter: 217 px

(Right page)

- 36 px + 36 px + 36 px + 36 px

- Columns: 3

- Gutter: 217 px

LAYOUT #2

Figure 30. Layout #3

HEAD

- Font/s: Anonymous Punk Regular and Helvetica Punk Regular

- Type Size/s: Anonymous Punk Regular for P (981.4177 pt), U (389.8459 pt), N (339.431 pt), K (232.402 pt), 'S (232.402 pt), Helvetica Punk Regular (123.7992 pt) and Anonymous Punk Regular (94.6457 pt)

 

BODY

- Font/s: Bembo Std Semibold

- Type Size/s: 24 pt

- Leading: 22 pt

- Paragraph spacing: 24 pt

- Characters per-line: 43-47

- Alignment: Justify with last line aligned left

 

Page Margins
(Left page)

- 36 px + 36 px + 36 px + 36 px

- Columns: 1

- Gutter: 12 px

(Right page)

- 60 px + 76 px + 52 px + 36 px

- Columns: 2

- Gutter: 76 px

LAYOUT #3

Figure 31. Layout #4

HEAD

- Font/s: Anonymous Punk Regular and Helvetica Punk Regular

- Type Size/s: Anonymous Punk Regular for P (821.2086  pt), U (346.7882  pt), N (360.1041  pt), K (377.4632  pt), 'S (201.0786  pt) and Helvetica Punk Regular (84.5501 pt and 89.2593 pt)

 

BODY

- Font/s: Bembo Std Semibold

- Type Size/s: 24 pt

- Leading: 22 pt

- Paragraph spacing: 24 pt

- Characters per-line: 91-102

- Alignment: Justify with last line aligned left

 

Page Margins

(Left page)

- 51 px + 36 px+ 36 px + 650 px

- Columns: 1

- Gutter: 12 px

(Right page)

- 620 px + 36 px + 36 px + 45 px

- Columns: 1

- Gutter: 12 px

In the end, Mr. Max chose Layout #2 to be used as my final layout. He told me to add two separate lines to add the text box. He specifically said to use justified and try to kern and use leading for a better readability and to increase the visual balance.

Layout #2 had the most creativity and balance compared to the others. It wasn't overcrowded with graphics that allow the text box to stand out and remain easy to read. The other layouts were either too simple or had too many visual elements. This balance of design and readability was the main reason why Mr. Max chose Layout #2 as the final design.

FINAL OUTCOME
TASK 2 EXERCISE, LAYOUT 2, JPEG (WITHOUT BASELINE):

TASK 2 EXERCISE, LAYOUT 2, JPEG (WITH BASELINE):

TASK 2 EXERCISE, LAYOUT 2, PDF (WITH BASELINE AND WITHOUT):

FEEDBACK
Week 6:
General feedback: Mr. Max specifically mentioned about the things and requirements on we need in Task 1 before we submit it. Then, Task 2 was briefed to us on what we need to do, which was to make 3 headline sketches (minimum).

Week 7:
General feedback: Mr. Max told us about the deadline for the Task 2 and that we need to keep up with his timeline. We have to continue what we have and show it back to him for some feedback. Mostly all consultation.
Specific feedback: Mr. Max approved my designs, but some adjustments are needed then after that just need to do the layout and do the justify, kerning and leading for it then send it back to him for approval.

REFLECTION

Experience
For this task, it felt familiar since it had some similarities with Task 1, which made the process smoother and more enjoyable. The skills that I learned previously really helps a lot, but designing the amin titles was still challenging because there were so many idea and options to explore. It became a bit overwhelming at times, but with patience and getting some feedback from friends and using Pinterest for inspiration, the final outcome came out together nicely. I can see clear improvement from Task 1 since I was able to fix earlier mistakes through practice and consistency.

One thing I liked about Task 2 was the freedom to design across two pages (a spread). With this, it allows more space to explore different styles and layouts, which made the creative process more fun and experimental.

Observations
Throughout this task, I notice that it is important to be careful when using graphics. Too many visual elements can really distract the reader from the main text or even ruin the whole design. While Task 2 allowed more creative freedom and exploration, it also reminded me that simplicity and following design principles are still essential for maintaining balance and clarity.

Findings

From this task, I learned that creativity work best when balance with structure. Its not just about making something look pretty, but also making sure its readable and organized. I also found that small adjustments in layout and the text placement can really change how a design feels. Task 2 helped me understand how to combine creative expression with proper design principles to achieve a more refined outcome.

FURTHER READING
Extra reading:
archive.org
Based on my reading in archive.org, the website tells us a lot about how typography has always evolved alongside technology and culture.

Before:
The Industrial Revolution really did influence typography. In that era, new printing technologies such as steam powered press that helps to mass produce posters, newspapers and advertisements. With this, there's an introduction to display of typefaces such as bold or decorative letters that grab peoples attention.

Figure 32. Old style typefaces #1

These bold and decorative typefaces replaced the neat serif styles such as Baskerville or Garamond. The designers began caring more about the catching attention and showing emotion from the typefaces rather than just being easy to read.

Figure 33. Old style typefaces #2

After:
Now with computers, designers started experimenting more with typography. Now, software like InDesign gave designers full control over how text and typefaces look. With this, it made design more open to everyone. They can make their own layouts and play with new typefaces.

Figure 33. New style typefaces #1

Figure 34. New style typefaces #2

My comments:
Its really interesting to see how typography has evolved from being very strict to its rules to something more open and creative. Each era brought new ideas and technologies that helps typography change on how its designed and communicated. I like that now typography allows more personal expression that gives designers the freedom to explore more.