Typography : Task 2 - Typographic Exploration and Communication

27.04.2022 - 18.05.2022 ( week 5 - week 8 )
Len Hoi Yee / 0353430
Typography / Bachelor of Design in Creative Media
Task 2: Typographic Exploration and Communication 

---

Instruction 

Week 5 (27.04.2022 - 04.05.2022)

For this task, we are basically utilising the knowledge we have learnt from the previous task and applying it in task 2. We are to format a text and design the headline creatively. Out of the 3 texts that we were provided, I have chosen Visualise For A Better World to format.  

Visual research 

Fig 1.1 Type expression research 

Before diving into designing the headlines, I have done some research regarding type expression, so i could properly improve myself while designing the headlines. This is because i remember Mr. Vinod reminded us that, when we design type expression, we are to deliver a message through type expression to receivers, therefore, we have to be creative and innovative at the same time. From my research, I have explored a few designs and ideas about how i am going to digitalise the headlines for my text. 

Sketch For Type Expression 

Fig 1.1 #1 Sketch type expression, Week 6 (01.05.2022)

Fig 1.2 #2 Sketch type expression, Week 6 (01.05.2022)

Fig 1.3 #3 Sketch type expression, Week 6 (01.05.2022)

Fig 1.4 #4 Sketch type expression, Week 6 (01.05.2022)

Fig 1.5 #5 Sketch type expression, Week 6 (01.05.2022)

Fig 1.6 #6 Sketch type expression, Week 6 (01.05.2022)

The headline for the text that I have chosen is Vision for A Better World, hence, I have done a few sketches before digitalising it. Above are the ideas I had. After sketching all types of type expressions, I digitalised all of them so I could have more options to choose from. The details of each sketch will be discussed in digitalisation section.

Digitalisation For Type Expression

Fig 1.7 Digitalising #1 idea, Week 6 (04.05.2022)

While digitalising my sketches, I was trying out all the possible outcomes by arranging the texts differently because different arrangement brings out different idea. 

Fig 1.8 dividing the unwanted parts using Pathfinder, Week 6 (04.05.2022)

For this idea, i wanted to combine the letter 'u', 'a', and 'l' together by connecting each end strokes. By doing so, I had to put them together and use Pathfinder to divide the unwanted parts in order to get rid of the serifs. However, after struggling for few hours and I still couldn't perfectly merge the strokes together, so i decided to change the font. 

Fig 1.9 Using Pathfinder with a different font, Week 6 (04.05.2022)

When I changed a serif font to a san serif font, it was much easier to deal with and I could easily merged the downward strokes together using Pathfinder. 

Fig 1.10 Making shapes for design, Week 6 (04.05.2022)

For idea #5 and #6, I have used simple graphic elements such as rectangles to mimic the impression from my visual research. The rectangles are used to connect the letters together.   

Digitalised type expression outcome and explanation

Fig 1.11 First 4 digitalised type expression, Week 6 (04.05.2022)

#1: I have added a reflection to the word 'visual' to make it the focus point of the headline, at the same time bolded the word 'better' to also emphasise it that it's a "better" world.
#2: I have arranged the first four words of the headline at top left corner, and the 'l' in 'visualise' is in capital letter L with an extended leg so that the 'ise' are landed on it, the 'world' is left at the bottom bolded and extra larger font than the others to bring focus to it. Besides, I have added shadow to the 'Visualise'.
#3 & #4: These 2 designs were taken from reference from the research that I have done, I was playing around with the words by connecting their strokes together.

These 4 designs were inspired by the two pictures I have found in my research. So, I decided to play around and try out the possible outcome, who knows sit might turn out good. 

Fig 1.12 Extra 2 digitalised type expression, Week 6 (04.05.2022)

#5 & #6: For these 2 designs, I was playing around with the letters by connecting the u, a, and l together. They both have the same "visualise" word design, the difference is just the arrangement of the other words. 

For #5, I made the 'for a better' in a less bold and smaller font size so that the 'visualise' and the 'world' receive the most attention whereas #6's 'for a better' is arranged vertically next to 'visualise', as if it dropped off and leading to the word 'world', this creates a sort of movement. 

Week 6 (05.05.2022 - 11.05.2022)

Layout Progress

Fig 1.13 Layout progress, Week 6 (04.05.2022)

After designing the headlines in Adobe Illustrator, I have transferred them to Adobe Indesign in spread form with the body text provided to us. Some pages I have adjusted using 2 columns but some with 3 columns, so I played around with the body text, thinking about how to arrange the body text that best suits the type expression. 

Fig 1.14 Layouts, Week 6 (09.05.2022)

Shortlisted layout:

Fig 1.15  Layout 1, Week 6 (09.05.2022)

Personally, I feel this design is more towards graphic design kind of vibe which does not really express the headline meaning. However, i still found it interesting because I have never done a design like this before. 

Fig 1.16  Layout 2, Week 6 (09.05.2022)

  Fig 1.17  Layout 3, Week 6 (09.05.2022)

Layout 2 & 3 are the same, just the background of the first page is in black and white. Also, leaving the body text 

Fig 1.18  Layout 4, Week 6 (09.05.2022)

I wanted to make the 'WORLD' in the middle, and the body text flow from left to right, like a rainbow, therefore the subheadline is in an arch upwards position. 

Week 7 (12.05.2022 - 18.05.2022)

After receiving feedback, none of the layouts worked, and the type expression as well, as it was not well expressed, which is something that I have to work on. Therefore I started working on the type expression first before moving on to editing the body text. 

Fig 2.1 Original type expression, Week 7 (13.05.2022)

In order to make an amendment to my type expression, I needed to pick one type expression to work on, hence, I have decided to opt for this design to work on, since it is also the one and only that I preferred of all 4. In Mr. Vinod's opinion, I needed to pick a word from the headline and emphasise on the word while at the same time properly expressing its meaning. 

Visual research 

Fig 2.2 Globe, Week 7 (13.05.2022)

While exploring the idea of 'world' on the internet, I thought of the globe. So, I was thinking maybe I could make the impression of a globe that actually represents the world and has strong expression if I actually put that in my type expression. 

New design for type expression

 

Fig 2.3 New design #1, Week 7 (13.05.2022)

For #1, I have changed the 'o' to a hollow circle shape by using the subheadline as the scale bracket of the globe and a rectangle shape as the handle. This has given an impression of a globe. However, it is still not strong enough to be seen as a globe as it actually appears more like a magnifying glass.

To me, I felt it was appealing enough and neat for a layout. However, I still had to make some changes for the magnifying glass and the empty spaces. 

Fig 2.4 New design #2, Week 7 (13.05.2022)

For #2, I changed the font for 'Visualise' from a san serif font to a serif font and the 'for a better' is less bold too, in order to make the 'World' the main focus. I have also arranged the 'for a' 90 degree directly below the word 'Visualise' and 'better' beside the 'for a'. So, I have made the 'World' word into a circle and the subheadline as the scale bracket of the globe, mimicking the globe.  However, it is not as appealing as #1 even though the 'World' is in a larger size. 

Final Type Expression Outcome

Fig 2.5 Final Type expression - JPEG, Week 7 (13.05.2022)

Finally, I have come up with an idea where, I arranged the letters 'W', 'R', 'L', 'D' and the globe in a circular shape surrounding the other headlines, this creates a circular movement which is the impression of the world. Notice that I have also added a base for the globe so it does look more like a globe. Besides, I have also made the other headlines less bold, leaving the 'WORLD' bold because it is the main focus, and for the others, I gave them a slight bold font that complements the 'WORLD', not too bold which clashes with the 'WORLD', and not too thin which does not unite with the extra bold 'WORLD'.

Text Format 

Fig 2.6 Layouts , Week 7 (14.05.2022)

Judging the body text from the original 6 layouts that I have made, it is obvious that the font was not properly chosen, the font size and leading were not properly set at a readable and appealing effect, kerning and tracking were obviously not done, and the overall arrangement was a mess. 

Since I have done with my type expression ( Figure 2.6 ), it is time to edit the body text and the subheadline. 

Fig 2.7 Without kerning and tracking (left) and with kerning and tracking (right), Week 7 (14.05.2022)

While doing kerning and tracking, I had to also make sure that each line length was maintained in between 55-65 characters, with no widows or orphans left in a paragraph, and alignment as well. From the picture above, we can see that before kerning and tracking, the text is messy and ragged, but after kerning and tracking were done, the overall text is more neat and appealing.

Shortlisted new layouts: 

Fig 2.8 New Layout #1 , Week 8 (14.05.2022)

Fig 2.9 New Layout #2 , Week 9 (14.05.2022)

Although I have finalised the type expression that i was going to use, I was still trying out the other type expression by comparing which best suits the text. The answer would be layout 2, as it is more interesting from the way the letters are arranged, it definitely spiced things up and made the overall text more lively. 

Fig 2.10 Comparison between 2 columns and 3 columns, Week 7 (15.05.2022)

Here, after deciding to opt for the new layout 2, I was wondering " could it be better? ". Then, I tried out using 3 columns instead of 2 columns. In my opinion, I tried looking at it from afar, and I felt 3 columns were more appealing and creative than the 2 columns because the body text with 3 columns utilises the empty space more efficiently compared to the layout that uses 2 columns. So, I guess I would just go for that. 

Fig 2.11 Adjusting kerning and tracking, Week 7 (15.05.2022)

After deciding to go with 3 columns, there are some amendments to make, such as kerning to avoid awkward spaces between letters, I made sure to align the paragraphs together to look neat. 

Final Layout Outcome 

Fig 2.12 Final Layout - JPEG  , Week 7 (15.05.2022)

      Fig 2.13 Final Layout (with grids) - PDF  , Week 7 (15.05.2022)

Fig 2.14 Final Layout - PDF, Week 7 (14.05.2022)

Font : Futura Std (headline), ITC Garamond Std (body text), Adobe Caslon Pro (sub-headline)
Typeface : Futura Std Bold (headline) , Futura Std Medium (headline), ITC Garamond Std Book (body text), Adobe Caslon Pro Bold Italic (sub-headline)
Font size :  17pt (sub-headline),  9pt (body text)
Leading: 19pt, 11pt
Paragraph Spacing: 11pt
Average characters per line : 39~ 47
Alignment: Left justified, left align
Margins : 12.7mm (top, bottom, left, right)
Columns : 2 (page 1), 3 (page 2) 
Gutter (for columns) : 5mm

Feedback 

Week 7 (11.05.2022)

General Feedback : 
The type expression is not properly expressed, and the paragraph spacing in the body text is large. There is no idea and expression in the type expression I made. The distance of the columns must be the same. It is not advisable to start the first sentence with a hyphenation. A good design looks for a good alignment, and then get a good layout.  

Designers are problem solvers, is to make communication more effective. Designers are often looked down upon and simply become a decoration. 

Specific feedback : 
For #1, It is just a layout there's no idea in the expression. There's a lot of empty space. 

For #3, I was just emphasising the word 'world', it doesn't represent the word 'world', there's no idea in it, the body text is well-formatted, however, the paragraph spacing is too large. 

For #4, It is a floating layout, there's different line length to the body text.

The amount of space in comparison to the gray matter that is on the page is overwhelming, not well balanced, the ratio is either one dominant or one subservient, but here the content is more important so the gray space tends to be more dominant. 

Reflection

Experience 

In my opinion, I felt this task was much tougher than task 1, as I was struggling with the type expression the most. In my sketches, I was very hyped with all my ideas, but then i forgot about the purpose of a type expression. It is to convey messages to the audience, hence, as a designer, I had to deliver the message properly and clearly to the audience through interesting and creative design. Even a simplistic work is enough to deliver the message, so why complicate your work? I was having a hard time trying to express the headline properly. Then after receiving feedback from Mr.Vinod, tons of research and peers' opinion, I definitely gained some ideas and I have spent a lot of time trying out different design and layout for both type expression and text format. Thankfully, I was able to come up with a design that I personally am satisfied with. Sometimes even the smallest detail affects the overall layout. 

Observation

When aligning the paragraphs to each other, it does affect the overall layout compared to a layout that has the paragraphs scattered all over. When working on my final layout, I was adjusting kerning and tracking, I have observed not too much kerning will make the entire row of words cramp together in a sentence, therefore we must be careful with that, and that is when hyphenation comes in handy. 

Finding 

Type expression is important as it is the first impression for the readers to understand the whole passage. It not only helps to convey message but will also lift readers' mood while reading the passage. 

Further Reading

Fig 3.1 Flush left, centered, justified

Yes, justified does help tidy the ragged text and it is mostly for textbooks, which I feel it would be boring if even magazines use justified text, because as a student HAHA I definitely can't stand reading textbooks. On the brightside, when large amount of text is cramp in a page, justified text is more appealing and readable.  

Fig 3.2 Contrasting type sizes 

Space is important in text. When gray matter is dominant, then the spaces must be properly and efficiently used in order to achieve well-balanced for both white space and gray matter. Therefore, it is important to balance them well. 

Fig 3.3 Layout

A good layout requires well management of white space, bad layouts have bad alignment and bad management of white space. This will cause the entire layout to be messy and unappealing.