Advanced Typography: Task 1: Typographic Systems and Type Play

28/03/2022 Week 1 - Week 13
Darren Liga / 0351480
Advanced Typography / Bachelor of Design (Honours) in Creative Media
Task 1: Typographic Systems and Type Play

---

LECTURE

PDF 1.1: Week 1 Lecture (Typographic Systems)

Axial system:

All elements are organised to the left or right of a single axis.

Radial System:

All elements are extended from a point of focus.

Dilatational System:

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

Transitional System:

An informal system of layered banding.

Modular System:

A series of non-objective elements that are constructed as a standardised unit.

Random System:

Elements appear to have no specific pattern or relationship.

Grid System: 

A system of vertical and horizontal divisions.

Bilateral System:

All text is arranged symmetrically on a single axis.

---

INSTRUCTIONS

Task 1: Exercise 1 - Typographic Systems

We were tasked to design 8 typographic systems: Axial, Radial, Dilatational, Random, Grid, Modular, Transitional, and Bilateral.

Fig 1.1: Font

Our first tasked was to use the same 10 fonts we used for Typography - Semester 1.

Fig 1.2: Assignment Breif

We were gievn the choice of 3 headlines for us to design the 8 typographic systems.

Fig 1.3: Russian Constructivism

I chose "Russian Constructivism and Graphic Design". I then looked up google to find a common theme for all my 8 designs. 

Theme: Black, White, Grey, Red

Design Process

Fig 1.4: Grid system design process

Fig 1.5: typographic system design process (1)

Fig 1.6: typographic system design process (2)

Fig 1.7: bilateral system design process

Typographic System and Type Play (Prototype):

Fig 2.1: Axial System

Fig 2.2: Radial System

Fig 2.3: Dilatational System

Fig 2.4: Modular System

Fig 2.5: Random System

Fig 2.6: Grid System

Fig 2.7: Transitional System

Fig 2.8: Bilateral System

Typographic System and Type Play (Rev1.0):

Fig 2.9: revision1.0

I made the first revision because of my chosen colors. I made the background lighter to suit the blacks and red better while not losing too much contrast on the whites.

After feedback from friends and Mr.Vinod my final version of this exercise would be on the second revision.

Final Typographic System and Type Play (Rev2.0):

Fig 3.1: Bilateral System

Fig 3.2: Transitional System

Fig 3.3: Grid System

Fig 3.4: Random System

Fig 3.5: Modular System

Fig 3.6: Dilatational System

Fig 3.7: Radial System

Fig 3.8: Axial System

PDF 2.1: Final Typographic Systems (PDF)

Task 1: Type Play

For this part of the task, we were asked to analyze textures and find letterforms to be processed into an actual typeface.

I chose this texture as my reference, in my opinion this will be a good source for my letterforms.

Fig 4.1: dry crack texture

I then cropped piece by piece of letterform-like cracks.

Fig 4.2: cropped letterform

I then proceed to manipulate this artboard in photoshop to enhance the highlights and shadows to get a transparant-like letterform for easier tracing to progress.

Fig 4.3: adjusting b/w hues

Then i traced in illustrator.

Fig 4.4: tracing raw letterforms

Fig 4.5: traced letterforms

I then proceed to refine the typeface based on futura.

Fig 4.6: refining stage 1

Fig 4.7: refining process of stage 3

Fig 4.8: Final refining process

Final Task 1: Type Play

Fig 5.1: Task 1: Type Play (PNG)

PDF 2.1: Task 1: Type Play

Part 2: Type & Image

We will combine a visual with a letter/word/sentence of our 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.

Fig 5.1: Background

I got this sunset in ocean background from pinterest which i will express my idea for type & image.

Fig 5.2: text added

After adding the text "sunset" with gradient matching the background colors, i then found that it isnt realistic enough.

I then proceed to add highlights that casts from the sun rays and shadows in the water.\

Fig 5.3: details added

Final Part 2: Type & Image

Fig 6.1: Final Type & Image (JPG)

PDF 3.1: Part 2: Type & Image

---

FEEDBACK

WEEK 2: 

When using large fonts (for my grid system design) make sure all texts have the same line spacing "leading". It would be better if the large text stretches towards the end of the frame instead of centered. 

For my modular system, the text "lecture theatre 12" should be the same hierarchy as "the design school, taylor's university" as they are both locations. Everything else works.

WEEK 3:

"Suprisingly Good. Carry on." - Mr. Vinod 2022

WEEK 4:

---

REFLECTION

Designing the first task was a bit challenging due to the different types of rules that some are somewhat similar. Although its challenging, i found it one of the most importance aspect in typography to further understand and master composition using type.

---

FURTHER READING

Based from the files in the facebook group, i read further regarding typography from a book poster there named "A Type Primer by John Kane"

Fig 10.1: A type Primer: John Kane

I would just go with this book as its posted in the facebook group. Secondly, I've seen the content of the book which correlates to the topics that we learn in typography, plus more.

In this book, the basics such as fonts, typefaces, definitions and the history is shown, its like a continuation of the lecture given by Mr. Vinod. Other topics that is also present in the book which helped me gather references and knowledge includes:

    

        - Typeface comparison

        - Type expression

        - Letterforms

        - Text formatting such as:

                - tracking

                - kerning

                - leading

                - highlighting text

                - widows and orphans

                - column layouts

                - cross-alignment

                - hierarchy

This book also has several topics not discussed in class, such as colors. Color, which isn't lectured as detail as the book, has not even been discussed as for our first assignment, colors were not to be used.