Typography / Task 2: Typographic Exploration & Communication

07.10.2022 – 21.10.2022 / Week 6 – Week 8
Hewr Khaled Mohamed Walid Bayazid / 0337650
Typography / B' of Mass Comm (Hons) (Broadcasting)
Task 2: Typographic Exploration & Communication

---

LECTURES

Refer to Task 1.

---

INSTRUCTIONS

TASK 2 / Typographic Exploration & Communication

"In this task you will be asked to express typographically the content provided in a 2-page editorial spread (200mm x 200mm per page). Choose 1 from the 3 text options provided. No images are allowed. However, some very minor graphical elements, i.e. line, shade, etc. might be allowed."
–––

Research
Before working on the task, the first thing I did was look at various visual references of editorial spreads for inspiration as I thought it would help me in developing my ideas.

Fig 1.1, Editorial Spreads - Visual References, (02/10/2022)

I also decided to read the original article of the text I chose 'Follow the Code' to help me better understand the context of the text, which I thought would help me express the text more accurately.

Fig 1.2, A Designer's Code of Ethics, (02/10/2022)

I also did some further readings (refer to Fig 5.1) to aid me in my task.

Initial Process (layout sketches, type expression exploration & text formatting)

After doing research, I first tried to sketch out different layouts. However, I found myself struggling to draw much as I could not visualise how much of the space would the text cover.

Fig 2.1, Quick Layout Sketches, (03/10/2022)

I decided to go on Illustrator first to explore different expressions of the headline, as I work best through trial and error.

Fig 2.2, Type Expression Digitisation, (03/10/2022)

These were the initial ideas I came up with.

Fig 2.3, Initial Type Expression Variations, (03/10/2022)

However, I was unhappy with my initial work so I explored further, with my initial designs as a starting point. After making many amendments, I came up with the following:

Fig 2.4, Type Expression Variations (2), (03/10/2022)

I was happy with what I've created, so I moved on to text formatting. I first tackled the body text, trying out different typefaces, kerning and tracking, achieving cross alignment and so. I did this using multiple layouts to allow myself options and decide what I liked best.

Fig 2.5, Text Formatting Process, (04/10/2022)

As I was formatting the text, I made sure to keep in mind the headline and how to express it through the body text as well. I thought having the body text organised to resemble stairs best expressed the word 'follow' as shown below.

Fig 2.6, Text Formatting Process (2), (04/10/2022)

Layouts

After formatting the text, I started exploring different layouts. During the first week, I created 3 different layouts, 2 versions each.

Fig 3.1, Initial Layouts, (05/10/2022)

Fig 3.2, Initial Layouts (Blocks), (05/10/2022)

While I liked the first layout, I thought the 'follow the code' expression may not be very readable. However, while I often prefer justified text as it looks neater, I decided to challenge myself with something different / I am not comfortable with, and I was very happy with the formatting of the text.

For my first progression check, I narrowed down my options to layouts #2 (version 1) and #3 (version 2).

Fig 3.3, Shortlisted Layout #2 – Version 1, (05/10/2022)

Fig 3.4, Shortlisted Layout #3 – Version 1, (05/10/2022)

As Mr. Vinod's feedback was positive, I proceeded by creating more variations and exploring more options.

Fig 3.5, New Layouts, (09/10/2022)

Fig 3.5, New Layouts (Blocks), (09/10/2022)

For my first layout, while I first thought about crossing it off, I decided to try to make it more legible by amending the headline type expression. After increasing the size of the letters 'o', I thought the headline was more readable but I did not like it compared to the previous versions.

As for the second layout, I created a new version but I was not very happy with the type expression so I did not explore further.

I personally liked the third layout the most, so I focused most of my time on improving it.

I thought it was lacking some movement, which is why I decided to rotate the letter 'w'. After rotating it, the layout seemed a lot more engaging to me. The rotated letter 'w' also formed 3 arrows which I thought expressed the word 'follow' even better.

Fig 3.6, Shortlisted Layout #3 – Version 5, (09/10/2022)

However, the fact that the headline and the body text were separated, each in a different page, made the layout seem a little too typical. Hence, I decided to split both the headline and body text to have them both on both pages.

In addition, as Mr. Vinod mentioned we should be careful when we place the headline in the centre (as it will affect its readability), I made sure to place the headline in a way that would not hinder the reading experience. When the first page is looked at separately, the letters 'follo' are visible, which I think are decipherable with the addition of the arrows. The second page alone shows the letter 'w', rotated, indicating an arrow, which I believe would not cause confusion compared to if the letter was not rotated.

Moreover, as the spread would be folded, I placed the headline while keeping that in mind.

Fig 3.7, Improved Layout, (10/10/2022)

Margins: 14 mm
Gutter: 10 mm

Head

Font: Futura Std

Body

Font: Futura Std

Type Size: 7 pt

Leading: 9 pt

Paragraph spacing: 9 pt

Characters per-line: 53

Alignment: left justified

FINAL Editorial Spread

Fig 4.1, Final Editorial Spread, (10/10/2022)

Fig 4.2, Final Editorial Spread (PDF), (10/10/2022)*

Fig 4.3, Final Editorial Spread (Grids), (10/10/2022)

Fig 4.4, Final Editorial Spread (Grids) (PDF), (10/10/2022)*

*Note: PDF files appear to be unclear, but are exported correctly (300 ppi), which is evident once the files are downloaded.

---

FEEDBACK

WEEK 6
General feedback: When commenting on the work of others, Mr. Vinod mentioned we should generally avoid placing anything in the centre as the editorial spread is meant to be folded, and thus would affect legibility.
Specific feedback: Interesting, I like it. Excellent work.

We also had to answer the following questions as we gave peer-to-peer feedback (which I kept in mind as I worked on my editorial spread as well):

Type Expression

1. Do the expressions match the meaning of the words?

2. Are the expression well-crafted (crafting/lines/shapes)?

2a. Do they sit well on the art-board?

2b. Are the composition engaging?

3. Are there unnecessary non-objective elements present?

4. How can the work be improved?

Text Formatting

1. Is kerning and tracking appropriately done?

2. Does the font size correspond to the line-length, leading & paragraph spacing?

3. Is the alignment choice conducive to reading?

4. Has the ragging been controlled well?

5. Has cross-alignment been established using base-line grids?

6. Are widows and orphans present?

WEEK 7
We submitted our final editorial spread this week so no feedback was given regarding Task 2.

---

REFLECTION

Experience
I personally really enjoyed the process of designing the editorial spread. Compared to our previous task (Text Formatting Layout), we had 3 options of text to pick from, as well as more space to play around with. First, as I was doing my research, I found myself growing more eager as I encountered many interesting layouts – I even considered designing some on my own. What I found challenging, however, was creating something unique as we all were using the same 3 different texts. 

Observations
By observing my peer's work, I have realised that the same text can be expressed in various ways. I also realised that one's personality is often reflected in their work. Another thing I observed is that we unintentionally imitate work that we have previously seen – as the sample editorial spread provided used the Bauhaus text, when I was first brainstorming ideas before selecting my final text, I found my ideas greatly influenced by the sample's design, which is why I decided to choose a different text.

Findings
Throughout Task 2, I found out that, first, readability/legibility is just as important as the aesthetics of the design – the two must be considered equally in order to create good design. Another thing I learned is the importance of thinking out of the box, which can only be achieved by researching and reading – the more you see, the more dynamic your ideas and creations will be.

---

FURTHER READINGS

Fig 5.1, Typographic design: Form and communication (2015)

As Mr. Vinod strongly suggested the book 'Typographic design: Form and communication', I decided to read sections of it on a weekly basis.

Fig 5.2, Syntax and Communication: Typographic Space (96 p.)

This week I decided to read about typographic space as it is relevant to this task. The text talks about how to utilise space effectively to achieve dynamic design. Here I've learnt the importance of visual compensation, which is achieved by 'balancing elements against each other, adjusting their sizes, weights, spatial intervals and other visual properties until unity and equilibrium are achieved'. I believe something we often disregard or do not pay enough attention to is void / empty space, and its importance in design. Reading this text has reminded me to keep space in mind as I work on my spread.

Fig 5.3, Syntax and Communication: Typographic Space (98-99 p.)

This page focuses on alignment, which I thought was important to read as I work on my editorial spread. Something I've learned while reading this was the importance of optical adjustment – aligning elements based on how the eye visually perceives it. This means, at times we might have to adjust the alignment ourselves rather than only relying on alignment functions.

Fig 5.4, The Typographic Expression: Function and Expression (120 p.)

The last page I read highlighted the idea that while we must consider all these guides and rules we learn about in typography, we should not simply follow them by the book. This is important to me as I often want to do everything 'correctly', however that is not how I should approach design/typography. Reading this section has reminded me to be creative and think outside of the box as I was working on my spread.

Highlight: "A single approach to typographical design, induced by stylistic convention and predetermined formulas, is a routine activity lacking the vitality of meaningful typographic invention."