Advance Typography - Task 1 (Typographic Systems and Type & Play)

22.4.2024 - 28.7.2024 / Week 1- Week 14

Aliah Farhana Binti Mohd Fauzi / 0357957
Typography / Bachelor of Design (Honours) in Creative Media
Task 1 : Exercise ( Typographic Systems and Type & Play)

---

LECTURES

Week 1 | Introduction & Briefing

Typographic Systems

These are eight major variations:

• Axial
• Radial
• Dilatational
• Random
• Grid
• Modular
• Transitional
• Bilateral

Figure 1.1 Example of Axial System

Axial system is when all elements are organised to the left or right of a single axis. This example shows the axial lime is going to the right.

Figure 1.2 Example of Radial System

Radial system is when all the elements are extended from a point of focus. Instead of having one focus it has multiple of focus.

Figure 1.3 Example of Dilatational System

Dilatational System is when all elements expand from a central point in a circular fashion. This system is very complex but is eye catching and organised. 

Figure 1.4 Example of Random System

Random style is when the elements appear to have no specific pattern or relationship.

Figure 1.5 Example of Grid System

Grid system is a system of vertical and horizontal devisions. The sizes and different weights it creates emphasis and hierarchy.

Figure 1.6 Example of Transitional System

An informal system of layered banding. The differences in weight, colour and size has contributed to the readability and very interesting composition.

Figure 1.7 Example of Modular System

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

Figure 1.8 Example of Bilateral System

All text is arranged symmetrically on a single axis.

Week 2 | Lecture 2

Typographic Composition

Figure 1.9 Principle of Design - Emphasis

Principle of Design Composition: Emphasis, isolation, repetition, balance (symmetry/asymmetry), alignment, perspective, rhythm, and contrast.

Figure 1.10 Rule of Thirds

The Rule of Thirds: A photographic guide to composition, suggested frame can be divided by 3 columns and 3 rows. The intersecting lines are used as a guide to place the points of interest, within the given space.

Figure 1.11 Environmental grid: Typographic Form and Communication

Environmental Grid: This system based on the exploration of an existing structure or numerous stuctures combined. An extraction of crucial lines both curved and straight are formed.

Figure 1.12 Form and movement

Form and Movement: Based on the exploration of an existing Grid systems. The placement of a form on a page, over many pages creates movement. The forms could represent images, text or colour.

Week 3 | Lecture 3

Context & Creativity

Studying handwriting because the first mechanically produced letterforms were designed to directly imitate handwriting. Handwriting would become the basis or standard for form, spacing and conventions mechanical type would try and mimic.

Tools and materials, contributing to the unique characteristics of the letterforms:

• Sharpened bones
• Charcoal sticks
• Plant stems
• Brushes 
• Feather
• Steel pens

Figure 1.13 Cuneiform c. 3000 B.C.E & Hieroglyphics

Cuneiform c. 3000 B.C.E - Is the earliest system of actual writing, was used in a number of languages between the 34C.

Hieroglyphics images have the potential to be used in three different ways:

1. Ideograms - Represent the things they actually depict.
2. As determinatives to show that the signs proceeding are meant as phonograms and to indicate the general idea of the words.
3. Phonograms - Represent sounds that "spell out" individual words.

Figure 1.14 Evolution of both Middle Eastern Alphabets and Chinese script

Evolutions of Middle Eastern Alphabets - Use of sound represented in letters, the script itself has been possibly influenced by the Egyptian Hieroglyphics and Hieratic Scripts.

The Evolution of the Chinese Script - From the oracle bone to seal script to clerical script, Traditional and simplified scripts.

Week 4 | Lecture 4

Designing Type

Designing a typeface because:

• Type design carries a social responsibility so one must continue to improve its legibility.
• Type design is a form of artistic expression.

General Process of Type Design:

1. Research
2. Sketching
3. Digitisation
4. Testing
5. Deploy

Figure 1.15 Research

Understand - Type history, Type anatomy and Type conventions.

Know - Terminologies, side-bearing, metrics and hinting.

We also should examine existing fonts that are presently being used for inspiration /ideas /reference /context/ usage pattern/ etc.

Figure 1.16 Sketching

Some designers sketch their typeface using the traditional too set (brushes/ pens, ink and paper) then scan them for the purpose of digitisation. They are more confident with their hands and have a better control using it.

Some using a digital tool sets such as Wacom directly into a font design software (much quicker, persistent, and consistent) but this can sometimes impede the natural movement of hand strokes.

Figure 1.17 Digitisation

Professional Software: FontLab and Glyphs App.

Using Adobe Illustrator to design or craft might frowned upon the purist. Attention should not only be given to the whole form at this stage but also to the counter form. The readability pf the typeface is heavily dependent on it.

Figure 1.18 Testing

Testing - Is an important component is the design thinking process. Testing is part of the process of refining and correcting aspects of the typeface. Prototyping is also part of the testing process and leads to important feedback.

Figure 1.19 Deploy

Even after deploying a completed typeface there are always teething problems that did not come to the fore during the prototyping and testing phase. Thus, the task of revision doesn't end upon deployement.

Figure 1.20  Typeface Construction

Roman Capital: The grid consist of a square, and inside it a circle that just touches the lines of the square in four places. Within the square, there is also a rectangle. This rectangle is three quarters the size of the square and is positioned in the centre of the square.

Using grids can facilitate the construction of a letterform and is a possible method to build/ create/ design your letterform.

Week 5 | Lecture 5

Perception & Organisation

Contrast

Figure 1.21 Contrast - Size, Weight, Structure and Texture

Figure 1.22 Contrast - Form, Direction and Color

Form: Refers to the overall look and feel of the elements that make up the typographic composition. It is the part that plays a role in visual impact and first impressions.  A good form in Typograph tends to be visually intriguing to the eye, it leads the eyes from point to point, it entertains the mind and is most often memorable.

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1tQ1_SHTShqaqFQoVNHQk2iJe8VKPj1gt/preview" width="640" height="480" allow="autoplay"></iframe>

Task 1a/ Exercises : Typographic systems

This exercise is to be done using Adobe InDesign only. The size is going to be 200 x 200 mm. We were allowed to use only one additional colour as well as a graphical elements such as (line, dot and etc) but limitedly. 

The 8 systems that are mentioned are to be explored 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

Manish Acharia, 11AM-12PM

Lecture Theatre 12

Task 1b/ Exercises : Type & Play

For this task, we were asked to select an image based on a man-made object or structures or nature and the elements has to be coherent but variety. We have to dissect the image to find at least four letters in it. Upon the completion of the letterforms, we were asked to do a poster using the title and an image relating to it.

Week 1 Practical

Figure 2.1 Axial, Radial,Random and Dilatational attempt, Week 1 (24/04/24)

I have made an attempt on these four typographic systems after the typography class. Still, it just an attempt and I still have much more to improve from these exercise that I've made using Indesign. So far, out of these exercises I think I'll be having a hard time on Random and Dilatational systems as I've to plan my layout carefully because of it's rather freestyle and there's no rules.

Figure 2.2 Progress, Week 1(27/04/24)

These are some of the progress that I've captured.

Week 1 | Task 1a - Typographic Systems 

Figure 2.3 Axial System - JPEG, Week 1 (27/04/24)

I have decide on making the axial line to be in that direction and put most of the words on the right side because of people eyes tends to look at the right side first rather on the left side.

Font used:

 - Univers LT Std

Figure 2.4 Radial System - JPEG, Week 1 (27/04/24)

For radial, I've decided to make the small circle in orange it focus and making those words surrounds it.

Font used:

- Univers LT Std

- Futura (Light oblique)

Figure 2.5 Dilatational System - JPEG, Week 1 (27/04/24)

I'm having a hard time on choosing which one is going to be my final but at last I'm going for the left one because it looks more neat and the negative space makes the words stand out compare to the right one.

Font used:

- Univers LT Std

- Gill Sans Std 

Figure 2.6 Random System - JPEG, Week 1(27/04/24)

This system is easy cause there's no any specific rules to it yet it's hard at the same time. 

Font used:

- Univers LT Std

- Futura

Figure 2.7 Grid System - JPEG, Week 1 (27/04/24)

I like doing grid system, thus I would like to make mine layout as well as the font as simple and clean as I can. To avoid, having a boring layout I've decided on adding some shapes to it.

Font used:

- Univers LT Std

Figure 2.8 Modular System - JPEG, Week 1 (27/04/24)

I've used one to four boxes for this modular system.

Font used:

- Univers LT Std

Figure 2.9 Transitional System - JPEG, Week 1 (27/04/24)

This tasked requires on using pen tool to make the wave, it's a bit hard as well to plan the layout because I don't want to make it looks messy and the words is everywhere. 

Font used:

- Univers LT Std

Figure 2.10 Bilateral System - JPEG, Week 1 (27/04/24)

I've decided to separate the words design and put the paragraphs there to make it more interesting.

Font used:

- ITC Garamond Std

- Univers LT Std

After the feedbacks

Figure 2.11 Final Axial System - JPEG, Week 2 (02/04/24)

Figure 2.12 Final Radial System - JPEG, Week 2 (02/04/24)

Figure 2.13 Final Dilatational System - JPEG, Week 2 (02/04/24)

Figure 2.14 Final Random System - JPEG, Week 2 (02/04/24)

Figure 2.15 Final Grid System - JPEG, Week 2 (02/04/24)

Figure 2.16 Final Modular System - JPEG, Week 2 (02/04/24)

Figure 2.17 Final Transitional System - JPEG, Week 2 (02/04/24)

Figure 2.18 Final Bilateral System - JPEG, Week 2 (02/04/24)

Figure 2.19 Final Task 1 - Exercise 1: Typographic Systems - PDF, Week 2 (02/05/24)

Figure 2.20 Final Task 1 - Exercise 1: Typographic Systems Guides and Guides - PDF, Week 2 (02/05/24)

Week 2 | Task 1b - Type & Play

Figure 3.0 Original picture and After extraction

I able to extract 5 letters — A, L, R. E, T from this image.

Figure 3.1 Process in illustrator, week 3 (09/05/24)

Figure 3.2 Extracting, week 3 (11/05/24)

Figure 3.3 Reference font (Skia), week 3 (11/05/24)

Figure 3.4 Overlaying, week 3 (11/05/24)

Figure 3.5 Refining #1, week 3 (11/05/24)

Figure 3.5 Refining #2, week 3 (11/05/24)

Figure 3.5 Refining #3, week 3 (11/05/24)

Figure 3.5 Final, week 3 (11/05/24)

Figure 3.6 Process from extractions to the final, week 3 (11/05/24)

POSTER

Figure 3.7 Font on the poster, week 3 (11/05/24)

After Feedback (Process)

Figure 3.8 Adding a texture to the title

Figure 3.9 Blending with the title

Figure 3.10 Smooth out the texture on the title

Final Poster

Figure 3.11 Final Poster, Week 5 (16/05/24)

---

FEEDBACKS

Week 2 - Specific feedback: In axial don't enlarge the date, only use one line in the middle for bilateral     systems.

               General Feedback: Red and black is not a good combination.

Week 3 - Specific feedback: For the letterform please consider the propotional and wight. Make sure the size is not too thin.

                General feedback: Make sure the final is consistent and the final representing the picture we're choosing. Don't be too crude in extracting, be detail.

Week 4: Specific feedback:  Lacking logo’s and the choice’s of the colour title is rather weak. Integration of the title can be improves.

               General feedback: Evaluate your own work by comparing with a good poster and think what’s lacking in the poster and whatnot. 

---

REFLECTION

Experience

I've been struggled with both of the exercises but the most are on the Task 1a this is because there's a specific rules to follow for each of the systems. As I am trying to make my design look neat and clean I've decided to go for minimalist and simplicity for the design. Thus, for my Task 1b, at first it looks intimidating because I thought it was going to be hard but it was actually fun exercise to do. I've also got to explore how to play and integrate in this task.

Observations

During this task, I've to observed a suitable font and typeface for my design in order to express my works to the viewers. Thus, it is very crucial to choose a correct typography by learning and observing in order to give those kind of impact.

Finding

Through out this exercises, I found out that once you understand your work, you will know how to plan and apply a correct typography on it. 

---

FURTHER READING

Figure 5.1 Typographic Systems by Kimberly Elam (2007)

Elam, K.(2007). Typographic Systems. Princeton Architectual Press, New York

I'm choosing this book is because to gain a better understanding upon my exercise for this task. 

Figure 5.2 Nonobjective Elements

Nonobjective elements become functional guides when used with typography and communicate the message more clearly by enhancing a hierarchical order and directing the viewer's eye. In addition, these elements can strengthen a message by communicating a sense of organisation and direction.

Rule Series - Rules can both organise and emphasise a message. Changes in rule weight create a hierarchy by guiding the eye to the largest volume of black.

Circle Series - Act as a nonobjective pivot point or as an element that creates hierarchy. Circle draws the eye to a single word, making that word the first read in the composition.

Tone Series - The simple use of tone can dramatically alter the hierarchy of a message. The eye is drawn to the largest volume of black on a white background or vice versa.

Figure 5.3 Example of Nonobjective Elements 

The use of nonobjective elements should be carefully considered and caution must be taken to avoid using elements that overwhelm the message, either because of the volume of colour or the complex shape.

Figure 5.4 Radial System, Thumbnail Variations 

Strong diagonal direction inherent in radial compositions, they are visually active and dynamic. Clearly, however, radial compositions are difficult to read and are most appropriate for visual messages with limited amounts of text. 

Figure 5.5 Dilatational System, Introduction 

In a dilatational system circle dilate pr expand from a central point. The iris of the eye become the example for this system, similarly to the radial system, the composition are dynamic as the eye moves along the arc of the circle or is draw to the focal point at the centre of the circle. 

The simplest forms of the dilatational system are circles that expand in regular of rhythmical increments from the center.