Typography | Task 2 : Exercise

 29.5.2024 - ( Week 6 - Week  ) 

Lam Hui Zhen / 0374770
Typography /  Bachelor of Design (Honors) in Creative Media / Taylors University
Task 2:  Exercise

Table of Contents

  1. LECTURES
  2. INSTRUCTIONS
  3. TASKS
  4. FEEDBACK
  5. REFLECTIONS
  6. FURTHER READING

LECTURES

Week 6

Typo_5_Understanding

-Letters / Understanding letterforms
  • Not symmetrical
  • Different stroke weights
  • Each bracket connecting the serif to the stem has a unique arc.
Figure 1.0 Baskerville 'A'

  • May appear symmetrical
  • The width of the left slope is thinner than the right stroke
  • Create letterforms that are internally harmonious and individually expressive
Figure 1.1 Univers 'A'
  • Both Helvetica and Univers letterform of the lowercase "a" have similar sans-serif typefaces
  • Their stems of the letter finish and the bowls meet the stems are different
Figure 1.2  Helvetica and Univers 'a'

-Letters / Maintaining x-height
  • X-height generally describes the size of the lowercase letterforms
  • Some curve strokes rise above the median to appear to be the same size as the vertical and horizontal strokes they adjoin
  • The upper line is the median and the lower line is the baseline
Figure 1.3 Example for above the median

-Letters / Form / Counterform
  • The spacing between the letters is important as recognizing letterforms
  • Counterform includes the spaces between them
  • Latter is an important concept when working with letterforms such as lowercase "r"
Figure 1.4 Form and Counterform
  • Examine the letterform in close detail can help to understand the form and counter of a letter
  • The "S" holds at each stage of enlargement
  • The "g" tends to lose its identity
Figure 1.5 Form and Counterform

-Letters / Contrast
  • Basic principles of GD apply directly to typography
  • The most dynamic in design (Contrast)

Figure 1.6 & 1.7 Contrast

Week 7

Typo_6_Screen & Print

-Typography / Different medium
Typography now appears on screens as well as paper, influenced by operating systems, fonts, devices, and viewports, impacting our experience as typesetting occurs in the browser.
  • Good typography and readability were the results of skilled typesetters and designers
Figure 1.8


-Print Type Vs Screen Type

Print
  • Type was designed intended for reading from print long 
  • Print- Caslon, Garamond, and Baskerville: Common typefaces that are used in printing (Highly readable in small sizes)
  • Versatile, easy-to-digest classic typeface
Figure 1.9 Example of print type

Screen
  • Typefaces intended for use on the web are optimized
  • Serve to improve character recognition and overall readability in the non-print environment
Hyperactive Link / Hyperlink
  • Hyperlink: a word, phrase, or image (Can click on to jump to a new document)
  • Text Hyperlink: 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
  • At least 12 points to read in a book
System Fonts for Screen / Web Safe Fonts
  • Fonts vary by device and operating system.
  • Windows, MacOS, and Android have unique pre-installed font selections.
  • If a chosen font is unavailable and not web-friendly, it defaults to a basic font like Times New Roman.
  • Web-safe fonts ensure consistent appearance across operating systems.
  • Examples of web-safe fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond
Figure 1.10 Screen & Print 

Pixel Differential Between Devices
  • The screen used by our devices not only different sizes but also the text on the screen
  • Single device class there will be a lot of variation
Figure 1.11 Example of Size of different devices

Static Vs Motion

Static
  • Static typography (bold, italic) offers limited expressiveness.
  • Used in billboards, posters, magazines, and fliers.
  • Serves informational, promotional, formal, or aspirational purposes.
Motion
  • Motion typography makes letterforms fluid and kinetic.
  • Commonly used in film title credits and motion graphics.
  • Used in animated brand identities for film and TV production companies.
  • Enhances music videos and advertisements by following the soundtrack's rhythm.

INSTRUCTIONS

Figure 2 Module Information Booklet (Typography)

TASK 2 -  TYPOGRAPHIC EXPLORATION AND COMMUNICATION

In task 2 we are requested to create a 2-page editorial spread by using the selected paragraph and title.
  • Can include minimalist elements, such as lines or shapes
  • No colors are allowed

SKETCHES

I chose the title " Unite to Visualize a Better World", in this stage, I created quite a lot of sketches

Figure 3.0 Sketches


During the consultation time, Mr Max gave me some advice and chose three designs from these for my final digitization

DIGITIZATION



Figure 3.1, 3.2, 3.3 Digitazation


FINAL DIGITIZATION
Moving to this stage I made some changes to each design to make it looks better.


I changed the font of the small sentence and moved the dots from the letter "I" to make sure it is aligned.

I thinner the stroke from the "V" word to ensure overall harmony of the title

Figure 3.4, 3.5, 3.6 Final Digitazation

LAYOUTS

Moving to this stage I insert the title paragraph and play with different layouts
Figure 3.7 Draft of the layout

Three layouts had been chosen, Mr Max asked me to work with these three design and check the kerning and leading of the text to make sure it followed the specification

Figure 3.8 Chosen Layouts after amend

FINAL LAYOUTS

Figure 3.9Final layouts without grid jpg


Figure 3.10 Final layouts without grid pdf

Figure 3.11 Final layouts with grid jpg

Figure 3.12 Final layouts with grid pdf

HEADLINE
Font/s: Univers LT Std Light Condensed

BODY 
Font/s: Futura Std Light
Type Size/s: 10 pt
Leading: 12 pt
Paragraph spacing: 11 pt
Characters per line: 55
Alignment: Rivers (Left Justification)

Margins: Top 12.7 mm, Bottom 12.7 mm, Left 12.7 mm, Right 12.7 mm
Columns: 2
Gutter: 5

FEEDBACK

Week 6

Specific feedback
  • Some didn't bring out the word meaning well
  • Need more 2 designs, focus on one word
Week 7

Specific Design
  • Can play around with the wording size so the design looks more harmonious
  • Change the font of " to visualize a better world", and make sure the words are not distorted
  • Make the word "V" thinner
  • Change the direction of the lines
Week 8
  • Overall ok, can proceed with the 3 design
  • Check the word spacing and kerning

REFLECTIONS

Experience
I'm quite struggling during this task. I think I'm facing some problems while designing the headline. I want to get ahead of myself so I've tried a lot of different designs, but they pretty much look alike. However, I'm quite satisfied with the final outcome though

Observations
It is hard work to design and create a special and good headline. I think I sometimes imagine the design and things too complicated, so it doesn't work well during this time. I found that some of my classmate have simplified but good designs and I need to learn a lot from them.

Finding
Sometimes it's not a bad thing to keep something simple.

FURTHER READING

Figure 6.0 Typography Referenced

Reading Directions and Scanning (Pg 214)
  • Western cultures read from left to right.
  • First glance typically at the upper left-hand corner.
  • Readers scan left to right, then diagonally down, and back left to right.
  • This Z-shaped scanning pattern occurs in magazines, books, and digital media.
Focal Points
  • Dynamic compositions use a focal point to attract attention.
  • Prevents scanning from the top-left corner.
  • The designer controls what the reader views first.
  • Effective for posters, advertisements, package design, and signage.
  • Created through contrasts in size, shape, typeface, color, and texture.
This cover uses a straight line of black type providing sufficient contrast against the circular elements in the designologicus composition, drawing readers' attention to the title.

Figure 6.1 Design Example