Typography Task 2 - Typographic Exploration and Communication

November 07, 2023

Typography Task 2 - Typographic Exploration and Communication

03/11/2023 - 10/11/2023 ( Week 6 - Week 7 )

Chong Wee Han / 0368863

Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University

Task 2 - Typographic Exploration and Communication

JUMPLINK

1.Lectures

2.Instructions

3.Task 2

Final Outcome - Typographic Exploration and Communication

4.Feedback

5.Reflection s

6.Further Reading

LECTURES

Week 6: Lecture 6

Typo_6_Screen & Print

Typography in Different Medium

Print Type vs Screen Type

Figure 1.1 Print Type

-Type for Print

Type was designed intended for reading from print long before we read from screen. It’s the designer’s job to ensure that the text is smooth, flowing, and pleasant to read.

Good typeface for print : Caslon, Garamond, Baskerville
Because of their characteristic which are elegant and intellectual but also highly readable when set at small font size.

They are versatile, easy-to-digest classic typeface, which has a neutrality and versatility that makes typesetting with it a breeze.

Figure 1.2 Screen Type

-Type for Screen

Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments.

This can include a taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs.

Another important adjustment – especially for typefaces intended for smaller sizes – is more open spacing. All of these factors serve to improve character recognition and overall readability in the non-print environment, which can include the web, e-books, e-readers, and mobile devices.

Hyperlink

A word, phrase, or image that you can click on to jump to a new document or a new section within the current document.Text hyperlinks are normally blue and underlined by default. When you move the cursor over a hyperlink, whether it is text or an image, the arrow should change to a small hand pointing at the link.

Font Size for Screen

16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance. Because we read books pretty close — often only a few inches away — they are typically set at about 10 points. If you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens.

System Fonts for Screen / Web Safe Fonts

Each device comes with its own pre-installed font selection. Which is based largely on its operating system. The problem is that each differs a little bit.

Windows-based devices might have one group. While MacOS ones pull from another. Then Google’s own Android system uses their own as well.

‘Web safe’ ones, however, appear across all operating systems. They’re the small collection of fonts that overlap from Windows to Mac to Google.

Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond.

Pixel Differential Between Devices

Figure 1.3 Pixel Differential Between Devices

The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too, because they have different sized pixels.

Static vs Motion

Figure 1.4 Static Typography

-Static Typography

Has minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.

Whether they are informational, promotional, formal or aspirational pieces of designs, the level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.

-Motion Typography

Temporal media offer typographers opportunities to “dramatize” type, for letterforms to become “fluid” and “kinetic” (Woolman and Bellantoni, 1999)

Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type

Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack. On-screen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood.

INSTRUCTIONS

Task 2 - Typographic Exploration and Communication

This task we have to design the illustration and put it into our layouts.We use 2-page (200mmx200mm) of editorial layouts to complete our task.

Sketches

Figure 4.1 Sketches 01 (Week 6) 1/11/2023

Figure 4.2 Sketches 02 (Week 6) 1/11/2023

Layout Process

Figure 4.3 Hidden characters and alignment (Week 6) 2/11/2023

Figure 4.4 Hidden characters and alignment (Week 6) 2/11/2023

Figure 4.5 Hidden characters and alignment (Week 6) 2/11/2023

Figure 4.6 Inspiration of layout#3 (Week 6) 2/11/2023

Figure 4.7 Design of 'BAUHAUS' (Week 6) 2/11/2023

I get the inspiration from the design of 'CHAOS' and reflect on my layout#3 'BAUHAUS'. Besides, I also add the warp effect on ' The Role of '.

Week 6 Layouts

For the layout#1 & 2 I focus on the design of BAUHAUS by using larger text size and 3D effect to make it look more eye-catching. I want the composition to be more neat and tidy so I uniformly put my body text on the left side.

Figure 4.8 Initial Layouts (Week 6) 2/11/2023

Figure 4.9 Initial Layouts (Blocks) (Week 6) 2/11/2023

HEAD

Font/s: Univers LT Std (Layout #1 &2), Futura Std (Layout #3)

BODY
Font/s: Janson Text LT Std (body text), Adobe Caslon Pro(lead-in text)
Type Size/s: 10pt (body text), 19pt (lead-in text)
Leading: 13pt (body text), 21.5pt (lead-in text)
Paragraph spacing: No paragraph spacing
Characters per-line: 51-57
Alignment: Left align

Margins: 10mm top, 10mm left + 10mm right + 10mm bottom
Columns: 2
Gutter: 5mm

New Layouts

After getting the feedback from Mr.Vinod, I changed the body text from Janson Text LT Std Bold to 55 Roman and the mistake of the word 'Thoughts' I also changed it to 'Thought'. Mr.Vinod said that my illustration (left page) does not emphasizing the theme of 'BAUHAUS' so I rearranged the words to make it look like a house so that it can fit in with the words.

Figure 4.10 New Layouts (Week 7) 10/11/2023

Figure 4.11 New Layouts (Week 7) 10/11/2023

HEAD

Font/s: Univers LT Std (Layout #1 &2), Futura Std (Layout #3)

Margins: 10mm top, 10mm left + 10mm right + 10mm bottom
Columns: 2
Gutter: 5mm

FINAL OUTCOME TASK 2 - Typographic Exploration and Communication

HEAD

Font/s: Univers LT Std

Margins: 10mm top, 10mm left + 10mm right + 10mm bottom
Columns: 2
Gutter: 5mm

Figure 4.12 Final Outcome - Typographic Exploration and Communication JPG (Week 7) 10/11/2023

Figure 4.13 Final Outcome - Typographic Exploration and Communication PDF (Week 7) 10/11/2023

Figure 4.14 Final Outcome - Typographic Exploration and Communication with grids JPG (Week 7) 10/11/2023

Figure 4.15 Final Outcome - Typographic Exploration and Communication PDF with grids (Week 7) 10/11/2023

FEEDBACK

Week 7

General Feedback: Don’t format the text in bold type. Bold is only used for the headline but is not suitable for use in body text.

Specific Feedback: The word ‘Thought’ I have unwritten it into ‘Thoughts’. The illustration of Layout#1 & 2 does not emphasize the BAUHAUS style.

REFLECTIONS

Experience: The task 2 is about designing an editorial layout in Indesign. I felt more comfortable using Indesign during this second exercise but I'm facing difficulty due to a lack of creativity. I personally think that I didn't optimize my layout into diversification.

Observation: I observe that there are many details that we need to be careful about when we arrange our layout. Small details especially the leading, alignment, etc can change the final artwork.

Findings: To get more inspiration, it's very important to view others' work and do research online. Keep on trying different layouts then you will find the most suitable one.