Typography Task 2: Typographic Exploration & Communication

October 01, 2021

Typography Task 2: Typographic Exploration & Communication

27/09/2021 - 08/10/2021 (Week 6 - Week 7)
Evaleez Voo Lian Yun / 0350275
Typography/ Bachelor of Design (Hons) in Creative Media
Typography Task 2/ Typographic Exploration & Communication

Lectures

Lecture 5

Understanding Letterforms

Fig 1.0 Baskerville Uppercase (27/09/21)

The uppercase letter forms suggest symmetry, but it is not symmetrical.
There are two different stroke weights of the Baskerville stroke form
Each bracket connecting the serif to the stem has a unique arc.

Fig 1.1 Univers Uppercase (27/09/21)

The width of the left slope is thinner than the right stroke.
Letterforms are created meticulously to be both internally harmonious and individually expressive.

Fig 1.2 Helvetica & Univers Lowercase (27/09/21)

The stems of the letterforms - Helvetica and Univers, finish differently
How the bowls meet the stems reveals the palpable* difference in character between the two.
Overlayed together:

*palpable - so obvious that it can easily be seen or known, or (of a feeling) so strong that it seems as if it can be touched or physically felt

Fig 1.3 Lowercase with Curved Strokes (27/09/21)

Curved strokes, such as ‘s’, 'r', 'a', etc. must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Fig 1.4 Counterform (27/09/21)

It is important to develop a sensitivity to the counterform (or counter)—the space describes, and often contained, by the strokes of the form.
When letters are joined to form words, the counterform includes the spaces between them.
Effects how easily viewers can read what’s been set.

The basic principles of Graphic Design apply directly to typography. Examples of contrast applied to type (based on a format devised by Rudi Ruegg):

Fig 1.5 Contrast in Typography (27/09/21)

Lecture 6

Type for print

It’s the designer’s job to ensure that the text is smooth, flowing, and pleasant to read.
Good typefaces for print (most common):

Caslon
Garamond
Baskerville

Their characteristics are elegant and intellectual but also highly readable when set at small font size.
Example:

Fig 1.6 Typography in a Book (28/09/21)

Type for Screen

Web, e-books, e-readers, and mobile devices
Hyperlink:

A word, phrase, or image that you can click on to jump to a new document or a new section within the current document.
Found in nearly all Web pages, allowing users to click their way from one page to another. Blue and underlined by default
Arrow should change to a small hand pointing at the link.

Web safe fonts (Fonts that overlap from Windows to Mac to Google)

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

Pixel Differential Between Devices:

Fig 1.7 Pixel Differential Between Devices (28/09/21)

Static Typography

Minimal characteristic in expressing words
The level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers
Example:

Fig 1.8 Static Typography (28/09/21)

Motion Typography

Type is often overlaid onto music videos and advertisements, set in motion following the rhythm of a soundtrack.
Developed to become expressive, helping to establish the tone of associated content or express a set of brand values.
Example (Movie Title: Seven/ SE7EN):

Instructions

Module Information Booklet

Visual Research

For this task, we were instructed to create one text layout using the three editorial text options available in the Typography Facebook Group, which can be found here:

For research purposes, I browsed through several projects on Behance and found some excellent references from magazine layouts:

Note: Links to Behance profiles will be added under "References"

Fig 1.9 Magazine Layout 1 (30/09/21)
Source:Thanh T. T. & Old Cat

Fig 2.0 Magazine Layout 2 (30/09/21)
Source:Thanh T. T. & Old Cat

Fig 2.1 Magazine Layout 3 (30/09/21)
Source: Lukasz Aksamit

The designs I found give off a very sophisticated look without much use of colours, which were perfect research materials as this task only allows greyscale finals. Moreover, the typefaces they used and how the layout is structured provides good readabilty and comfort in skimming through words. My observations:

The reading direction is from a left to right basis.
Title is clearly emphasized with different porporrtions when compared to the body text.
Ragging done well in designs that used left flush.
No orphans or widows.
The background doesn't clash with the words, even though it's big, with a variance in opacity.
Handwirtten feel in the third photo contrasts with the overall look in an artistic way.

Idea Exploration and Description

1. Layout 1

Fig 2.2 Layout Idea 1 1 (30/09/21)

Fig 2.3 Layout Sketch 1 (30/09/21)

Decription:

Since the text I chose contained a lot of names, I decied to place them on the right side of the compostition as a means of distinction between the body text and the listed names; as it is a manifesto, so the signatures must have a certain amount of weight for each indivual.

2. Layout 2

Fig 2.4 Layout Idea 2 (30/09/21)

Fig 2.5 Layout 2 Sketch (30/09/21)

Description:

For layout 2, I chose a more sophisticated approach, much like my first reference. I aimed to place the list of names in the middle column of the 2nd page, with the body text placed beside them. Moreover, I added lines to the title to give it more emphasis.

3. Layout 3

Fig 2.6 Layout Idea 2 (30/09/21)

Fig 2.7 Layout 3 Sketch (30/09/21)

Description:

For layout 3, I wanted to give a more visual aspect to the title and arranged it to form a stair visual. It also serves a purpose to frame the body text and guid the eyes to the important components of the text.