ADVANCED TYPOGRAPHY // Lectures & Task 1 (Exercises)

March 28, 2021

ADVANCED TYPOGRAPHY // Lectures & Task 1 (Exercises)

Week 1 - Week 5 (29/03/2021 - 26/04/2021)

Fann Man Ling - 0344623 (BDCM)

Advanced Typography // Mr. Vinod, Mr. Azrizal Razali

Lectures & Task 1 (Exercises)

LECTURE

WEEK 1 // 29.03.2021

INTRODUCTION

Today, Mr. Vinod briefed us about the module information and the assignments. He then assigned an exercise for us to do in the class after he played the recorded lecture video. The exercise was about using the Axial typographic system to design a typography poster with texts given in the MIB.

LECTURE 1 : TYPOGRAPHIC SYSTEMS

Lecture 1

8 Variations:

1. Axial

2. Radial

3. Dilatational

4. Random

5. Grid

6. Modular

7. Transitional

8. Bilateral

Criteria:

Hierarchy

Order of Reading

Legibility

Contrast

AXIAL

all elements are organized to the left / right of a single axis.

axis can be straight / bend.

can be multiple lines (axis).

Fig 0.1: Axial System (Source: Pinterest)

RADIAL

all elements are extended from a point of focus.

can be multiple points of focus.

Fig 0.2: Radial System (Source: Google)

DILATATIONAL (circular)

all elements expand from a central point in a circular fashion.

place information in a hierarchical manner. (most important to least important ) inner circle to outer circle or vise versa / at other circles)

can be multiple rings (circles)

Fig 0.3: Dilational System (Source: Google)

RANDOM

elements appear to have no specific pattern / relationship.

Fig 0.4: Random System (Source: Pinterest)

GRID

a system of vertical & horizontal divisions.

-often used in a larger amount of text.

Fig 0.5: Grid System (Source: Pinterest)

TRANSITIONAL

an informal system of layered banding (separating information into certain bands).

Fig 0.6: Transitional System (Source: Google)

MODULAR

a series of non-objective elements that are constructed in a standardized unit.

units can be randomly placed, although not within a larger grid.

e.g.: can shift the left to the right or vise versa.

Fig 0.7: Modular System (Source: Pinterest)

BILATERAL

all text is arranged symmetrically on a single axis.

-often used in the invitation card.

Example of techniques used in works have done by seniors:

Use different typefaces (show hierarchy):

- Sans serif, Bold, large > Headline

- Italic , Regular > Text

Bend the information that is related (shows variation)

Use 2 axis - Horizontal & Vertical

Use 2 bilateral system

Fig 0.8: Bilateral System (Source: Pinterest)

WEEK 2 // 05.04.2021

LECTURE 2 :TYPOGRAPHIC COMPOSITION

Lecture 2

COMPOSITION (Emphasis, Rule of Thirds, Grid System, Environmental Grid, Form & Movement)

Principles:

Emphasis, Isolation, Repetition, Symmetry, Asymmetry, Alignment, Perspective, etc.

In Typography, the principles seem ambiguous as they are more relevant to imagery.

Emphasis can be shown like the below:

Fig 0.9: Emphasis (Source: Lecture video)

Rule of Third

The intersecting lines are used as a guide to place the points of interest, within the given space.

Generally never used, but it is still part of the composition element that used to make decisions on placement on important information within the given place.

Example: columns of text placed on either side and the most important information placed within the intersecting point.

Fig 0.10: Rule of Third (Source: Lecture video)

Grid System (Raster System)

Most used system in typography composition. (Pragmatic option)

Chaos, Randomness, Asymmetry was explored during the post-modernist era.

Designers: David Carson, Paula Scher, Jonathan Barnbrook are the proponent.

Arrangement was replaced with apparent chaos that is exciting, being exposed to Punk anti-establishment thought and music : Asymmetry, Random, Repetition, Dialatational, Radial System.

Fig 0.11: Exciting typography design (Source: Lecture video)

Environmental Grid

Based on the exploration of an existing structure / few structures combined.

Designer organizes his information around this super-structure, which includes non-objective elements to create a mixture of texture and visual stimuli.

^Look at an interior space and exterior space, using the structure (building's/ etc), then extrapolate lines & curves of that particular structure, then based your informational arrangement around the particular structure.

Fig 0.12: Environmental Grid (Source: Lecture video)

Form & Movement

Exploration of an existing Grid System.

The forms could be represented images / text / colour.

Example:

Non-objective element is placed within a larger grid system, minor elements are introduced along with this larger elements and they try to maintain a connection between one spread to another spread.

e.g: Replace all the black larger non-objective element with visual (Images) / text.

e.g.:Replace the negative / postive place with images.

Non-objective element doesn't need to be square, could be circular in nature as well. (Don't be too decorative)

Fig 0.13: Form & Movement_1 (Source: Lecture video)

The level of complexity increases as newer elements are introduced: additional of one colour, then image, then dummy text, and so on.

Example:

Fig 0.13: Form & Movement_1 (Source: Lecture video)

WEEK 3 // 12.04.2021

LECTURE 3 : CONTEXT & CREATIVITY

Lecture 3

Lecture for this week is all about the history of typography from the ancient past:

Handwriting, ancient pictographs.

Studying handwriting is important because the first mechanically produced letterforms were designed to directly imitate handwriting.

Programmers & Type Design

With the advent of computer programmers in large numbers, more scripts on phones, tablets, computers are being seen.

Google produced more vernacular scripts.

Local Movement and Individuals

Instead of looking to and following the footsteps of the Western and adopting their cultures, we should look in the East.

Advise: In order to be original, designers need to look inward, look into our vast history, adopt our own culture. Creativity and inspiration should begin by observing our surroundings and exploration of our collective histories.

WEEK 4 // 19.04.2021

LECTURE 4: DESIGNING TYPE

Lecture 4

Why Design Another Font?

1. Type design carried a social responsibility in improving its legibility.

2. Type design is a form of artistic expression.

ADRIAN FRUTIGER (1928 - 2015)

Swiss type designer.

Designed Univers, Frutiger, Avenir.

Adiran Frutiger (Source: Google)

Frutiger (sans serif typeface)

Initially designed for the newly built Charles de Gaulle International Airport in France.

Purpose: Create a clean, distinctive and legible typeface that is easy to see from both close-up and far away.

Hence, Frutiger is used commonly as signage in a departure lounge / airport.

Frutiger Font (Source: Google)

MATTHEW CARTER

British type designer

Designed Verdana, Georgia, Tahoma (Window Typeface), Bell Centennial.

His typeface is mainly created to address specific technical challenges. (e.g. early computers)

Matthew Carter (Source: Google)

Verdana (for Microsoft)

Designed using pixel instead of a pen, the brush, or the chisel. (unline other fonts)

Purpose: The font was turned to be extremely legible even at a very small size on the screen due in part to the popularity of the internet and electronic devices.

Bell Centennial

Designed to solve the technical and visual problems related to the existing phonebook typefaces.

EDWARD JOHNSTON

Designed Johnston Sans.

Edward Johnston (Source: Google)

Johnston Sans

A typeface with "bold simplicity" that was truly modern yet rooted in tradition.

Combined classical Roman proportions with humanist warmth.

Purpose: For London's Underground railway that needs a new typeface for its posters and signage.

* Gill Sans looks similar to the typeface.

GENERAL PROCESS OF TYPE DESIGN

1. Research

2. Sketching

3. Digitization

4. Testing

5. Deploy

WEEK 5 // 26.04.2021

LECTURE 5: PERCEPTION & ORGANISATION

Lecture 5

PERCEPTION

in Typography: Visual Navigation & Interpretation of the reader via:

Contrast
Form
Organization

CONTRAST

Carl Dair posits 7 kinds of Contrast:

1. SIZE

title & heading bigger than body text

2. WEIGHT

bold, rules, spot, squares

3. FORM

distinction between capital & lowercase / roman & italic / condensed & expanded versions

4. STRUCTURE

Different letterforms of different kind of typefaces (Different fonts)

5. TEXTURE

Putting together the contrasts of size, weight, form, structure, and applying them to a block of text on a page.

6. DIRECTION

Horizontal & Vertical

7. COLOUR

Introduce colour in Headline / particular pieces of information.

Not too much > cause counterproductive.

Rudi Regg devised that:

Contrast devised by Rudi Reugg (Source: Lecture Video)

TEST: Which of these contrast works better :

Good Contrast (Source: Lecture Video)

FORM

refers to the overall look and feel of the elements that make up the typographic composition.

Good: visually intriguing to the eye, entertains the mind, and is most often memorable.

leads the eye from point to point.

Forms make typography memorable (won't read then forget).

ORGANISATION / GESTALT (Groupings)

look at the whole of experience.

In design (typographic layouts), designers have to look at the unified whole, to see how it relate with each other, how one flows from the other to another. (understand the way a group of information is perceived)

1. Similarity

2. Proximity

3. Closure

4. Continuation

5. Symmetry

6. Simplicity

INSTRUCTION

Module Information Booklet

EXERCISES // PRACTICAL

WEEK 1 // 29.03.2021

Below is the exercise that we were assigned to do in the class:

Fig 1.1: Draft_Axial_In-class exercise (29/03/2021)

During the feedback session, instead of receiving feedback from Mr. Vinod, he broke us into groups and let the peers comment on our work.

After getting feedback from my groupmate in which it does not adhere to the Axial system, I've made changes to it:

Fig 1.2: Final Axial_In-class exercise (29/03/2021)

Task 1:

(1) Typographic Systems

(2) Type & Play:

Part 1: Finding type

Part 2: Type & Image

Task 1 (Part 1): Typographic Systems

After that, we were tasked to explore the 8 typographic systems and apply them to our first exercise. We were asked to create 8 layouts of each typographic system and we were encouraged to do more attempts before decided which layout was the final design. The layout should be on a size 200 x 200 mm spread and we can use another color than black, as well as the graphical elements but limitedly.

Below are the content that we are going to use in exploring the 8 systems:

The Design School,
Taylor's University

All Ripped Up: Punk Influences on Design
or
The ABCs of Bauhaus Design Theory
or
Russian Constructivism and Graphic Design

Open Public Lectures:
June 24, 2021
Lew Pik Svonn, 9AM-10AM
Ezrena Mohd., 10AM-11AM
Suzy Sulaiman, 11AM-12PM
June 25, 2021
Lim Whay Yin, 9AM-10AM
Fahmi Reza, 10AM-11AM
William Harald-Wong, 11AM-12PM

Lecture Theatre 12

IDEATION

We were suggested to sketch out the ideas first before creating them in Adobe InDesign.

Fig 1.3: Sketches (03/04/2021)

PROCESS

Next, I digitalized them in Adobe InDesign.

Fig 1.4: Axial 1_process

Fig 1.5: Axial 2_process

Fig 1.6: Radial_process

Fig 1.7: Dilatational_process

Fig 1.8: Random_process

Fig 1.9:Grid_process

Fig 1.10: Transitional_process

Fig 1.11: Modular_process

Fig 1.12: Bilateral_process

ATTEMPT #1:

Axial system

Fig 1.13: Axial 1 (03/04/2021)

Fig 1.14: Axial 2 (03/04/2021)

Radial system

Fig 1.15: Radial (03/04/2021)

Dilatational system

Fig 1.16: Dilatational (03/04/2021)

Random system

Fig 1.17: Random (03/04/2021)

Grid system

Fig 1.18: Grid (03/04/2021)

Transitional system

Fig 1.19: Transitional (03/04/2021)

Modular system

Fig 1.20: Modular (03/04/2021)

Bilateral system

Fig 1.21: Bilateral (03/04/2021)

WEEK 2 // 05.04.2021

After receiving feedback from my peers and Mr. Vinod, I made adjustments to my works.

Readjustment:

AXIAL

I reduced the size of some letters by 0.5pt in order to make it looks harmonious with the numbers and I also did kerning to the date. Other than that, I amended the title by adjusting their letterspacing.

Fig 1.22: Final_Axial (10/04/2021)

RADIAL

I redid another layout for this system as I think the previous one is not good enough.

Fig 1.23: Final_Radial (11/04/2021)

DILATATIONAL

I modified the colour of some information to make it look consistent with other layouts.

Fig 1.24: Final_Dilatational (10/04/2021)

RANDOM

I redid another layout for the Random system as well since the previous attempt didn't adhere to the system.

Fig 1.25: Final_Random (11/04/2021)

GRID

I added paragraph spacing to the group of names and the group of times in order to distinguish the separated information. Plus, I reduced the point size of some letters by 0.5pt for fear of the letters looks no harmony with the numbers.

Fig 1.26: Final_Grid (10/04/2021)

TRANSITIONAL

I decided on this as my final Transitional system as it has better composition and movement than the previous one.

Fig 1.27: Final_Transitional (10/04/2021)

MODULAR

I altered the timezone (am, pm) letters to uppercase and reduced their point size by 0.5pt, and I amended the letterspacing of "Graphic Design".

Fig 1.28: Final_Modular (10/04/2021)

BILATERAL

I added paragraph spacing to the group of names and times as well. Moreover, I adjusted the line that as a connection between the group "The Design School" and "Venue: Lecture Theatre 12", and I tried to improve the composition. Same goes for this one, I also did the 0.5pt reduced size on some letters.

Fig 1.29: Final_Bilateral (10/04/2021)

Final PDF:

Fig 1.30: Final_Task 1(A).pdf (11/04/2021)

TASK 1(Part 2 [A]) : Type & Play

WEEK 2 // 05.04.2021

We were tasked to make a selection of images between man-made objects (chair, glass, etc.) or structures (buildings), and nature (leaf, plant, human, clouds, etc.), and then analyze, dissect, identify 5 potential letterforms within the dissected image. The forms would be explored and ultimately digitized

For this exercise, I picked a photo of a transmission tower online as I found its characteristic could make some potential letters.

Fig 2.1: Photo of transmission tower (Source: Unsplash)

I then traced the picture in Adobe Illustrator with pen tool after I've made the picture into grey colour.

Fig 2.2: Tracing Process in Adobe Illustrator (09/04/2021)

Below is the tracing result:

Fig 2.3: Result (Tracing)

Dissection of image and finding 5 possible letterforms:

Fig 2.4: Letters found in transmission tower (A, B, R, D, P, K, O) (10/04/2021)

Fig 2.5: Letters extracted

I personally think P, K, R, A, B are good, thus I decided to go for those.

Fig 2.6: Letters chosen

Then, I started to refine the font. For the refining part, we need to place them in the baseline and make sure the font still remaining its characteristics.

Process of Refining Text:

I tried to adjust all the strokes of the letters to be stuck to the baseline.

Fig 2.7: Original letterforms

Fig 2.8: Refining Attempt #1

Next, I decided to make their strokes straight.

Fig 2.9: Refining Attempt #2

WEEK 3 // 12.04.2021

After listening to the general feedback given by Mr. Vinod in the class, I decided to make their stem thicker and be the same thickness because the consistency of stroke makes a better font design. Moreover, I tried to condense the letter "B" to make it looks consistent abit.

Fig 2.10: Refining Attempt #3

Comparison between Attempt #2 & Attempt #3:

Fig 2.11: Comparison between Attempt #2 (top) and Attempt #3 (bottom)

In order to standardize the letterforms, I refined them with the same size. Plus, I made changes to the strokes, bowls, apex of letter "A", croth of letter "K", and ear of letter "R". Subsequently, I refined them with different stroke size in an attempt to give depth and ensure it still retains the characteristic of the tower. In that case, I did took some reference to some existing typeface that looks similar to the shape of the tower, squarish, and ironlike for a better result.

FINAL ATTEMPT:

Progress (further refinement)

I made sure the letterforms are even in the width, height, position, and size with the help of grid guides.

Fig 2.12: Process_Grid guides

Typeface References:

Fig 2.13: Typeface reference

Final Result:

Fig 2.14: Final attempt (15/04/2021)

Fig 2.15: Final refined letter "P"

Fig 2.16: Final refined letter "K"

Fig 2.17: Final refined letter "P"

Fig 2.18: Final refined letter "A"

Fig 2.19: Final refined letter "B"

Comparison:

Fig 2.20: Comparison between Attempt #3 (top) and Final Attempt (bottom))

Final PDF:

Fig 2.21: Final_Type & Play .pdf (15/04/2021)

TASK 1(PART 2 [B]): Type & Image

WEEK 4 // 19.04.2021

We were tasked to creatively combine a visual with a letter/ word/ sentence. The aim is to enhance or support the interplay between the letter/ word/ sentence and the selected visual. The text must be woven into a symbiotic relationship with the image.

For this exercise, I chose the photo from Pinterest and editing it in Adobe Photoshop.

Attempt #1:

Fig 3.1: Photo 1 (Source: Pinterest)

Fig 3.2: Attempt #1 (24/04/2021)

Attempt #2:

Fig 3.3: Photo 2 (Source: Pinterest)

Fig 3.4: Attempt #2 (24/04/2021)

After getting feedback from Mr. Vinod saying that the works I attempted were basic interplay level, thus I decided to create another new design with new images.

Attempt #3:

Fig 3.5: Photo 3 (Source: Pinterest)

I got the idea to make the text reflects on the window of the car. I first flipped the text horizontally as I think the reflection should be that logically, then I used 'Filter - Vanishing Point' in Photoshop in order to adjust the perspective of the text.

Fig 3.6: Attempt 3 (04/05/2021)

I figured to do more attempts on the different images so that I can get the best one.

Attempt #4:

Fig 3.7: Photo 4 (Source: Pinterest)

Then, I attempted 2 ways on matching the text. As her mouth seems like she is shouting and it is sufficient to express the context, I got the idea to cover her eyes with the text with some brush effects.

Fig 3.8: Attempt 4_1st version (04/05/2021)

When looking at the shadow reflected behind her, the idea of making the text appears as a shadow came across my mind. Hence, I applied and adjusted the blending mode on the text, and also applied Pitch filter on the text so that it seems more real.

Fig 3.9:Attempt 4_2nd version (04/05/2021)

Attempt #5:

Fig 3.10: Photo 5 (Source: Pinterest)

When I look at the hand and the colour of the sleeve, the idea of sand scattering from the hand came up in my mind.

Fig 3.11: Attempt 5_1st version (04/05/2021)

I felt that it still had improvement that I can make, so I went to ask for feedback from my friend, he suggested I add more sands that surround the text to make it become more realistic. Then, I took the suggestion and amended it.

Fig 3.12: Attempt 5_2nd version (04/05/2021)

Final Work:

I opted for Attempt #4 as my final work as I think there's high realisticness involved in the use of the text as compared to other attempts.

Fig 3.13: Final Work_Attempt 5 (04/05/2021)

Final PDF:

Fig 3.14: Final Type & Image .pdf (04/05/2021)

FEEDBACK

WEEK 1 // IN-CLASS EXERCISE

Specific Feeback:

The feedback that I got from my peer, Naim, is my poster design was more tend to the Grid system, and there's improvement can be made for composition. However, he liked the body text I've used for timing, the short form for "lecture theatre 12", and how I've highlighted the name of the lecturer and the date. Other than that, the hierarchy is fine.

WEEK 2 // TASK 1(PART 1) (TYPOGRAPHIC SYSTEM)

General Feedback:

- Ensure harmony in the layout. For example, reduce the size of letters by 0.5 pt if the font doesn't have lowercase numbers.

- Equalize the space between letters by using kerning.

Specific Feeback:

Feedback from peers (Phoebie, Jocelin, Jia Yee, Tara):

Axial: Don't do letterspacing between the title.

Radial: The colour of the non-objective elements is too bright, and the colour needs to be consistent for all the layouts (works).

Dilatational: The use of letterspacing for "The Design School" under the title might be inappropriate.

Random: The layout seems not random enough, thus it did not adhere to the random system.

Grid: This layout is fine.

Transitional: The group of "The Design School" and "open public lectures" seem distinguished from the rest of the information with movement and flow. It might need to be altered.

Modular: The letterspacing between "Graphic Design" looks weird.

Bilateral: Same goes for this, the letterspacing is inappropriate to be used in the "Bauhaus" of the title. The white space between the line that is a connection of the group of "The Design School" and "Venue: Lecture theatre 12" is imbalanced.

Feedback from Mr. Vinod:

- Fitting information in a box with letterspacing is not good. (Modular)

- Make sure the texts is in the content of artboard for fear of there's large and awkward space. (Dilatational)

- Introducing paragraph spacing between the content (schedule) would do good for the composition (to separate information) (Grid)

WEEK 3 // TASK 1 (PART 2 [A]) (TYPE & PLAY: Finding Type)

General Feedback:

- Ideal typeface design should be looks professional and at the same time, it still retains the characteristic of the subject.

- The end result is not necessary to be super smooth, it can be a decorative and expressive font design, but, it has to carry consistent stroke and pattern.

- We are encouraged to look for typeface references when refining our letterforms.

Specific Feedback:

Feedback from peers (Shin Tung, Dhanveer, Sajiya, Yuan Ting):

- Make sure the stroke and its weight are consistent.

- The bowl of the letter "B" should be fit to the x-height in order to keep it consistent with other letters.

- The letterforms could be refined more.

WEEK 4 // TASK 1 (PART 2 [A]) (TYPE & PLAY: Finding Type)

Specific Feedback:

Feedback from peers (Emma, Lina, Jessica):

- The letters look consistent and well-refined.

- The width of all letters is consistent.

- Mr. Vinod likes the letter "K".

WEEK 5 // TASK 1 (PART 2 [B]) (TYPE & IMAGE)

General Feedback:

- Look at the choice of picture, realisticness involved in the use of Type, the interplay.

Specific Feedback (Attempt 1, 2):

Feedback from peers (Dhanveer, Naufal):

- Can add shadow to the letters.

- Might need to add shadow and details to differentiate the "ON"

Specific Feedback (Attempt 3,4,5):

I asked for opinions from three friends of mine, they all agreed that Attempt #4 is the nicest in terms of its composition, realisticity, and unity as compared with the rest of the attempts,

REFLECTION

Experience

I was quite shocked when we were given the typography system task at the beginning of the class. I worried if I have sufficient understanding before jumping into implementing the task. However, the exercise is quite helpful in a sense as it literally gives me an idea of how typography can be designed. I'm glad that I finally understand the typography works I've seen on Pinterest is achieved by using a Typographic system.

Observation

I observed my classmates so practical and knowledgeable in doing the task like I am the only person who worried about the task. It makes me feel I need to improve more on my skill.

Findings

I found out that I was not confident with the works I've done for Typography, thus I did not really confidence in giving feedback to my peers as well during the peer feedback session. Every time I think there's an improvement that my peer can be done in their work, I worried to point it out as I wasn't that sure if my sense is correct until someone pointed it out as well. And sometimes I was content with my final outcomes but I still have the sense that it might not be as good as I think.

Search This Blog

Fann Man Ling (0344623)