ADVANCED TYPOGRAPHY - EXERCISES

14/04/2020 - xx/xx/20 (Week 1 - Week x)

Farissa Eryna Binti Shahar Sham

Advanced Typography

Exercises

                                                                                                                                                                  

LECTURE NOTES 

Lecture 1: Briefing

14/04/20

We had our first class via Facebook live due to the covid-19 pandemic with Mr Vinod and Mr Shamsul. Mr Vinod briefed us regarding the module and gave us a lecture afterwards.

He explained to us about the 8 typographic systems which is radial, dilational, bilateral, random, grid, modular, axial and transitional. 

Axial
Elements are organized either to the left or right of a single axis. The axis can exist anywhere in the format to create a symmetric or asymmetric composition.

Radial
Only one central point of focus. Elements are organized to extend from a central point of focus like rays.

Dilational
Design along a circular path. In this system, circles dilate or expand from a central point.

Random
This system consists of elements that are arranged without a specific aim, pattern, direction or rule.

Grid
Design with vertical and horizontal division. This system creates relationships between elements and it is usually formal to create visual order.

Transitional
This system is an informal system of layered and shifted banding. The elements or body text should move in a harmonious way and has a particular flow.

Modular
Design with standardized units. Compositions are created by the organization and placement of the modular units. It is also similar to the grid system. The units are usually all the same size.

                                                                                                                                                                  

INSTRUCTIONS

EXERCISES

For our first exercise we were required to explore the 8 typographic system and apply the system to the content given in Adobe InDesign. The document size is: 200 x 200 mm artboard

As we could choose between three titles, I chose 'Russian Constructivism and Graphic Design".

Here are the event details:

The Design School,
Taylor's University

Open Public Lectures: Lecture Theatre 12

November 24 2020
Lew Pik Svenn, 9-10 am
Ezrene Mohd, 10-11 am
Suzy Sulaiman, 11-12 pm

November 25 2020
Muthu Neduraman, 9-10am
Fahmi Reza, 10-11 am
Fahmi Fadzil 11-12 pm

To start off with the exercise, I sketched out a few of my ideas.

Fig 1.1 Sketch; Axial

Fig 1.2 Sketch; Bilateral

Fig 1.3 Sketch; Radial

Fig 1.4 Sketch; Dilational

Fig 1.5 Sketch; Modular

Fig 1.6 Sketch; Grid

Fig 1.7 Sketch; Transitional

Then, I started the design process in Adobe InDesign. 

 Fig 1.8 Process; Document set up

Fig 1.9 Process; Creating guides

Afterwards, I started working on the first system which is axial. 

Fig 1.10 Process; Axial

For Axial, I used Futura for both pages. 

Fig 1.11 Process; Radial

I used Gill Sans Std for both pages.

Fig 1.12 Process; Dilational

I used Futura for both these pages.

Fig 1.13 Process; Grid

Font used in these both pages is Futura.

Fig 1.14 Process; Modular

I used Gill Sans Std for these pages.

Fig 1.15 Process; Transitional

Fig 1.16 Process; Bilateral

I used ITC Garamond for these pages.

Fig 1.17 Process; Random

Here is the JPEG file:

Fig 1.18 Axial

Fig 1.19 First draft; Dilational

Fig 1.19 First draft; Radial

Fig 1.20 First draft; Grid

Fig 1.21 First draft; Transitional

Fig 1.22 First draft; Bilateral

Fig 1.23 First draft; Modular

Fig 1.24 First draft; Random

After getting a feedback for all the systems, I made some changes to improve on it.

Fig 1.25 Revised; Axial

Fig 1.26 Revised; Dilational

Fig 1.27 Revised; Radial

Fig 1.28 Revised; Grid

Fig 1.29 Revised; Transitional

Fig 1.3 Revised; Bilateral

Fig 1.31 Revised; Modular

Fig 1.32 Revised; Random

Type and Play 

Exercise 2 (Part 1)

Week 3

For exercise 2 (part 1) : We have to make a selection of image between man-made objects (chair, glass, etc.) or structures (buildings), and nature (Human, landscape, leaf, plant, bush, clouds, hill, river, etc). 

I took a picture of  the door grills in my house. These are the pictures I chose for this exercise.

Fig 2.1 & Fig 2.2 Original pictures

Fig 2.3 Tracing process

Fig 2.4 Tracing result

Fig 2.5 Arranging the letters

Fig 2.5 Reference

Fig 2.6 1st refinement; C

Fig 2.7 1st refinement; Y

Fig 2.8 1st refinement; V

Fig 2.9 1st refinement; S

Fig 2.10 Comparison of original (top) and 1st refinement (bottom)

From this comparison, I noticed the thickness of stroke in the letters vary. So I decided to do further refinement.

Fig 2.11 2nd refinement; C

Fig 2.12 2nd refinement; Y

Fig 2.13 2nd refinement; V

Fig 2.14 2nd refinement; S

Fig 2.15 Comparison of 1st refinement (top) and 2nd refinement (bottom)

In my 3rd refinement process, I made sure the sizes are standard for all letters as well as their stroke size. I decided to make further refinement to the latter S and C.

Fig 2.21 Comparison of 2nd refinement (top) and 3rd refinement (bottom)

Fig 2.22 Comparison of original (top) and 4th refinement (bottom)

After receiving a feedback, I decided to improve on the letter S and V. I made changes to the thickness of S. (5th refinement/Final refinement)

Fig 2.23 C; Final

Fig 2.24 Y; Final

Fig 2.25 V; Final

Fig 2.26 S; Final

Fig 2.23 Comparison of original (top) and final (bottom)

Type and Play 

Exercise 2 (Part 2)

Week 4

For exercise 2 part 2, the objective is to enhance/support the interplay between the letter/word/sentence and the selected image. The text must be woven into a symbiotic relationship with the image. 

We must only use 4-5 words, and use the typefamilies that had been given earlier. These are the images I chose.

Fig 2.24 & 2.25 Original pictures

So for the first image (fig 2.24), I decided to remove the background and change it to a solid blue background. 

Fig 2.26 Process

Fig 2.27 Process 

Fig 2.28 First attempt; Strength

For the second image (Fig 2.25), I decided to focus just focus on one word.

Fig 2.29 Sketch; Layouts

Fig 2.30 Process; Arranging the letters

Fig 2.31 Process

Fig 2.32 Second attempt; Disconnect (Layout 1)

However, after the second attempt, I felt like I could enhance the word a little bit more.

Fig 2.33 Process; Arranging objects and letters

Fig 2.34 Process; Letters

Fig 2.35 Process; Arranging the small particles

Fig 2.36 Third attempt; Disconnect (Layout 2)

After getting a feedback, Mr Vinod said I could make the object and the words bigger so there isn't too much of a blank space.

Fig 2.37 Final attempt; Disconnect 

                                                                                                                                                                 

FEEDBACK

Week 1 (14/04/20)
General feedback: We should limit the use of non-objective elements, only when necessary. We are only allowed to use 3 colours and the 9 type families provided. We also need to update the feedback sheet on our blog.

Specific feedback: No specific feedback given.

Week 2 (21/04/2020)
Specific feedback: Axial; All good
Dilational; Mr Vinod likes the left page/side but overall good
Bilateral; All good
Modular; All fine 
Radial; My title for the second page/right side can be better as it is too horizontal.
Random; It's okay and fine but can be more random

General feedback: Numbers should be a pt or two smaller and the gutters can be removed if not needed. Update feedback as soon as we receive it.

Week 3 (28/04/2020)
Specific feedback: Overall good work, and the thickness is really good as well. But i could still try to make it thicker but it might work and might not. Mr Vinod likes the letter Y and he thinks it's very classic. The letter S's thickness could be more consistent and the letter V's point needs to be vertical.

Nice work. If you have the time. You can try giving an overall increase of thickness and see if that looks better. If not maintain.

General feedback: Always update our blogs and apply the feedback given to others to yourself if relevant.

  REFLECTIONS

Experience.

Week 1; I really liked this exercise as it benefits me in so many ways. Random system is much harder than I thought it would be!
Week 2; I enjoyed doing this exercise as well! :)
Week 3; I miss having classes in the studio

Observations
Week 1; I realized that a lot of students struggle on the random system as well.

Week 2; After this exercise, I gained a lot more appreciation towards the creation and process of a particular font.

Findings.

Week 1; I found that the leading, text size, spacing plays a HUGE role in these systems.
Week 2; I can actually get materials for this particular exercise from my house. 

                                                                                                                                                                  

FURTHER READING

The Anatomy of A Type: Introduction to Typography by Hollie Arnett 

(10/05/2020)

Fig 3.1 The Anatomy of Type: Introduction to Typography

"Understanding the anatomy of type will enable you to see what is right and wrong in type."

Here is a brief overview of the 30 anatomical parts of typography that I read about in the website:

1. Ascender

The part of the letter that extends above the x-height of a font as seen in l h f t h d and b.

2. Bowl

A closed curved stroke as seen in b d o p q D O P Q and B which has two bowls.

3. Terminal

The end of an instroke or outstroke that does not include a serif.

4. Leg

Short, descending portion of a letter, seen on a K, R and Q.

5. Crossbar

A short stroke connecting to other strokes, such as the stroke of an A H f or t.

6. Beak

A style of decorative stroke at the end of the arm of a letter, such as a capital T and E.

7. Head Serif

A serif at the top of an ascender.

8. Closed Counter

A closed area of negative space (white space) formed by straight and/or curved strokes.

9. Aperture

An open area of negative space (white space) formed by straight and/or curved strokes in letters such as c f h i s m and n. Also known as an open counter.

10. Open Counter

An open area of negative space (white space) formed by straight and/or curved strokes in letters such as c f h i s m and n. Also known as an aperture.

From reading this website, I recapped on my knowledge on type anatomy. I learned that to understand typography better, I must be able to distinguish between different typefaces.