Typography -Task 2

04/05/2022 - 11/05/2022 (Week 6-Week 7)
Yong Kai Yi (0352826)
Typography
Task 2

---

LECTURES:

Week 6/ Screen & Print

Lecture 6: Typography/ Different Medium

04/05/2022

6.1 Print Type vs Screen Type

6.1.1 Type for Print

A good typeface for print including Caslon, Garamond, Baskerville, they are the most common typefaces that is used for print. Their characteristic are elegant and highly readable when set at small font size. 

6.1.2 Type for Screen

Typefaces used on the web are optimized and modified to enhance readability 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, open spacing, as well as modified curves and angles for some designs.

6.1.3 Hyperactive Link/ Hyperlink

A hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document. 

Hyperlinks can be found in Web pages, it allows users to click their way from page to another. 

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. 

6.1.4 Font Size for Screen

Fig 01: screen font size vs print font size

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. We read books often only a few inches away ,  the font size are typically set at about 10 points. If it's at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens

6.1.5 System Fonts for Screen/ Web Safe Fonts

Each device comes with its own pre-installed font selection. Windows-based devices might have one group. While MacOS pulls 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

6.1.6 Pixel Differential Between Devices

Fig 02: example of different pixel between devices

The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the text on-screen differs in proportion too, as they have different sized pixels. 100 pixels on a laptop is very different from 100 pixels on a big 60″ HDTV.

6.2 Static vs Motion

1. Static Typography

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

From billboards to posters, magazines to fliers, we encounter all forms of static typography with wide ranging purposes. The level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.

2. Motion Typography

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. 

---

INSTRUCTIONS:

Task 2: Typographic Exploration & Communication (Text Formatting and Expression)

04/05/2022 - 11/05/2022 (Week 6-Week 7)

Layout and Headline Sketches:

Fig 03: 1st attempt sketch (week 6/ 04/05/2022)

Fig 04: 2nd attempt sketch (week 6/ 04/05/2022)

Fig 05: 3rd attempt sketch (week 6/ 04/05/2022)

Fig 06: 4th attempt sketch (week 6/ 04/05/2022)

These are a few pre-sketch of my layout and headline design, I mostly expressing the word "world" as it is one of the word that I think should be emphasized. Next, I tried not to let the text's line length too narrow, thus I used about two columns per paragraph ( text box). The whole layout concept is, I wanted it to be minimalist. 

Fig 07: headline sketch (week 6/ 04/05/2022)

After the pre-sketch, I made some headline design sketch, the fourth design is the one I love the most because of the letter "o" was enlarged and able to express the meaning of "world". 

Digitalized Headline:

Fig 08: digitalized headline using AI (week 6/ 04/05/2022)

Font : Univers LT Std , Futura

Typeface : Univers LT Std 55 Extended & 67 Bold Extended , Futura Light

I applied Futura Light on the word "world" to ensure the letter "o" will not be too bold and overlapping the others text. While the word "visualize" and "better" using extended, so the word is longer enough to fill in the space in the middle of the letter "o". 

1st attempt editorial layout progression:

Fig 09: 1st attempt editorial layout progression (week 6/ 04/05/2022)

1st attempt editorial layout:

Fig 10: 1st attempt layout (week 6/ 04/05/2022)

	Lead in Text	Text
Font	Univers LT Std	Gill Sans MT
Typeface	65 Bold Oblique	Regular
Font Size	17 pt	12 pt
Leading	19 pt	14 pt
Paragraph Spacing	-	14 pt
Average characters per line	-	62-110
Alignment	Left	Left
Margins	-	10mm
Columns	-	3 columns per spread
Gutter (for columns)	-	5mm

Fig 11: 1st attempt layout (2nd design) (week 6/ 04/05/2022)

	Lead in Text	Text
Font	Univers LT Std	Univers LT Std
Typeface	65 Bold Oblique	55 Roman
Font Size	21 pt	12 pt
Leading	23 pt	14 pt
Paragraph Spacing	-	14 pt
Average characters per line	-	28-69
Alignment	Left	Left
Margins	-	10mm
Columns	-	3 columns per spread
Gutter (for columns)	-	5mm

Fig 12: 1st attempt layout (3rd design) (week 6/ 04/05/2022)

	Lead in Text	Text
Font	Gill Sans MT	Univers LT Std
Typeface	Bold	55 Roman
Font Size	27 pt	8 pt
Leading	-	10 pt
Paragraph Spacing	-	10 pt
Average characters per line	-	61-110
Alignment	Left	Left
Margins	-	10mm
Columns	-	3 columns per spread
Gutter (for columns)	-	5mm

2nd attempt digitalized headline progression:

Fig 13: 2nd attempt digitalized headline progression (week 7/ 11/05/2022)

Fig 14: 2nd attempt digitalized headline progression (week 7/ 11/05/2022)

2nd attempt digitalized headline:

Fig 15: 2nd attempt digitalized headline using AI (week 7/ 11/05/2022)

I made more headline design, and found out the 3rd and 4th design is the one I like the most. Thus, I chose both of them to make another layout attempt.

2nd attempt editorial layout progression:

Fig 16: 2nd attempt editorial layout progression (week 7/ 11/05/2022)

2nd attempt editorial layout after feedbacks:

Fig 17: 2nd attempt layout (1st design) (week 7/ 11/05/2022)

	Lead in Text	Text
Font	Futura Std	Univers LT Std
Typeface	Book	45 Light
Font Size	13 pt	11 pt
Leading	-	13 pt
Paragraph Spacing	-	13 pt
Average characters per line	-	41-57
Alignment	-	Left
Margins	-	10mm
Columns	-	3 columns per spread
Gutter (for columns)	-	5mm

Fig 18: 2nd attempt layout (2nd design) (week 7/ 11/05/2022)

	Lead in Text	Text
Font	Futura Std	Univers LT Std
Typeface	Medium	45 Light
Font Size	14 pt	11 pt
Leading	-	13 pt
Paragraph Spacing	-	13 pt
Average characters per line	-	46-58
Alignment	-	Left
Margins	-	10mm
Columns	-	3 columns per spread
Gutter (for columns)	-	5mm

Fig 19: 2nd attempt layout (3rd design) (week 7/ 11/05/2022)

	Lead in Text	Text
Font	Futura Std	Univers LT Std
Typeface	Heavy	45 Light
Font Size	13 pt	11 pt
Leading	-	13 pt
Paragraph Spacing	-	13 pt
Average characters per line	-	54-63
Alignment	-	Left
Margins	-	10mm
Columns	-	3 columns per spread
Gutter (for columns)	-	5mm

Final outcome:

Fig 20: Final outcome layout (week 7/ 11/05/2022)

	Lead in Text	Text
Font	Futura Std	Univers LT Std
Typeface	Book	45 Light
Font Size	13 pt	10 pt
Leading	-	12 pt
Paragraph Spacing	-	12 pt
Average characters per line	-	53-61
Alignment	-	Left
Margins	-	10mm
Columns	-	2 columns per spread
Gutter (for columns)	-	5mm

The layout above shown is the final outcome of task 2. I make some slight changes from the 1st design in 2nd attempt in order to avoid the widow that appears in the 2nd paragraph. I changed the font size to 10 pt and 12 pt leading, decreased the line length too.

Next, I also changed the headline to the 3rd design as the composition is clearer than the 1st design, it also able to avoid the problem I made previously, which is the miscommunication in composition. 

Final outcome in PDF files:

Fig 21: Final outcome layout in PDF (week 7/ 11/05/2022)

Fig 22: Final outcome layout with grids in PDF (week 7/ 11/05/2022)

---

FEEDBACKS:

Week 7 (11/05/2022):

General feedback: The headline composition causes confusion in communication, the line length of the text is too long.

Specific feedback: Regarding the headline, the placement of the word "visualize" and "better" causes confusion in communication, need to work on the composition of the expression. Whereas the text need to work on the line length as per suggested. 

---

REFLECTIONS:

Experience

I think creating the type expressions for the headline is a fun part for me, I made a few attempts, and it helps me to understand and explore more about type expressions, especially composition. Layout design is a quite challenging part for me, there are lot of details need to take care of, and also rules to follow.

Observations

During the feedback session, we are able to look at the design done by our classmates and also receive feedbacks from the lecturer, I observed a lot of different and unique ideas that I can learn and explore from. Throughout the sessions, I was able to observe my own problem in layout design and type expressions too. 

Findings

I found that composition in type expression is quite important as it may causes miscommunication. Headline is the first thing to be read, thus it is important to express it well. Besides, I also found out that line length is very important when it comes to layout design, it may affect the reading experience for the readers. Thus, there are rules and limitations for line length in different media.

---

FURTHER READING:

Week 6-7 (04/05/2022 - 11/05/2022) : <Typographic Design: Form and Communication>

Fig 23: Typographic Design: Form and Communication book cover

Fig 24: Typographic Design: Form and Communication (pg.19-20)

The first chapter is about the evolution of typography, this book stated in detailed of the evolution with examples, it helps me to know more about the history of typography.

Fig 25: Typographic Design: Form and Communication (pg.33)

The second chapter is about the anatomy of typography. This page explained in detail about the letterforms, example: the bowl, stem, ear, loop and so on. 

Fig 26: Typographic Design: Form and Communication (pg.34)

It also shows the difference of proportion in variety of typefaces and fonts. 

Fig 27: Typographic Design: Form and Communication (pg.142)

Typography on screen also have some specific limitations in terms of line length, interline spacing, weight, width and alignment. Readers usually scan text in chunks, 60 to 75 characters per line is an optimal number for ease of scanning websites. For smartphone apps, 35 to 50 characters per line is optimal. Flush-left, ragged-right text alignments are easiest to read, whether implemented in print or in electronic display applications.