Typography Task 2 / Typographic Exploration and Communication

24.09.2021 - 08.10.21 (Week 5 - Week 7 )
Chung Jia Xuan / 0346630 / Bachelor of Design in Creative Media
Typography
Task 2 / Typographic Exploration and Communication (Text Formatting and Expression)

---

LECTURES

Week 5 

Typography: Task 2 - Typographic Exploration and Communication

Mr Vinod explained about what we have to do for Task 2 in the recorded video. He demonstrated the process of digitizing the heading in Adobe Illustrator and opened it in Adobe Indesign. He also told us to start with a few sketches before doing it digitally.

Figure 1.6.0 Task 2 Process Video

Week 6

Typography: Screen & Print

Typography exists not only on paper but on multitude of screens and is subject to unknown parameters such as the operating system, system fonts, the device and screen itself, the viewport and more. Skilled typesetters and designers produce good typography with good readability. Typesetting can happen in the browser nowadays.

Print Type 

Type was designed intended for reading from print long before we read from screen. It is important that the print text is smooth, flowing and pleasant to read. 16-pixel text on screen is about the same size as text printed in a book or magazine accounting to reading distance.

Figure 1.6.1 Examples of typography designs for print purpose,
source: lecture notes

Screen Type

Typefaces intended to use on web are modified to enhance readability and performance on screen in a variety of digital environments. Font size are typically set at about 10 points

Figure 1.6.2 Typography design for screen,
source: lecture notes

Figure 1.6.2 Font size for screen,
source: lecture notes

Hyperlink (Hyperactive Link)

A word, phrase or image that can be clicked on tp jump to a new page. Normally blue and underlined by default.

Figure 1.6.3 Hyperlink,
source: https://russandrandy.com/understanding-hyperlinks-creating-backlinks-to-boost-seo/

Static Typography

Static typography has minimal characteristics in expressing words.

Figure 1.6.4 Static typography,
source: https://www.behance.net/gallery/20079523/Noise-Font

Figure 1.6.5 Static typography,
source: lecture notes

Motion Typography

"Dramatised" type, eg. become "fluid" and "kinetic". Motion graphics, particularly the brand identities of film and television production companies increasingly contain animated type. Motion type is often overlaid onto music videos and advertisement, often set in motion following the rhythm of a soundtrack.

Figure 1.6.6 Motion typography,
source: lecture notes

INSTRUCTIONS

 
 

 Task 2 : Typographic Exploration and Communication

Research

I went on searching for some references of editorial spreads that I found interesting. The first reference I got has different font designs in the heading which makes it look more eye-catching. The concept of slightly rotating the whole paragraph in my second reference also made the entire outcome look more interesting. Also, I really liked the third reference where the designer edit the texts in the shapes of the heading.

Figure 1.7.1 Layout inspiration (1),
source: https://hannahbusekrus.com/mock-magazine-spread-frutiger

Figure 1.7.2 Layout inspiration (2),
source: https://www.coroflot.com/olenworks/StudentWork-Design-Process-Technology

Figure 1.7.3 Layout inspiration (3),
source: https://truthdesign.typepad.com/darren_scott_typographics/2008/11/new-typographic-spread-for-the-birmingham-post.html

Thumbnail sketches

I tried using the concept where I filled the heading 'UNITE" with all 33 names of the visual communicators. Then, I had the idea of forming a smiley face with the headline as "unite" has the meaning of joining people together.

Figure 1.7.4 'Unite' filled with 33 names of visual communicators, 
week 5 (24.09.2021)

Figure 1.7.5 First attempt at editorial spread,
week 5 (24.09.2021)

Figure 1.7.4 Digitise 'Unite' filled with names of visual communicators, 
week 5 (24.09.2021)

I tried making the smiley face as I planned but it looked very strange, so I changed to a circle instead. I'm still not satisfied with the outcome as the heading didn't look compatible with the texts. 

Figure 1.7.6 Trying out different editorial spread design, 
week 5 (24.09.2021)

Then, I tried minimise the rotation of the heading. It came out better and kind of fit well with the text.

Figure 1.7.7 Trying out different editorial spread design, 
week 5 (24.09.2021)

I lessen the rotation some more to see if it looks better.

Figure 1.7.8 Trying out different editorial spread design, 
week 5 (24.09.2021)

Figure 1.7.9 Trying out different editorial spread design, 
week 5 (24.09.2021)

Later, I realised the 'unite' created with 33 names of the visual communicators is a little bit too much to be put as the heading, so I decided to make it the spreadsheet background instead. I tried lower the transparency into different levels to make sure it doesn't affect the reading of the main body text. 

Figure 1.8.0 Trying out different transparancy,
week 5 (24.09.2021)

Figure 1.8.1 Background design,
week 5 (24.09.2021)

Mr Vinod also suggested that I can add the eye design to bring out the meaning of visual. I tried putting it on the word 'I' to see if it works.

Figure 1.8.2 Background design (2),
week 5 (24.09.2021)

Then I also had another idea of adding the eye design to the heading. I added extra lines for the word unity to make it look more eye-catching.

Figure 1.8.3 Heading final design,
week 6 (1.10.2021)

Figure 1.8.4 Sketches of final design,
week 6 (1.10.2021)

Figure 1.8.5 Layout design,
week 6 (01.10.2021)

After I'm done with the design of the heading, I started to see if the body text needed any adjustments. I changed the font size to 12pt then adjusted the tracking as there are a few lines that has too much space between each words. 

Figure 1.8.6 Tracking adjustments,
week 6 (1.10.2021)

I used Justify to aligned all lines. Later, I also applied cross alignment to the body text to make them look neater. 

Figure 1.8.7 Before cross alignment,
week 6 (1.10.2021)

Figure 1.8.8 After cross alignment(1),
week 6 (1.10.2021)

Figure 1.8.9 After cross alignment(2),
week 6 (1.10.2021)

Figure 1.9.0 After cross alignment(3),
week 6 (1.10.2021)

Final Outcome in JPG - Task 2: Typographic Exploration and Communication

(Horizontal) 

Figure 1.9.1 Final outcome(horizontal),
week 6 (1.10.2021)

(Vertical) 

Figure 1.9.2 Final outcome(vertical),
week 6 (1.10.2021)

Final Outcome in PDF - Task 2: Typographic Exploration and Communication

Figure 1.9.3 Final outcome in PDF,
week 6 (1.10.2021)

FEEDBACKS

01.10.2021

Mr Vinod reminded me to be careful not to put the body text across the mid line of the two pages. He said that my design for the heading was good and suggested I can create an eye design to indicate the word visual. 

REFLECTIONS

My experience throughout this exercise was unique. Learning about the editorial spread layout and planning about how the design affect the audiences' eye moving around the layout was interesting. Sketching different layout designs before digitising them does help a lot in doing this exercise effectively. I also enjoy having different ideas to form the heading creatively.

This exercise is more challenging compare to the previous exercises. It is just like a combination of the previous ones but more. I found myself more familiar with text formatting such as adjusting all the tracking, leading etc.

In whole, although I did spend a lot of time redoing and editing the work, I'm satisfied with the final outcome. I think there is still a lot of improvement can be done and I'm willing to learn more in the future. 

FURTHER READINGS

Typography Reference by Allan Haley, Richard Poulin, Jason Tselentis, Tony Seddon, 

Gerry Leonidas, Ina Saltz, Kathryn Handerson with Tyler Alterman

Figure 1.9.4 Book Cover of Typography Reference

Type is no longer the invisible servant of design, but rather recognized as design of the highest order. Technological developments, the availability of sophisticated software, and Internet connectivity, have raised even the average person’s awareness about the power of typography. 

Figure 1.9.5 Linotype Didot, Braille and sign language,
source: Typography Reference

There are now many books devoted to the art, design, practice, resources and teachings of typography. This book(Typography Reference) is like an all-in-one comprehensive reference guide to all things typography.

Figure 1.9.6 Lo-Res 1 by Zuzana Licko and Orbe I by Rui Abreu,

source: Typography Reference

This book also introduces the timeline of the history of type dates back to the ancient Greeks.

Figure 1.9.7 Greek lapidary letters,
source: Typography Reference

Figure 1.9.8 Roman monumental capitals,
source: Typography Reference

Most typefaces fall into one of three basic groups: those with serifs (little feet and tails), those without serifs, and scripts (designed to look like cursive handwriting). A classification system is built to help identify and combine various typefaces. The book listed fifteen groups of type styles, listed in chronological order of their appearance. In all likelihood, larger systems would break down into subdivisions of them.

Figure 1.9.9 15 groups of type styles,
source: Typography Reference

One of the interesting part of this book is that they provide a lot of examples images and graphics as they describe the typefaces or introduce the history of typography instead of just using all texts. Readers wouldn't feel boring reading books like this. This book also gives clear informations about the type principles, type usage, type terminology and language and so many more. All in all, as the authors had said in the beginning, this book is definitely an an all-in-one comprehensive reference guide to all things typography and it has a whole bunch of knowledge which is worth reading.