Advanced Typography Task 1

Posted by JIE XUAN

Advanced Typography Task 1

23/4/2024-17/5/2024 Week 1-Week 4

Jie Xuan/ 0356515

Advanced Typography/ Bachelor of Creative Media/Taylor's University

TASK 1

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Exercise 1-Typography System

4. Exercise 2-Type And Play

5. Feedbacks

6. Reflections

7. Further Reading

LECTURES

Week 1 (a) Introduction

Typographical organization is complex because the elements are dependent on communication in order to function.

"The typographic systems are akin to what architects term shape grammar. 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"(Elam,2007)

From a teaching point of view it provides a solid framework that allows learners to be guided in their exploration.

"All design is based on a structural systems" and according to Elam 2007, there are eight major variations with an infinite number of permutations.

There are 8 major variations of typographic systems:

Axial
Radial
Dilatational
Random
Grid
Modular
Transitional
Bilateral

Axial System: All elements are organized to the left or right of a single axis.

fig1.1 week 1,24/4/2024

Radial System: All elements are extended from a point of focus.

fig1.2 week 1,24/4/2024

Dilatational System: All elements expand from a central point in circular manner.

fig1.3 week 1,24/4/2024

Random System: Elements appear to have no specific pattern or relationship.

fig1.4 week 1,24/4/2024

Grid System: A system of vertical and horizontal divisions.

fig1.5 week 1,24/4/2024

Modular System: Elements appear to have no specific pattern or relationship.

fig1.6 week 1,24/4/2024

Transitional System: An informal system of layered banding.

fig1.7 week 1,24/4/2024

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

fig1.8 week 1,24/4/2024

Additional Infomation: https://type365.com/2017/02/21/7-typographic-layout-systems/

Week 2

This week of lecture talked about typographic composition where typography pertains to creation of letters and arrangement of textual info within a given space. This lecture will be talking about the letter which is arrangement of textual information in a given space. There are several ways to approach typographic composition, including the following:

1. Principles of Design Composition:

Composition principles involve combining and arranging elements to create a visual impact. Abstract notions like isolation, repetition, symmetry, and perspective are typically more relevant in visual representations compared to textual information.

2. The Rule of Thirds:

A photographic guide to composition that suggests a frame can divided into 3 columns and 3 rows. The intersections are a guide to place points of interest within a given space.

3. Typographic Systems: The 8 systems used in the typographic composition include the Grid System (or German Raster System), which is the most pragmatic and widely used. It was further enhanced by the Swiss (Modernist) style of Typography, led by Josef Muller Brockmann, Jan Tschichold, Max Bill and others.

The grid system remains popular because of its versatility and modular structure allows countless adaptations. Our readability tends to favor structured and organized layouts rather than chaotic ones.

Other models/systems:

1. Environmental Grid: This system is based on the exploration of an existing structure or numerous structures combined. An extraction of crucial lines both curved and straight is formed. The designer organizes his information around the super- structure, which includes non objective elements to create a unique and exciting mixture of texture and visual stimuli.

2. Form and Movement: This system is based on the exploration of an existing Grid System. It encourages students to experiment with different compositions and explore the connection between each composition, while also viewing the layout as a dynamic composition with a sense of movement.

Week 3

This lecture will cover how this particular modern language evolved from ancient scripts and why understanding the background of handwritten scripts is crucial. We can gain insight into a specific civilization's background by comprehending the evolution of handwritten scripts.

Handwriting: 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.

Cuneiform (c. 3000 B.C.E.)

Earliest system of writing, used in a number of languages
Distinctive wedge form
Characters evolved from pictograms
Written from left to right.

Hieroglyphics (2613–2160 B.C.E.)

The Egyptian writing system is fused with the art of relief carving and a mix of rebus and phonetic characters.

Ideograms, represent the things they actually depict.
As determinatives to show that the signs preceding are meant as phonograms and to indicate the general idea of the word.
As phonograms to represent sounds that "spell out" individual words.

Early Greek / 5th C. B.C.E.

Phoenicians develop a phonetic alphabet consist of 22 letters. Greeks adopted the Phoenicians system and added necessary vowels. The words were in rows, however the reading rhythm followed the boustrophedon format.

Early forms were drawn freehand and had no serifs.
Over time, strokes grew thicker and serifs appeared. New forms were used for inscriptions throughout Greek empire (model for formal lettering in imperial Rome).
Roman inscriptional letters: written with a flat brush held at an angle, then carved into stone with mallet and chisel. Calligraphers and type designers mimic these model forms.

Roman Uncials (4th c. C.E.)

By the 4th century Roman letters were becoming more rounded, the curved form allowed for fewer strokes and could be written faster.

English Half Uncials (8th C.)

Uncials evolved into a more slanted and condensed form.
Carolingian Handwriting Reform help the writing from devolving.

Emperor Charlemagne (8 C. CE)

The end of a central advanced culture resulted in general illiteracy and a breakdown of handwriting into diverse regional styles.

Carolingian Minuscule

Language was standardised during Emperor Charlamagne's reign.

Used for all legal and literary works - unified communication across European empire.

Became the pattern for the Humanistic writing of the fifteenth century; this latter, in turn, was the basis of our lower-case roman type.

Black Letter (12-15 c. C.E.)

Gothic: Culminating artistic expression of the middle ages.

Blackletter characterised by tight spacing and condensed lettering.

Condensing line spacing and letter spacing reduced the amount of costly materials in book production.

Italian Renaissance

Newly rediscovered letterforms Antica.

At the peak of Gothic spirit in medieval Europe, Humanist scholars revived round forms.

Movable Type (11th c. – 14 c. )

China attempted to use moveable type for printing but failed due to number of characters. The Koreans established a foundry to cast moveable type in bronze.

Eastern developments in handwriting

Southern Asia

The Brahmi script (450–350 BCE) is the earliest writing system developed in India after the Indus script. It is one of the most influential writing systems; all modern Indian scripts and several hundred scripts found in Southeast and East Asia are derived from Brahmi.

The oldest writing systems present in Southeast Asia were Indian scripts. There were a few, but the most important would be Pallava (or Pallawa in Malay), a South Indian script originally used for writing Sanskrit and Tamil.

Kawi. Based on Nagari, but indigenous to Java.The word Kawi comes from the Sanskrit term kavya meaning poet. The

interesting thing about Kawi is that it was the script used for contact with other kingdoms. Because it was so widespread, Kawi became the basis of other scripts in both Indonesia and the Philippines.

Incung, the original writing system from Kerinci, comes from a South Sumatran grouping of scripts known as Rencong.

Jawi, the Arabic-based alphabet. We all know Jawi was introduced along with Islam. But how this happened is more interesting than "we converted and adopted the Arabic alphabet”.

Programmers and Type Design

Software behemoths like Google are producing more colloquial scripts since they employ a large number of Asian engineers and designers. An increasing number of "multi-script" typefaces, a term introduced by Muthu Nedumaran, and vernacular fonts are being created to accommodate scenarios in which written content is conveyed in both Latin and vernacular scripts.

Local Movements and Individuals

In Malaysia, murasu.com is spear-headed by programmer and typographer Muthu Nedumaran. The programming language needed to encode the different types of vernacular writing systems was cracked by Muthu. The system is now used in mobile phones and desktops.

Huruf, a local group of graphic designers interested in the localized lettering of Latin and vernacular letters painted or inscribed on walls and signages are among the more prominent organizations digitizing and revitalizing typefaces in Malaysia.

Ek Type and Indian Type Foundry are organizations that have done groundbreaking work with the development of vernacular typefaces in India.

INSTRUCTIONS

Task 1 Exercise ( 20% ) - Individual Assignment

Exercise :

Typography System

Type & Play

Learning Goals :

To be able to compose and express using textual information.
To be able to format text for effective communication

Timeframe :

Week 1 – Week 3 (Deadline on Week 4)

EXERCIES 1-TYPOGRAPHY SYSTEM

Explore 8 typographic systems which are axial, radial, dilational, random, grid, modular, transitional and bilateral using the content provided.

I have choose to write:

The Design School,

Taylor’s University

The ABCs of Bauhaus Design Theory

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

Requirements: Task have to done by using Adobe InDesign only (Size 200x200mm), Black and 1 additional color, Minor graphic elements (lines, dots, etc.)

Sketches:

Axial System Process:

After doing lecturer note I understand some axial system theory so I start design axial system typographic. At first I draw a 45 degree line so that the word will not be too difficult to read. The information also state clearly and the design is axial system.

first design

After designing one design I design another design At first I type the Title in one line and I put the "Design Theory" under "Bauhaus". After that, I design the word left right side and made it axial system. But, I found out a bit unbalance so I adjust a bit. At last it looks better than the starting design.

Second Design

Final outcome of axial system:

Radial System Process:

At first I draw a circle shape and put it on the left side of the artboard. Than I type the words and design it surrounding the circle. And Than, I select "The ABCs of Bauhaus Design Theory" and make the font size bigger. I found out is not enough space for me to put all the words in the art board so I select the whole thing and make it 45 degree on the left bottom corner side.

first design

The second design I draw many line first, and than I type above the line. I select "The ABCs of Bauhaus Design Theory" and bold it. The whole visual looks like go down diagonally from right top corner. And than I add a circle on right top corner.

Second Design

Final Outcome of Radial system:

Dilatational System Process:

First Design

Second Design

Final Outcome of Dilatational system:

Random System Process:

The first design I do is I type the Open Public Lecture All in big capital letter. Open on the left top corner, Public on the right, Lecture on the left bottom. And than I put the other word horizontal and vertical. Some big font some small font so make it look very random design.

first design

The second design I do more vertical and horizontal on the design and put it randomly in the artboard. Some font I set it italic, some bold and some regular. I also use pink and black as the font color.

Second Design

Final Outcome of Random Design:

Grid System Process:

I decided to design simple layout only for Grid system and I did not put a lot of graphic element. In order for consistency, I have used 2 font. I draw line to let the visual look more grid system.

Modular System Process:

Transitional System Process:

First Design

Second Design

Final Outcome of Transitional System:

Bilateral System Process:

The first design I type all the words and put it on the center. I type "The ABCs of Bauhaus of Design theory" put different font and bold it. I make the fonts red color, and than I add one more layer on top of the red color font and the top one is black so I make a contrast on it. I add a line under the title too.

first design

The second design I decided the whole design make it 45 degree. I type "The ABCs of Bauhaus of Design theory" put different font and bold it. I make the fonts light pink, and than I add one more layer under the light pink color title and is black so I also make a contrast on it. and than I draw boxes around the words.

Final outcomes of Bilateral System:

Final result for submission:

After comparison I decided too choose these few design for my task 1 final submission:

Axial System Jpeg Version

Radial System Jpeg Version

Dilatational System Jpeg Version

Random System Jpeg Version

Grid System Jpeg Version

Modular System Jpeg Version

Transitional System Jpeg Version

Bilateral System Jpeg Version

PDF (without grid)

PDF (with grid)

EXERCISE 2-TYPE AND PLAY

Part 1-Extract letterform

Step 1: Find An Image

For this task, we are required to select an image from man-made objects or structures or nature. We are to dissect and identify potential letterforms within the 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 chose a random pebble picture from google.

Step 2: Extract the letterform

I used the pen tool to trace out the letterforms that I have identified.

Step 3: Extracting letterforms

The letterforms are then extracted from the image and placed together on the baseline to do comparison to each other.

After feedback session Mr. Vinod suggest me to extract more not just small area from the picture. So I redo the whole thing again and extract the letterform one more time.

Trace letterform:

Extracted letterform:

Adjustement:

reference Font：

Letterform adjusttment:

Reference Type

My first references type is Bodoni Std. After feedback I found out is not that suitable for my letterform So I change it to Futura Std.

Part 2-Letterform on poster

I decided to set the pebble as my poster background. I resize it to 1024px x 1024px. And than I adjusted the brightness, saturation, color balance of the picture on Adobe Illustration to match it with my font.

original poster

After adjustment

Also, a movie poster will contain logos, here are the logos I have used.

Netflix Logo

First, after I have imported my background picture, I have added the type and play design on top and enlarge it until suitable size and aligned with the page. I also recolor the letterform to red. Besides that, I have added another line of text "Netflix Original Series" , "Coming Soon" and date at the bottom part of the movie title so that it would look more like a poster

First version poster:

After feedback, I need to adjust the font, font size and make the distance between the letterform more consistent.

The image below is all progression starting from dissection and improvements and lastly it shows up as a movie poster in the end.

Final Outcome of Finding Type Poster:

Poster Jpeg Version

Pdf Version

FEEDBACK

Week 1

General feedback : download 10 fonts for future task, must write down lecture and process work on e-portfolio, start working on task 1 exercise

Week 2

General feedback :

Radial system need to be align within one circle, the date text need to look at the size different.

Specific feedback :

After listening to Mr. Vinod feedback to other people work I have to redo some typography system because I have misunderstand a few typography system. Need to adjust the leading of the radial system, modular system need to have the same size of units. Grid system have to align with the grid line. Bilateral System have to be more emphasize on the word. Mr. Vinod said Axial system make things more difficult to read, so he suggest us to use angles less than 45 degrees on Axial system.

Week 3

General feedback :

Mr. Vinod said that when we extract our letterform out we need to extract larger portion.

Specific feedback :

Mr. Vinod let me extract again my letterform, he suggest me to extract the pebble more.

Week 4

General feedback:

Mr. Vinod emphasize the poster background picture should be related with the letterform that we extract out.

Specific feedback:

Room to improve the letterform not enough interaction with the background, need to change the poster size. The word to crowded need to adjust. The word on the top distort cannot distort the word need to change.

REFLECTION

Experience

Over four weeks, I delved into eight typographic systems—axial, radial, dilatational, random, grid, modular, transitional, and bilateral. By applying theoretical concepts to practical design tasks, I gained a comprehensive understanding of organizing text and images within various structural frameworks.

Observation

I observed that each typographic system offers unique rules and design possibilities, guiding the creative process effectively. The structured systems like grid and modular provided clarity, while more flexible systems like random and radial encouraged creativity and experimentation. Typographic systems and Type & Play highlight the importance of balancing structure and creativity. While typographic systems provide the necessary framework for clarity and consistency, Type & Play offers the freedom to explore and innovate.

Findings

The integration of typographic systems into my design practice enhanced both the visual appeal and communicative efficiency of my work. Understanding the historical and cultural evolution of typography deepened my appreciation for the discipline, and experimenting with different systems broadened my design approach, enabling more dynamic and versatile layouts.