Typography - Task 2: Text Formatting and Expression

28/10/2024 - 15/11/2024 (Week 6 - Week 8)

Lim Yeng San (0366316)

Typography / Bachelor of Design (Hons) in Creative Media / Taylors University

Task 2

TABLE OF CONTENTS

1. Lectures

• Week 6

2. Instruction

3. Process Work

• Research
• Sketches
• Digitalization
• Shortlisted Design and Final Edits
• Final Outcome

4. Feedback

5. Reflection

6. Further Reading

1. LECTURES

Week 6: Screen and Print

Typography in Different Medium

Type for Screen

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

- 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

- For typefaces intended for smaller sizes, more open spacing

- To improve character recognition and overall readability in non-print environment

Hyperlink

- A word, phrase or image that is clicked on to jump to a new document or new section within the current document

-  Found in nearly all webpages

- Allows users to click their way from one page to another

- Text hyperlinks are normally blue and underlined by default

Font Size for Screen

- 16 pixel text on a screen is about the same size as text printed in a book

- Typically set at 10 points for books

- 12 points if the text is to be read at arms length (about the same size as 16 pixels on most screens)

System Fonts for Screen

- Each device has its own pre-installed font selection largely based on its operating system

Web Safe Fonts

- Appear across all operating systems

- Ex: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Verdana, Georgia, Palantino and Garamond

Fig 1.1: A comparison between text on screen (left) and text on print (right)

Pixel Differential Between Devices

Fig 1.2: Pixel differences between different devices

Static Typography

- Minimal characteristic in expressing words

- Ex: Billboards, posters, magazines, fliers

Motion Typography

- Animated type

- Ex: In music videos, advertisements, film

2. INSTRUCTION

Fig 2.1: The module information for Typography

3. PROCESS WORK

a) Research

To start my work on Task 2, I familiarized myself with the Bauhaus style by researching on Pinterest.

Fig 3.1, 3.2 and 3.3: Reference images taken from Pinterest

Image Links:

• https://pin.it/f3cMmVQMw
• https://pin.it/1rUA5HDwC
• https://pin.it/6LTtUu5WW

From what I've observed, the Bauhaus style is made up of simple geometric graphics. Some of the image references also set the heading and text and different angles. 

b) Sketches

I then went on to sketching different designs.

Fig 3.4: All of the sketches for Task 2

After consulting Mr. Max, these four designs were chosen to be digitalized.

Fig 3.5, 3.6, 3.7, 3.8: The chosen sketches

c) Digitalization
For the headline, I used both Futura Std and Univers Lt Std as I felt that they both have features similar to the Bauhaus art style.

Fig 3.9: Futura Std (top) and Univers Lt Std (bottom)

I proceeded to digitalize these designs on Adobe Illustrator. I prepared these drafts to be shown to Mr. Max for consultation.

Fig 3.10: The early first design with Futura Std

Fig 3.11: The early first design (blocks)

Fig 3.12: The second design with Univers Lt Std

Fig 3.13: The early second design (blocks)

Fig 3.14: The third design with Futura Std 

Fig 3.15: The early third design (blocks)

Fig 3.16: The fourth design with Univers Lt Std

Fig 3.17: The early fourth design (block)

After receiving advice for adjustments,  I went on to adjusting the headlines for some of the designs and formatting the text.

Fig 3.18: The first design after minor changes to the headline and formatting the text

Fig 3.19: The updated first design (blocks)

For the first design, I adjusted the size of the black rectangles slightly and formatted the text properly. 

Fig 3.20: The second design after editing the headline and formatting the text

Fig 3.21: The updated second design (blocks) 

For the second design, I elongated the lines coming out of "B", "H" and "U" and shortened the line coming out of "S". I also resized "modern culture" properly according to scale and formatted the text properly.

Fig 3.22: The third design after editing the headline and formatting the text

Fig 3.23: The updated third design (blocks)

For the third design, I changed the style of "bauhaus" and removed "modern culture" from the rhombus and placed it outside it on the bottom right of the rhombus. I also formatted the text properly.

Fig 3.24: The fourth design after editing the headline and formatting the text

Fig 3.25: The updated fourth design (blocks)

Lastly, for the fourth design, I changed the angle of the lines and added an extra line on the left side of "bauhaus". I also increased the size of the headline and formatted the text properly.

d) Shortlisted Design and Final Edits

Fig 3.26: The chosen design

In the end, the first design was chosen. I went on to make final edits to the text.

Fig 3.27: The final edited text

HEADLINE
Typeface: Futura Std
Font/s: Futura Std Medium

BODY
Type Size/s: 10 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 50 - 60 characters
Alignment: Left justified
Columns: 2
Gutter: 5 mm
Typeface: Univers Lt Std
Font/s: Univers Lt Std 55 Roman
Margins: 10 mm (top, left, right and bottom)

e) Final Outcome

Fig 3.28: The final text formatting and expression (JPEG)

Fig 3.29: The final text formatting and expression (PDF)

Fig 3.30: The final text formatting and expression with grids (JPEG)

Fig 3.31: The final text formatting and expression with grids (PDF)

4. FEEDBACK

Week 6

General feedback: We set up the blog posts for Task 2.

Specific feedback: (none given for Task 2)

Week 7

General feedback: We sketched designs and digitalized them.

Specific feedback: 2 designs were approved while the rest were lacking bauhaus elements.

Week 8 General feedback: We finalized the designs during ILW 

Specific feedback: 1st design was neat, 2nd design needed adjustments on "bauhaus" and "modern culture", 3rd design needed the "bauhaus" title to be shown more prominently and "thought" had to be moved, 4th design had messy alignment and all designs needed proper text formatting

5. REFLECTION

Experience

This task combined both parts of Task 1 to create a landscape layout design. Here, we had to design the headline and include the paragraph text into the layout design. I felt that the bauhaus text had a wide range for exploration as it has a lot of visual examples. I got to be more creative with the design even if my ideas didn't work. It was still fun to use words in a visual design

Observation

I still have some difficulty with translating the meanings of words into visual designs, especially for words with subjective meanings. 

Findings

I found that I'm more drawn to making simple and clear designs that don't use too much complex elements. 

6. FURTHER READING

Fig 6.1: Typography and Its Implementation on Websites by Yufei Ou

Typography and Its Implementation on Websites by Yufei Ou is about the use of typography principles when designing websites.

Bounding Box vs Type Block

Bounding Box: A rectangle outline that appears after typing text

- Has the same function as a type block in mechanical printing; To contain types and ensure that they are positioned properly

Fig 6.2: The different adjustments that can be made with a bounding box