Typography Task 2 : Typographic Exploration and Communication

1.10.2021 - 8.10.2021 (Week 6 - Week 7)

Sasilvia Cheong Pei Hoong / 0345031 / Bachelors of Design in Creative Media

Typography

Task 2: Typographic Exploration and Communication

---

LECTURES

WEEK 6- Typography in Different Medium

Fig. 1.1 - 1.2 Example of prints 

Fig. 1.3 Screen design for website

Print Type Vs Screen Type

Print

- Typefaces: Caslon, Garamond, Baskerville

- Elegant and intellectual, highly readable when set at small font size

-Versatile, easy-to-digest classic typeface, which has a neutrality and versatility that makes typesetting with it a breeze

Screen

Modified to enhance readability and performance onscreen in a variety of digital environments by doing adjustments such as including 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.

Hyperactive Link

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

- 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 or magazine which will be about 10 points

- 12 points and 16 pixels when you want to read them at arm's length

System fonts for screen/ Web safe fonts

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

Fig. 1.4 Font size for screen and print

Pixel differential between devices

Every single devices has different pixel sizes

Static Vs Motion

Static

- Minimal characteristics in expressing words

- Bold and italic

Motion

- Dramatize type, for letterforms to become fluid and kinetic

- Brand identities of film and television production companies, increasingly contain animated type.

Fig. 1.5 Motion Typography

---

INSTRUCTIONS

---

Task 2: Typographic Exploration and Communication

Layout Research

First I did some research on layout design from articles and magazines to get a clear sense of what I should do.

Fig. 2.1 Magazine layout example 1

Fig. 2.2 Magazine layout example 2

Mr. Vinod mentioned that our layout design can includes elements that relates to the headline meaning. After that, I decided to look up references of code, the first one I got was black boxes with white text inside, next was a screen full of codes, and the third one is Morse codes.

Fig. 2.3 Code logo

Fig. 2.4 Codes on screen

Fig. 2.5 Morse Code

My Sketches 

Fig. 3.1 Layout Sketches

Digitalization

Layout Progress

I arranged the body text and make sure the point size, leading and line length are all correct. I also made sure that there was no widows and orphans present.

Fig. 4.1,4.2,4.3 Hidden characters

Week 6

Fig. 4.4 Layout 1 (30/9/2021)

Fig. 4.5 Layout 2 (30/9/2021)

Fig. 4.6 Layout 1 & 2

Fig. 4.6 Layout 1 & 2 blocked out

Week 7

During feedback, Mr. Vinod said that my layouts were too messy and all over the place so I decided to create more layouts using his advice of aligning the paragraphs together so that it will look neater.

Fig. 4.7 Layout 3 (1/10/2021)

Headlines Font: Universe LT Std (65 Bold)

Body Text Font: Serifa Std (55 Roman), Universe LT Std (65 Bold)

Point size: 9pt (body text), 12pt, 15pt (sub text), 31pt (heading)

Leading: 11pt (body text), 14pt, 17pt (sub text), 52pt (heading)

Line length: 76 (Too much)

Fig. 4.8 Layout 4 (1/10/2021)

Headlines Font: Universe LT Std (65 Bold)

Body Text Font: Serifa Std (55 Roman, 65 Bold)

Point size: 9pt (body text), 12pt, 15pt (sub text), 31pt (heading)

Leading: 11pt (body text), 14pt, 17pt (sub text), 52pt (heading)

Line length: 76 (Too much)

Fig. 4.9 Layout 5 (5/10/2021)

Headlines Font: Universe LT Std (65 Bold, 45 Light)

Body Text Font: Universe LT Std (Bold Condensed, 45 Light)

Point size: 8pt (body text), 10pt,14pt (sub text), 25pt, 40pt (heading)

Leading: 11pt (body text), 12pt,16pt (sub text), 32pt, 51pt (heading)

Line length: 61

Fig. 4.10 Layout 5 (5/10/2021)

Headlines Font: Universe LT Std (65 Bold), Gill Sans Std (Bold)

Body Text Font: Gill Sans Std (Bold Condensed, Light), Serifa Std (Light)

Point size: 9pt (body text), 12pt,14pt (sub text), 46pt (heading)

Leading: 11pt (body text), 13pt, 16pt (sub text), 16pt (heading)

Line length: 61

Fig. 4.11 Layout 6 (7/10/2021)

Headlines Font: Universe LT Std, Serifa Std (65 Bold)

Body Text Font: Gill Sans Std (Bold Condensed, Light), Serifa Std (Light)

Point size: 9pt (body text), 12pt,14pt (sub text), 46pt (heading)

Leading: 11pt (body text), 13pt, 16pt (sub text), 16pt (heading)

Line length: 63

Fig. 4.12 Layout 7 (7/10/2021)

Headlines Font: Universe LT Std (65 Bold)

Body Text Font: Gill Sans Std (Bold Condensed, Light)

Point size: 9pt (body text), 11pt,14pt (sub text), 46pt (heading)

Leading: 11pt (body text), 13pt, 16pt (sub text), 16pt (heading)

Line length: 61

Fig. 4.13 Layout 8 (7/10/2021)

Headlines Font: Universe LT Std (65 Bold)

Body Text Font: Serifa Std (55 Roman)

Point size: 8pt (body text), 10pt, 16pt (sub text), 31pt (heading)

Leading: 11pt (body text), 12pt, 18pt (sub text), 52pt (heading)

Line length: 55

Fig. 4.14 Layout 3-8

Fig. 4.1 Layouts 3-8 blocked out

Final Outcome

Fig. 5.1 Task 2: Typographic Exploration and Communication JPEG  (7/10/2021)

Fig. 5.2 Task 2: Typographic Exploration and Communication PDF  (7/10/2021)

---

FEEDBACK

Week 6 (01/10/2021)

General Feedback: 

Make sure that cross alignment is achieved and that everything is placed align to each other. Be careful to not have any widows and orphans in the text. Draw your sketches out by hand and not do them with your mouse and keyboard. 

Specific Feedback: 

Mr. Vinod told me that my layout was very messy and all over the place, and I have been thinking about the design too much that I did not align the text properly where all my text are placed randomly. 

---

REFLECTIONS

Experiences

Finding a good layout was very difficult for me as I struggle the first few times I made it. I made a few mistakes where I still had orphans and widows in my sentence and did not realize it so I have to redo some parts multiple times to get it right. The alignment was also one part I had difficulty understanding but after a few tries I got it right.

Observation

This tasks made be more observant on the small details that can go wrong in a layout from leading being too big, having widows and orphans no alignment and so on. I realized that one small detail can make a huge difference in the layout and once I get it right it comes out the great

Findings

I found that it was really useful to look up at the further readings books that Mr. Vinod provided us. There was various types of examples and ideas on how to make your overall layout look better. Creating multiple layouts and adjusting them little by little also helps a lot. 

---

FURTHER READINGS

For the further readings I decided to read Typographic design: Form and Communication.

Fig. 1.1 Typographic design: Form and Communication

Fig. 1.2 Multicolumn grid structure

I found this section especially helpful for my task as they explained in detail about the multicolumn grid structure.  A grid structure can help designers organized materials, and make adjustments throughout the design process. 

Multicolumn grids has a unique anatomical characteristics. Including margins that provide boundaries for typographic elements and define space of the page, text columns, gutters that separate text columns and flow lines that create a dominant axis for the alignment of elements from page to page.

Fig. 1.3 Variation of multicolumn grid structure

Be able to make adjustments easily when the sizes of text, leading or line length has change.

Fig. 1.4 Letterform

Through a precise letterform drawing and carefully considered form-to-counterform interaction, two dissimilar letters form a cohesive sign. It exist in various weights, sizes, and shapes.

Fig. 1.5 Poster by Will Kunz

It is a figure/ground reversal in the repetition of the letter T that creates a balanced and expressive poster.

Fig. 1.5 Poster by David Colley

Columns and margins are carefully balanced through the use of contrasting type sizes and weights, and the use of rules.

Fig. 1.6 Visual Hierarchy

A visual hierarchy is an arrangement of elements in a graduated series, from the most prominent to the least prominent, in an area of typographic space.

When elements have similar characteristics, they have equality in the visual hierarchy, but when they have contrasting characteristics, their differences enable them to take dominant and subordinate positions in the composition.

---

REFERENCES

Fig. 1.1 - 1.4

from Week 6 lecture Screen and Print

Fig. 1.5 Motion Typography

https://hackernoon.com/kinetic-typography-quickstart-guide-for-devs-designers-d5c6b5545ade

Fig. 2.1 Magazine layout example 1

https://cargocollective.com/yuliaratman/filter/design/Designs-of-the-articles-for-magazines

Fig. 2.2 Magazine layout example 2

https://www.behance.net/gallery/36435699/InDesign-Multipurpose-Magazine-Template

Fig. 2.3 Code logo

https://en.wikipedia.org/wiki/Code.org

Fig. 2.4 Codes on screen

https://www.ionos.com/digitalguide/websites/web-development/code-editors/

Fig. 2.5 Morse Code

https://en.wikipedia.org/wiki/Morse_code

Further Readings

Typographic Design: Form and Communication, 6th Edition, Rob Carter, Philip B. Meggs, Ben Day, Sandra Maxa, Mark Sanders