Labels

Advanced Typography / Task 1: Typographic Systems & Type Play

28.03.2022 - 18.04.2022 (Week 1 - Week 4)
Lulu Luisa Linardi / 0349358 / Bachelor of Design (Hons) in Creative Media
Advanced Typography
Task 1 / Typographic Systems & Type Play

LECTURES

Fig 1.0: Thumbnail

Link to:
Final Compilation & Reflection

LECTURE 1: Typographic Systems

Typographical organization is complex because the elements are dependent on communication in order to function. Additional criteria such as hierarchy, order of reading, legibility, and contrast also come into play.

The typographic systems are akin to what architects term shape grammars. The typographic systems are similar that the systems has a set of rules that is unique and provides a sense of purpose that focuses and directs the decision making.

"All design is based on a structural system" and according to Elam, 2007, there are eight major variations with an infinite number of permutations. These eight major variations are as follows:
1. Axial System
All elements are organized to the left or right of a single axis. Information is divided into groups, and it is placed in the different angle/sides of the axis.

Fig 1.1.1: Axial system

Fig 1.1.2: Axial system example

2. Radial System
All elements are extended from a point of focus. It spreads out according to the particular point of focus. Basically, all sentences are pointing towards that point of focus.

Fig 1.1.3: Radial system

Fig 1.1.4: Radial system example

3. Dilatational System
All elements expand from a central point in a circular fashion/manner. Can have multiple rings of circle with information on either sides or inline with the circles.

Fig 1.1.5: Dilatational system

Fig 1.1.6: Dilatational system example

4. Random System
Elements appear to have no specific pattern or relationship. Even though it's random, there is a method in creating the chaos within the page.

Fig 1.1.7: Random system

Fig 1.1.8: Random system example

5. Grid System
A system of vertical and horizontal divisions. It's the most common system that is used by everyone.

Fig 1.1.9: Grid system

Fig 1.1.10: Grid system example

6. Transitional System
An informal system of layered banding. Usually, it uses different sizes, weight, and color of typeface which makes it looks more exciting.

Fig 1.1.11: Transitional system

Fig 1.1.12: Transitional system example

7. Modular System
A series of non-objective elements that are constructed in as a standardised units.  

Fig 1.1.13: Modular system

Fig 1.1.14: Modular system example

8. Bilateral System
All text is arranged symmetrically on a single axis. 

Fig 1.1.15: Bilateral system

Fig 1.1.16: Bilateral system example

LECTURE 2: Typographic Composition

Principles of Design Composition
When talking about composition, we think about the dominant principles underpinning design composition, such as emphasis, isolation, repetition, symmetry and asymmetry, alignment, and perspective to name a few.
However, these abstract notions seem ambiguous when it comes to translating it into typographic layouts or composition. It seems more relevant to imagery than complex units or information that consist different elements.

Fig 1.2.1: Principle of Design Composition

Typographic Systems
From the 9 typographic systems, the most pragmatic and used system is Grid System, which is derived from the grided compositional structure of Letter Press printing.

In reaction to this very ordered approached to Typography of the modernist era, a group of younger designers began to question and challenge this notion of order. Thus was born the post-modernist era in Typographical systems where chaos, randomness and asymmetry were explored. Legibility and readability were relegated to the back seat, however the bests examples seem to combine the two seamlessly. Its proponents include: David Carson, Paula Scher, Jonathan Barnbrook to name a few.

There was a method to their madness. Order was replaced with apparent chaos, but this chaos was exciting and new for a generation that was being exposed to Punk anti-establishment thought and music. As such the asymmetry, random, repetition, dilatational and radial systems began to take root in the lexicon of designer.

Fig 1.2.2: Artwork by Paula Scher, Jonathan Barnbrook, and David Carson

Beside the 8 typographic systems, there are some other interesting typographic models/systems, which are Environmental Grid and Form & Movement.
- Environmental Grid
It is a system based on the exploration of an existing structure or numerous structures combined. An extraction of crucial lines both curved and straight are formed. Designer organizes their information around this super-structure, which includes non-objective elements to create a unique and exciting mixture of texture and visual stimuli.

Fig 1.2.3: Examples of Environmental Grid

- Form & Movement
This system is based on the exploration an existing Grid System. It was developed by Mr. Vinod to get students to explore; the multitude of options the grid offer; to dispel the seriousness surrounding the application of the grid system; and to see the turning of pages in a book as a slowed-down animation in the form that constitutes the placement of image, text and color. The placement of a form on a page, over many pages creates movement. Whether the page is paper or screen is irrelevant.

Fig 1.2.4: Static version of the form placed on spread

INSTRUCTIONS


Exercise 1: Typographic Systems

In this particular exercise, students are given a task to explore the 8 typographic systems using the following content:

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

From the three different titles above, I chose "All Ripped Up: Punk Influences on Design" for my design. Students can freely choose to use an additional color beside the black and white color. However, the chosen color should not be a very bright color.

Before starting to create the designs, I went to look for some references. Here are some of them.

Fig 2.1.1: Reference #1

Fig 2.1.2: Reference #2

Fig 2.1.3: Reference #3

Fig 2.1.4: Reference #4

Fig 2.1.5: Reference #5

Next, I began to work on the designs in Adobe InDesign. Here are my making processes and attempts I made.
1. Axial

Fig 2.1.6: Making process #1, 01.04.2022

Fig 2.1.7: Attempt on Axial system, 01.04.2022

I was given a suggestion from Mr. Vinod to increase the point size of the word 'influences' and 'ripped' till it reaches outside the margin, to make it looks like the text is hanging. So here's how it looks after I made the revision.

 Fig 2.1.8: Axial system (Revised ver.), 04.04.2022


2. Radial

Fig 2.1.9: Making process #2, 01.04.2022

Fig 2.1.10: Attempt on Radial system, 01.04.2022


3. Dilatational

Fig 2.1.11: Making process #3, 01.04.2022

Fig 2.1.12: Attempt on Dilatational system, 01.04.2022


4. Grid

Fig 2.1.13: Making process #4, 01.04.2022

Fig 2.1.14: Attempt on Grid system, 01.04.2022

Mr. Vinod told me to rework on this one because it got lots of spaces between the information texts which doesn't make sense. After receiving that feedback, I decided to do some rearrangement of the information texts, and below here is the final look of my grid system.

Fig 2.1.15: Grid system (Revised ver.), 09.04.2022

5. Bilateral

Fig 2.1.16: Attempt on Bilateral system, 01.04.2022

For this system, I was told by Mr. Vinod that it looks more like multilateral system, however it's still fine and acceptable. After long consideration, I decided to do a little change on it to make it becomes a bilateral system.

Fig 2.1.17: Bilateral system (Revised ver.), 09.04.2022

6. Modular

Fig 2.1.18: Attempt on Modular system, 02.04.2022


7. Transitional

Fig 2.1.19: Attempt on Transitional system, 02.04.2022

For this one, because I thought it didn't look that exciting, so I change the color of the headline text to green.

Fig 2.1.20: Transitional system (Revised ver.), 09.04.2022

8. Random

Fig 2.1.21: Attempt on Random system, 02.04.2022

After the feedback session, I gave some changes to this random system.

Fig 2.1.22: Random system (Revised ver.), 09.04.2022

Final Outcome

Fig 2.2.1: Axial System Final Outcome, 09.04.2022

Fig 2.2.2: Radial System Final Outcome, 01.04.2022

Fig 2.2.3: Grid System Final Outcome, 09.04.2022

Fig 2.2.4: Dilatational System Final Outcome, 01.04.2022

Fig 2.2.5: Bilateral System Final Outcome, 09.04.2022

Fig 2.2.6: Modular System Final Outcome, 02.04.2022

Fig 2.2.7: Transitional System Final Outcome, 02.04.2022

Fig 2.2.8: Random System Final Outcome, 02.04.2022


Fig 2.2.9: 8 Typographic Systems Final Outcome in .pdf, 09.04.2022


Fig 2.2.10: 8 Typographic System Final Outcome with Grids in .pdf, 09.04.2022


Exercise 2: Type & Play

Part 1: Finding Type

For the first part of exercise 2, students were given a task to make a selection of image between man-made objects or structures, and nature. Students will analyze, dissect and identify potential letterforms within the dissected image. The forms would be explored and ultimately digitized. It is expected that through a process of iteration the forms would go from crude representation to a more refined celebration that would reflect to a degree its origins. 

I started searching for things to use for this exercise. I found 2 images in my phone gallery, the first one is a picture of tree branch, and the other one is an image of bacon. From those two images, I began to analyze to have potential letterforms. Here is the first image and the potential letterforms I got.

Fig 2.3.1: Selected Image #1

Fig 2.3.2: Dissected Image #1, 09.04.2022

Fig 2.3.3: Extracted Letterforms #1, 09.04.2022

Below here is the second chosen image and the potential letterforms from the bacon.

Fig 2.3.4: Selected Image #2

Fig 2.3.5: Dissected Image #2, 10.04.2022

Fig 2.3.6: Extracted Letterforms #3, 10.04.2022

After showing my potential letterforms to Mr. Vinod, he told me to do more analyzation on the chosen image to obtain better forms. Following the feedback given by Mr. Vinod, I went to look for another image in my gallery and found another picture of tree branches. I realized that this new tree branch has more details and is more suitable for this exercise, so I decided to change my image and re-analyze the image. Here is the new image.

Fig 2.3.7: Selected Image #3

Fig 2.3.8: Dissected Image #3, 13.04.2022

I began to work in Illustrator to start refining the potential letterforms (A, D, L, R) from the tree branch image. Here's the process from first tracing to refining and the results.

Fig 2.3.9: Extracted Letterforms #3, 13.04.2022

I'm using ITC Garamond Std Light Condensed as the reference for my letterforms.

Fig 2.3.10: Reference

Fig 2.3.11: Refinement Result #1, 16.04.2022

Fig 2.3.12: Refinement Result #2, 16.04.2022

Fig 2.3.13: Refinement Result #3, 22.04.2022

Fig 2.3.14: Refinement Result #4, 29.04.2022

The fourth refinement result as seen above is my final refinement. After going through 4 refinement, I finally achieve my final result. Below here is my final letterforms from tree branch.

Fig 2.3.15: Final Outcome of Finding Type, 29.04.2022


Fig 2.3.16: Final Compilation of Finding Type, 29.04.22

Part 2: Type & Image
In this second part of exercise 2 'Type & Image', students will combine a visual with a letter/word/sentence of their choosing. The objective is to enhance/support the interplay between the letter/word/sentence and the selected visual. The text must be woven into a symbiotic relationship with the image.

At first, I was so confused because I didn't know what image to choose. I started exploring Pinterest to find cool and aesthetic image and found these two images.

Fig 2.4.1: Original Image #1

Fig 2.4.2: Original Image #2

After deciding what text to use. I began to do the editing for the first image. Here's the process.

Fig 2.4.3: 'WOOD' design process, 23.04.2022

Fig 2.4.4: 'WOOD' Outcome, 23.04.2022

However, after I took a look of the outcome, I didn't feel satisfied with it, so I went to edit another one. I watched and learned some editing tutorials in internet and proceed with the word 'ICE'. The typeface that I chose for the letters is Berlin Sans Demi.

Fig 2.4.5: Gradient fill, 24.04.2022

Fig 2.4.6: Typing the chosen word, 24.04.2022

Fig 2.4.7: Playing with Layer Styles, 24.04.2022

Here's the modification I made with the layer styles.

Fig 2.4.8: Contour, 24.04.2022

Fig 2.4.9: Outer Glow, 24.04.2022

Fig 2.4.10: Inner Glow, 24.04.2022

Fig 2.4.11: Texture, 24.04.2022

Here's the final outcome of my Type & Image exercise.

Fig 2.4.12: Final Outcome of Type & Image, 24.04.2022


Fig 2.4.13: Final Compilation of Type & Image, 24.04.22

FEEDBACK

WEEK 1

-

WEEK 2

General Feedback: 
- Make sure the size of body text is between 8-12 pts
- Pay attention to the text leading (+2.5 to 3 pts from font size)

Specific Feedback:
- Transitional, Bilateral, Random, and Modular are okay
- Excellent work on Dilatational and Radial (good play of contrast in the text)
- For Axial, try to increase the point size of the word 'influences' and 'ripped' until it reaches outside, so it looks like the text is hanging
- Rework the Grid system as it got lot of spaces between the name and time


WEEK 3

General Feedback: 
- Focus more on the shape than the lines

Specific Feedback:
- Try to identify and explore more the tree branch from chosen image

WEEK 4

Specific Feedback:
- The letter 'R' has a good shape
- Give the same width for each section
- Try making each letter's shape look consistent

WEEK 5

General Feedback: 
- Make sure that the image and text/word match well
- The word/letter should portray the image/visual


WEEK 7

Specific Feedback:
- Very good sensibility and well done on exercise 1
- Good job on finding type
- Nice type & image

REFLECTIONS

Experience
Following the previous Typography module from the last semester, we have Advanced Typography class which is still Typography, but is more complicated than the previous one since it is advanced. As Typography is important in design, it is important for me as a student to do well here. I'm glad that we are given another opportunity to explore more on Typography, with the given material. It is difficult and interesting at the same time for me as I get to learn many new things about Typography but need more skills here.

Observations
Entering the new semester with more advanced class and doing the first exercises made me realized that I still got more things to learn. It is not that because I had been in Typography class before so I can be calm and relaxed while completing the assignments. The given exercises in the past few weeks are not easy things to do. 

Findings
This whole exercises seem to be easy but it's actually not that easy. In order to produce those artworks, I had to see references from many sources. I also faced some obstacles while doing those 3 exercises, especially for the finding type exercise. I might have done creating letterforms in the past Typography assignment, but this time it is harder than I thought. It needs more works and of course patience to complete the whole things nicely and neatly.

FURTHER READING 

Fig 3.1: 7 Essential Typographic Layout Systems

Reference:
Lucas Czarnecki
7 Essential Typographic Layout Systems

How to make a transitional design

- Movement
Try implying some amount of movement or slippage in your composition. As if the text is sliding into place. You can show this with angles, shapes, and text placement.

- Direction

Your text can all line up or it can fall on each other. It can be straight or it can be diagonal. It all depends on the content and how you want to design it. 

- Use non-objective elements
Try including some simple shapes and rules into your designs to accentuate the layers in your design. As with the other systems, non-objective elements can add visual intrigue, emphasis, or balance.