TYPOGRAPHY/ TASK 2: TYPOGRAPHIC EXPLORATION & COMMUNICATION

||  27/06/24-03/07/24 (Week 6 -Week 10) 
||  Sun Jia Yi / 0370449
||  Typography / Bachelor of Design (Hons) in Creative Media
||  Task 2: Typographic Exploration & Communication(Text Formatting and Expression) 

---

TABLE OF CONTENTS

1. Lectures 

2. Instructions

3.Process Work 

    3.1 Research 

    3.2 Ideation 

    3.3 Final Outcome 

4. Feedback 

5. Reflection 

6. Further Reading 

---

 1. LECTURES 

Lecture 5: Understanding 

1. Letters/Understanding letterforms

Although it is implied that the capital letters represent symmetry, this is not entirely true. Both of the letterforms below are internally harmonious and have unique emotions. 

Baskerville stroke form: Simple to discern between two distinct stroke weights.

Univers stroke form: Compared to the right width, the left width is thinner.

Figure 1.1: Baskerville"A", Univers"A", Week 7 (01 June)

These are Helvetica and Univers's lowercase "a" letters. There is an obvious contrast in character between the two letterforms when one compares how their stems terminate and how their bowls meet the stems.

Figure 1.2: Helvetica "a",Week 7 (01 June)

2)Maintaining  X-height

Generally speaking, X-height indicates the lowercase letterforms' size. A few further considerations include that curved strokes, like the one in the letter "s," have to either rise above the median or fall below the baseline. As a result, the letters seem to be the same size as the strokes that they are next to in both the vertical and horizontal directions.

Figure 1.3: X-heights for lowercase letter,Week 7 (01 June)

3) Letters/form/ Counterform

Acquiring an awareness of the counterform, or negative space, which is the space that the form's strokes describe and frequently contain, is equally as crucial as learning to recognise distinct letterforms. When letters are united to create words, the spaces between them constitute the counterform. The establish a word's readability.

Figure 1.4: Form and Counterforms ,Week 7 (02 June)

Examining a letter's form and counter in great detail is one of the most fruitful ways to comprehend them. The assessments also give a clear knowledge of the distinctive qualities of letterform and a solid sense of how the harmony between form and counter is accomplished. It also allows you to have a peek into the letter-writing process.

It's important to note that while the "g" tends to lose its identity when individual letters are studied out of context, the feeling of the "S" remains consistent throughout all stages of expansion.

Figure 1.5: Forms and counterforms, Week 7 (02 June)

Contrast is an essential element in typography as well as design. 

Variation for contrast in typography

Small + Organic 

Small + Dark 

Large + light 

Negative + Positive

Figure 1.6: Combination of contrast in typography,Week 7 (02 June)

Lecture 6: Screen & print 

1)Typography/Different Medium 

Typography used to be thought of as existing only on paper. Skilled designers and typesetters produced readable text and beautiful typography. Typography is used on many displays and gadgets now days in addition to paper. Numerous unidentified and erratic factors, including the operating system, system typefaces, the device and screen itself, the viewport, and more, might affect it.

2) Print V.S. Screen Type 

Type was primarily created with print reading in mind. The most popular types used for print are those that are well-suited for printing, such Caslon, Garamond, and Baskerville. due to their exquisite qualities and excellent readability. They are adaptable and simple for viewers to understand. 

Figure 1.7: Example of print type ,Week 7 (02 June)

Figure 1.8: Example of print type,Week 7 (02 June)

However, fonts used on the web are altered to improve readability and functionality on computer screens.

For example:

Taller x-height

Reduction of ascenders and descenders

Wider letterforms

More open counters

Heavier thin strokes and serifs

Reduction of stroke contrast

Modification of curves and angles

More open spacing (especially for smaller sized typrface)

The goal of all of them is to enhance the readability and identification of letterforms on screens, including those on mobile devices, e-books, e-readers, and the web.

Hyperlink

Web sites have hyperlinks that let visitors navigate between pages by clicking on them. By default, text hyperlinks are highlighted in blue. The arrow pointing to a hyperlink should become a little hand when the cursor is over it. 

Web/Screen Safe Fonts for System Fonts

Every device has a unique pre-installed font option; the choices may vary depending on the operating system. 

Thus, it's critical to understand "Web safe" fonts. These are the little set of typefaces that are shared by Google, Mac, and Windows. These serve as an illustration: 

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

Due to varying pixel sizes, the text displayed on PCs, tablets, phones, and TVs also has varied proportions. One hundred pixels on a large 60-inch HDTV is not the same as one hundred pixels on a laptop.

Figure 1.9: Size of type in displayed in different screen ,Week 7 (02 June)

3) Static & Motion 

Static typography 

Static typeface conveys text with few attributes. Traditional properties like as bold and italics have far less expressive options compared to dynamic features.

Figure 1.10: Static Typography,Week 7 (02 June)

Motion Typography 

By using temporal media, typographers may "dramatise" type and give letterforms a more "fluid" and "kinetic" appearance. In film title credits, typographical information is displayed, often animated to give the words life. Motion graphics frequently use animated text, particularly in music videos, advertisements, film and television production branding, and film stills. 

Figure 1.11: Motion Typography,Week 7 (02 June)

---

2. INSTRUCTIONS

This is the Module information booklet for this module:

               Document 2.1 Module Information Booklet (MIB) of Typography

Task 2: Editorial text Formatting 

Using the content provided by Mr. Vinod, we must create an editorial layout for this assignment. "The role of Bauhaus thought on Modern Culture," "Unite to Visualise a Better World," and "A Code to Build on and Live by" are the three alternatives. 

 For my formatting text, I've selected "Unite to Visualise a Better World". 

1) Research 

When I first see this word, I think the key word is unite, so I will make some changes on "unite".

Figure 2.1: example of unite,Week 7(10 June)

Figure 2.2: example of unite, Week 7 (10 June)

Figure 2.3.: example of unite, Week 7 (10 June)

After the research, my idea is create a square and fill it with unite letters.

2) Digitisation

These are my digital design sketch for this exercise in Adobe Illustrator: 

              Figure 2.4 & 2.5.: example of unite Digitised rough designs, Week 7 (10 June)

I tested the composition and overall impact by putting them into Adobe InDesign. I continued to add components as I went. 

                                       Figure 2.6: rough design 1 , Week 7 (10 June)

 Figure 2.7: rough design 2 , Week 7 (10 June)

Mr Vinod thought the approach of Fig 2.7 shows more characteristic of unite , I was instructed to change the layout to look better. And then Mr Vinod said the text cannot touch the middle line. So I made some change.

Figure 2.8: rough design 3 , Week 7 (10 June)

                    

Figure 2.9: Editorial Text Formatting design(JPEG), Week 7 (10 June)

Figure 2.10: Editorial Text Formatting design(PDF), Week 7 (10 June)

Figure 2.11: Editorial Text Formatting with Grid(JPEG), Week 7 (10 June)

                               Figure 2.12: Editorial Text Formatting with Grid(PDF), Week 7 (10 June)

Fonts: Univers LT Std (Ultra Condensed and Black). 

Type Size: 65pt("Unite"), 15pt("to" , "visualise" , "a" , "better" , "world" 

Leading:-

paragraph spacing: -

Head line: 

front/s: Futura Std Bold

Type size/s : 13 pt 

leading: 13pt 

paragraph spacing: -

Body: 

Front/s : Futura Std light

Type size: 10pt 

leading: 13pt 

paragraph spacing: 11pt 

character per-line: 65 

Alignment: left aligned 

margins: 25.4mm

Columns: 8

Gutter: 5mm 

---

3. FEEDBACK 

3.1 Editorial text Formatting 

Week 6

General Feedback: The layout is very important. Finalise Task 1. 

Specific Feedback: The idea is good got the strong meaning of the "unite". The approach of Fig 2.4 shows more characteristic of "unite". 

Week 7

General Feedback: -

Specific Feedback: For the text part please make some change about the layout and kerning. change the size and something and keep the overall design clean. 

Week 8

General Feedback: -

Specific Feedback: The final design is fine, submit it in e-portfolio.

---

3. REFLECTION 

3.1 Experience

I had the chance to dig deeper into practical Adobe InDesign abilities throughout this lesson. My experience included learning how to format text in Adobe InDesign, which was one of the most important things I did. This programme is quite effective at producing layouts that are eye-catching. I took the time to become acquainted with abilities like establishing margins, choosing a typeface, making use of grid systems, and accomplishing cross alignment. Having practical experience helped me improve my skills in layout design.

3.2 Observations 

I saw during this session how important appropriate text formatting is for both readability and overall design aesthetics. Furthermore, playing around with different fonts and kerning and leading allowed me to observe directly how these aspects affect how text is perceived. In addition, I noticed that the columns and grid system—two essential components of InDesign—have an effect on how the entire layout is balanced and organised. Additionally, I learned that little adjustments can have a significant impact on leading, letterspacing, and typeface size. 

3.3 Findings 

During this job, I discovered that it is best to avoid centering heads since this may create printing misalignment. Avoiding headers in the gutter is also a good idea. Moreover, I discovered that designing layouts is not a simple task at all. 

---

4. FURTHER READING 

 Figure 4.1: Typographic design: Form and communication, Week 7 (11 June)

Reference:

Carter, R., Day, B., Meggs, P. B., Maxa, S., & Sanders, M. (2015). Typographic design: Form and communication.Hoboken, New Jersey: John Wiley & Sons, Inc.

 Figure 4.2: Single column grids ,Page 71, Week 7 (11 June)

- Text that reads as a straightforward, linear narrative is typically best laid up in a single block. 

- Always think of the page margins and the text block as a proportionate scheme.

- Margin serves to establish the typographic scene, whether it is symmetrical or asymmetrical. Additionally, margins allow for marginalia, which are distinct typographic elements that bolster the text. 

- A range of proportional relationships may be achieved by adjusting the text block's size and positioning within the page. The way text blocks are arranged on a page can have a big impact on the communication's overall tone.

 Figure 4.3:Multicolumn grids , Page 75, week 7 (11 June)

- It is crucial to strike a balance between font size, line length, and leading when dealing with multicolumn grids.

- Rhythm: Produced by contrasting and repeating columns with other graphic components.

- Information hierarchy in visual form: Text columns are separated by column intervals to allow the eye to move rationally and without confusion from one column to the next.

- Investigating non-traditional gutter intervals can result in visually interesting patterns and rhythms in typography.

 Figure 4.4:Modular grids,Page 79-80, week 7 (11 June)

- When presenting more complicated information accurately and concisely, the modular grid works well. 

- Line intersections, both vertical and horizontal, create modules. These devices offer zones where various informational components can be placed. Establishing a clear hierarchy between information components is the aim. Understanding the various informational layers and portraying them as opposing aspects allows for the achievement of this. 

- It's critical to view the grid as an information organisation system rather than as a set of guidelines for all designs.

- Content pieces may be arranged into zones by combining modules of different sizes and forms. The organisational options are more versatile with a more intricate grid layout. 

- When planning, one must strike a balance between unity and variation.

 Figure 4.5: ABA form,Page 106, week 7 (11 June)

- Two A's: contrast and recurrence.

- This organisational technique aids the listener in remembering the concept and tracking its expansion, growth, and elaboration, among other things.

- Form connections are seen by the reader of typographic communication as either being in opposition or correspondence. 

- Audiences are looking for variation that organises the typographic communication experience while stimulating the mind and eyes.