Typography - Task 2

24/10/2023- 12/11/2023 (Week 5 - Week 8)

Myra Elida Binti Abd Azis / 0358516

Typography / Bachelor of Design (Hons) in Creative Media

Task 2 - Typographic Exploration & Communication

---

LECTURES

> Typo_6_Screen&Print

Type In Different Medium

- Typography was viewed as living only in paper.

- When publication was edited, typeset and printed, it was done.

- Good typography and readability (skilled typesetters and designers)

Print Type Vs Screen Type

Print Type

- Designer's job to ensure the text is smooth, flowing and pleasant to read.

- Good typeface (Caslon, Garamond and Baskerville)

- Elegant and intellectual but highly readable when set at small font.

Screen Type

- Meant to read on screen tweaked to optimize readability and performance on screen in a variety of digital environments.

- Wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, modified curves and angles in some designs.

- Improve character recognition and overall readability, which include the web, e-books, e-readers and mobile devices.

Hyperactive Link / Hyperlink

- A word, image, or phrase that you can click to go to a new document or section of current document. 

- Can be seen on any internet page and usually blue and underlined by default.

Font Size for Screen

- 16 pixel type text is the same size as printed text in a book or magazine. 

- Set for reading distance because when we read a book near to our faces, normally set at 10 points

- If to read it lengthwise, it must be at least 12 points, comparable to around 16 pixels on the screen.

System typefaces for Screen / Web Safe Fonts

- Pre-installed fonts for each device, based largely by its operating system

- Varies from one another

- Windows-based devices have one group.

- MacOS ones pull from another. 

- Google's own Android system has their own system. 

- If  designer chooses a typeface isn't supported by device's operating system, the device will use its default font, like Times New Roman.

Pixel Differential Between Devices

- Due to varied pixels, the text on our screen varies not only in size but also in proportion. 

- A huge 60-inch HD television's 100 pixels are not the same as a laptop's.

- Even within a single device class, there is a lot of variation.

Fig 1.1 Pixel Different Between Devices

Static Vs Motion

Static Typography

- Minimal characteristics in expressing words

- Traditional (Bold and Italic) offer a fraction of expressive potential

Motion Typography

- To dramatize type, for letterforms to become fluid and kinetic 

- Often overlaid onto music videos and advertisements, set in motion following the soundtrack

INSTRUCTIONS

Task 2 : 

- Construct a 200 x 200mm 2 page editorial spread using Adobe InDesign using the written content provided by the lecturer. Out of three written content, I have chosen the first one which is "The Role of Bauhaus Thought on Modern Culture".

Sketches of Title and Layout :

- These are some sketches of I imagined the whole layout of the editorial which I did on my Ipad.

Fig 1.2 Sketches of Title and Layout 1

Fig 1.3 Sketches of Title and Layout 2

Fig 1.4 Sketches of Title and Layout 3

Fig 1.5 Sketches of Title and Layout 4

Digitalization of Title Sketches :

- After that, I then started to digitalized the title using Adobe Illustrator :

Fig 1.6 Digital Title 1

Fig 1.7 Digital Title 2

Fig 1.8 Digital Title 3

Fig 1.9 Digital Title 4

- After thinking for a while, I had decided to pick Fig 1.8 for my final editorial.

Digitalization of Title and Layout Sketches :

- Just incase if I were to change my mind, I decided digitalized in Adobe InDesign the sketches of the title and layout that I have done. This is just to see how the layouts  would look like after digitalization.

Fig 1.10 Digital of Title and Layout Sketches 

Fig 1.11 Digital of Title and Layout Sketches 

- Then, I decided to keep on going with my choice and did my layout like in Fig 1.10 on the left.

Final Outcome :

Fig 1.12  Final Outcome (Without Grid) (PDF)

Fig 1.13 Final Outcome (With Grid) (PDF)

HEAD

Font/s: ITC New Baskerville Std (Bold)

Leading: - 
Type Size/s: 19pt

Paragraph spacing: 23pt

BODY

Font/s: ITC New Baskerville Std (Roman) (Bold)

Type Size/s: 12pt (Body Text)/ 18pt (Heading)
Leading: 12pt (Body Text)/ 21.5pt (Heading)
Paragraph spacing: 12pt
Characters per-line: 43
Alignment: Aligned left

Margins:  10 mm top,  10 mm left + 10 mm right + 10 mm bottom

Columns: 3
Gutter: 5 mm

---

FEEDBACKS

Week 6 

General feedback :

• Keep widows and orphans out of our editorial content 
• Kern our text 
• Create type expression that maintains readability without going overboard. 

---

REFLECTION

+ Experience 

- In my experience doing this task, I find it to be more easy than Task 1 as it had limited space to work with. However, in this task, there was more space to work with and different options of written content to be used.

+ Observation

- Choosing the right content to use for the layout is important, as each written content may look different or unflattering with the design that I had chose to do.

+ Findings

- I find that the place of the head and body is essential if you wanna make it look simple but neat. Moreover, so that layout readability for the readers is easy and would have no problem or get lost in reading the editorial.

---

FURTHER READINGS

Vignelli Canon on Design (Page 24)

"In three dimensional design, manipulating light through different textures and materials gives infinite and effective results. Changing scale and contrasting sizes provide an impressive array of possibilities.

It is essential that a design is imbued with visual strength and unique presence to achieved its purpose. Visual strength can be achieved also by using delicate layouts and materials. Visual strength is an expression of intellectual elegance and should never be confused with just visual impact - which, most of the time, is juat an expression of visual vulgarity and obtrusiveness."