Advanced Typography - Task 1
22/04/2024 - 17/05/2024 ( Week 1 - Week 4 )
The dominant principles underpinning design composition : emphasis, isolation,
repetition, balance (symmetry/asymmetry), alignment, perspective.
This system is based on the exploration of an existing structure or numerous
structure combined.
This system is based on the exploration of an existing Grid
System.
Cuneiform
The oldest writing found in the‘Indian’ subcontinent the Indus Valley Civilization (IVC) script (3500-2000 BCE), is as yet undeciphered and seems to have been somewhat logo-syllabic in nature.
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.
More vernacular scripts are being produced by software giants (Google) : in their employment a great many Asian programmers and designers.
Many different forms and constructions must be taken into account when designing a new type. An important visual correction is the extrusion of curved (and protruding) forms past the baseline and cap line (overshoot). This also applies to vertical alignment between curved and straight forms.
I like both designs but I chose the first one as my final design. I made some changes after listening to Mr. Vinod's feedback about the dates point size being too big and the poor color choice.
I only did one design for the transitional system but I adjusted the layered lines into the same one to make it more smoothly flowing.
The first design was incorrect because the color was not as directed as it exceeded more than one so I chose the second design as my final design.
My first attempt is not very well as the extract does not represent the flower. Mr.Vinod recommended me keep the entire petal when extracting the letterforms. After listening to the feedback, I changed the letterforms from S.O.F.T to S.V.W.T and changed the way I traced the letterforms.
After finalizing the letterforms, I started the process of digitalization in Adobe Illustrator. My letterforms are a bit abstract and the height of each letters are also different so I need to recreate them.
Chong Wee Han / 0368863
Advanced Typography / Bachelor of Design (Honours) in Creative Media / Taylor's
University
Task 1 - Exercise 1 & 2
JUMPLINK
Lectures
LECTURES
Week 1 - Lecture1
Typographic Systems
The typographic systems are akin to what architects term
shape grammars. Typographic systems provide a sense of purpose that focuses and
directs the decision making. It also provides a solid framework that
allows learners to be guided in their exploration while their intuition
develops and matures.
Shape grammar is a set of shape rules that apply in a
step-by-step way to generate a set, or language, of designs.
8 Major Variations:
- Axial
- Radial
- Dilational
- Random
- Grid
- Transitional
- Modular
- Bilateral
1. Axial System
All elements are designed to the left or right or a single axis.
|
| Figure 1.1 Axial System (Week 1) 24/04/2024 |
2. Radial System
All elements are extended from a point of focus.
|
| Figure 1.2 Radial System (Week 1) 24/04/2024 |
3. Dilational System
All elements expand from a central point in a circular fashion.
|
| Figure 1.3 Dilational System (Week 1) 24/04/2024 |
4. Random System
Elements appear to have no specific pattern or
relationship.
|
|
Figure 1.4 Random System (Week 1) 24/04/2024 |
5. Grid System
A system of vertical and horizontal divisions.
|
| Figure 1.5 Grid System (Week 1) 24/04/2024 |
6. Transitional System
An informal system of layered banding.
|
| Figure 1.6 Transitional System (Week 1) 24/04/2024 |
7. Modular System
A series of non-objective elements that are constructed in as a
standardised units.
|
| Figure 1.7 Modular System (Week 1) 24/04/2024 |
8. Bilateral System
All text is arranged symmetrically on a single axis.
|
| Figure 1.8 Bilateral System (Week 1) 24/04/2024 |
Week 2 - Lecture2
Typographic Composition
Principles of Design Composition
|
| Figure 2.1 Principles of Design : Emphasis (Week 2) 29/04/2024 |
The Rule of Thirds
|
|
Figure 2.2 The Rule of Thirds (Week 2) 29/04/2024 |
A photography guide to composition, it basically suggest that a
frame (space) can be divided into 3 columns and 3 rows. The intersecting
lines are used as a guide to place the points of interest, within the
given space.
Environment Grid
|
|
Figure 2.3 Environment Grid : Typographic Form and Communication,
pp211 (Week 2) 29/04/2024 |
Form and Movement
|
|
Figure 2.4 Form and Movement (Week 2) 29/04/2024 |
Developed this system to get students to explore:
1. The multitude of options the grid offer.
2. Dispel the seriousness surrounding the application of the grid
system.
3. See the turning of pages in a book as a slowed-down animation in the
form that constitutes the placement of image, text and colour.
The placement of a form on a page, very many pages creates
movement.
Week 3 - Lecture3
Context & Creativity
Handwriting
The first mechanically produced letterforms were designed directly imitate handwriting. Handwriting would become the basis or standard for form, spacing and conventions mechanical type would try and mimic.
 |
| Figure 3.1 Evolution of the Latin Alphabet (Week 3) 06/05/2024 |
Cuneiform
 |
| Figure 3.2 Cuneiform c. 30000 B. C. E. (Week 3) 06/05/2024 |
-The earliest system of actual writing.
-The characters evolved from pictograms and it is written from left to right.
Hieroglyphics
 |
| Figure 3.3 Hieroglyphics (Week 3) 06/05/2024 |
-The Egyptian writing system is fused with the art of relief carving.
-A mixture of both rebus and phonetic characters - the first link to a future alphabetic system.
-Have the potential to be used in 3 ways:
- As ideograms, to 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.
 |
| Figure 3.4 Letterforms through the ages (Week 3) 06/05/2024 |
1.Early greek (5th C. B.C.E.)
Built on the Egyptian and Phoenician system, developed a phonetic alphabet consisting of 22 letters. Drawn freehand, not constructed with compasses and rules, and they had no serifs. In time the strokes of these letters grew thicker, the aperture lessened, and serifs appeared.
2.Roman Uncials
By the 4th century Roman letters were becoming more rounded, the curved form allowed for less strokes and could be written faster.
3.English Half Uncials (8th C.)
In England the uncial evolved into a more slanted and condensed form. While English and Irish uncials evolved, writing on the European continent devolved considerably and needed a reformer. Luckily it came in the Carolingian Handwriting Reform.
4.Carolingian Minuscule
Capitals at the start of a sentence, spaces between words and punctuation. It was used for all legal and literary works to unify communication between the various regions of the expanding European empire. It was this style that became the pattern for the Humanistic writing of the fifteenth century; this latter, in turn, was the basis of our lower-case roman type.
5.Black Letter (12-15 C. CE)
Characterised by tight spacing and condensed lettering. Evenly spaced verticals dominated the letterform. Condensing line spacing and letter spacing reduced the amount of costly materials in book production.
6.The Italian Renaissance
Humanists named the newly rediscovered letterfor ms Antica. The renaissance analysis of form that was being applied to art and architecture was directed toward letterform — resulting in a more perfect or rationalised letter.
Movable Type
 |
| Figure 3.5 Movable Type (Left Korea)(Right China)(11 C.—14 C.) (Week 3) 06/05/2024 |
China had attempted to use movable type for printing but was unsuccessful. In late 14 C. Koreans established a foundry to cast movable type in bronze—allowing the dismantling and resetting of text. The introduction of movable type was introduced in the 1000-1100 CE. This innovation was pioneered in China but achieved in Korea (Diamond Sutera).
Evolution of Middle Eastern Alphabets
 |
| Figure 3.6 Evolution of Middle Eastern Alphabets (Week 3) 06/05/2024 |
The Phoenician letter marks a turning point in written language — use of sound represented in letters — the script itself has been possibly influenced by the Egyptian Hieroglyphics and Hieratic Scripts.
Evolution of Chinese Script
 |
| Figure 3.7 Evolution of Chinese Script (Week 3) 06/05/2024 |
From the Oracle bone to Seal Script to Clerical Script, Traditional and Simplified scripts.
Indus Valley Civilization (IVC) script
 |
| Figure 3.8 ‘Indian’ subcontinent the Indus Valley Civilization (IVC) script (3500-2000 BCE) (Week 3) 06/05/2024 |
Brahmi script
 |
| Figure 3.9 Brahmi script (450-350 BCE) (Week 3) 06/05/2024 |
Programmers and Type Design
Vernacular Script
 |
| Figure 3.10 Vernacular Script (Week 3) 06/05/2024 |
More and more vernacular and "multi-script" typefaces— a term coined by Muthu Nedumaran—are being produced to cater to situations where the written matter is communicated in the vernacular scripts or vernacular and Latin scripts.
Week 4 - Lecture4
Designing Type
Fruitiger - sans serif typeface
Adrian Frutiger is a renowned twentieth century Swiss graphic designer. His forte was typeface designing and he is considered responsible for the advancement of typography into digital typography. His contribution to typography includes the typefaces; Univers and Frutiger.
Adrian Frutiger is a renowned twentieth century Swiss graphic designer. His forte was typeface designing and he is considered responsible for the advancement of typography into digital typography. His contribution to typography includes the typefaces; Univers and Frutiger.
 |
| Figure 4.1 Examples of Frutiger (Week 4) 13/05/2024 |
- Purpose : The goal of this new typeface was to create a clean, distinctive and legible typeface that is easy to see from both close up and far away. Extremely functional.
- Considerations/Limitations : Letterforms needed to be recognized even in poor light conditions or when the reader was moving quickly past the sign.
Verdana
Matthew Carter is the son of Harry Carter, Royal Designer for Industry, contemporary British type designer and ultimate craftsman. Carter trained as a punchcutter at Enchede by Paul Radisch, responsible for Crosfield's typographic program in the early 1960s, Mergenthaler Linotype's house designer 1965-1981.
 |
| Figure 4.2 Examples of Verdana (Week 4) 13/05/2024 |
-Purpose : The font was tuned to be extremely legible for even at very small sizes on the screen due in part to the popularity of the internet and electronic devices.
-Considerations/Limitations : The Verdana fonts exhibit characteristics derived from the pixel rather than the pen, the brush or the chisel. Commonly confused characters, such as the lowercase i j l.
Johnston Stans
Edward Johnston is the creator of the hugely influential London "Underground" typeface, which would come to be known as "Johnston Stans"
 |
| Figure 4.3 Examples of Johnston Stans (Week 4) 13/05/2024 |
-Purpose : London's Underground railway ordered a new typeface for its posters and signage from the calligrapher Edward Johnston. he handed over details and examples of letter shapes that would set the tone for printed text until the present day.
-Considerations/Limitations : Johnston's remit was to unite the London Underground Group, the different companies all using the same rails and tunnels. All the advertising, signage was all completely different - there was the cacophony of letters. Johnston applied the proportions of Roman capital letters to his typefaces, so it was rooted in history, rooted traditional calligraphy. But it has an elegance and a simplicity that absolutely fitted the modern age.
General Process of Type Design
1. Research-Understand type history, type anatomy and type conventions. We should also know terminologies, side-bearing, metrics, hinting...
-Determine the type's purpose or what it would be used for, what different applications it will be used(school busses or airport signages).
-Examine existing fonts that are presently being used for inspirations/ideas/reference/context/usage/patterns/etc.
2.Sketching
Sketch their typeface then scan them for the purpose of digitization.
3.Digitization
-Professional software that are used in the digitization of typefaces : FontLab, Glyphs App
-Some designers use Adobe Illustrator to design or craft the letterforms and then introduce it into the specialized font apps.
-Attention should not only be given to the whole form at this stage but also to the counter form. The readability of the typeface is heavily dependent of it.
4.Testing
-Testing is an important component in the design thinking process. The results of testing are 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.
-Depending on the typeface category (display type/text type) the readability and legibility of the typeface becomes an important consideration. However, it is not as crucial if the typeface is a display type, where expression of the form takes a little more precedence.
5. Deploy
-Even after deploying a completed typeface there are always teething problems that did not come to the fore during the prototyping and testing phases.
-Thus, the task of revision doesn’t end upon deployment.
-The rigour of the testing is important so that the teething issues remain minor.
Typeface Construction
 |
| Figure 4.4 Construction grid for the Roman Capital using 8x8 cells (Week 4) 13/05/2024 |
Using grids (with circular forms) can facilitate the construction of letterforms and is a possible method to build/create/design your letterform.
Construction and Considerations
 |
| Figure 4.5 Classification according to form and construction (Week 4) 13/05/2024 |
'Fitting' the type : A visual correction is also needed for the distance between letters. It is not possible to simply place letters next to each other with equal spacing between them. The letters must be altered to a uniform visual white space - the white space between the letters should appear the same.
 |
| Figure 4.6 Consideration when creating a typeface (Week 4) 13/05/2024 |
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/1YhL_LStJp9Mw26LzxOZHfqnR8RUi1WIk/preview"
width="640" height="480" allow="autoplay"></iframe>
Task 1 - Exercise 1 : Typographic System
For this exercise task, we have to use Adobe Indesign only, with a size 200mm x 200mm. In addition to black, we can use only one color and limited graphical elements. The typeface should be in the following 10 typefaces.
Week 1 Attempts
 |
| Figure 5.1 Axial System Attempt (Week 1) 27/04/2024 |
 |
| Figure 5.2 Process 01 (Week 2) 01/05/2024 |
I made 2 types of designs in each system, the left one Mr.Vinod said typefaces that have thick and thin strokes cannot work on creating outlines so I revised it.
 |
| Figure 5.3 Radial System Attempt (Week 1) 27/04/2024 |
 |
| Figure 5.4 Process 02 (Week 2) 01/05/2024 |
The second design have some problems with the information of words are too close to each other so I adjusted the point size and position to increase the readability.
I forgot that we have to only use one color so I revised it with a new design that is similar to the second design. I also added some gradient effect on the middle circle element.
I think that random system is quite difficult for me but I tried to use some alphabet with different point sizes and overlapping transparency words to create the sense of random.
 |
| Figure 5.5 Dilational System Attempt (Week 1) 27/04/2024 |
 |
| Figure 5.6 Process 03 (Week 2) 01/05/2024 |
 |
| Figure 5.7 Random System Attempt (Week 1) 27/04/2024 |
 |
| Figure 5.8 Grid System Attempt (Week 1) 27/04/2024 |
 |
| Figure 5.9 Process 04 (Week 2) 01/05/2024 |
 |
| Figure 5.10 Transitional System Attempt (Week 1) 27/04/2024 |
 |
| Figure 5.11 Progress 05 (Week 2) 01/05/2024 |
 |
| Figure 5.12 Modular System Attempt |
 |
| Figure 5.13 Bilateral System Attempt (Week 1) 27/04/2024 |
Final Task 1 - Exercise 1 : Typographic System
 |
| Figure 6.1 Final Axial System - JPEG, Week 2 (02/05/2024) |
 |
| Figure 6.2 Final Radial System - JPEG, Week 2 (02/05/2024) |
 |
| Figure 6.3 Final Dilational System - JPEG, Week 2 (02/05/2024) |
|
|
Figure 6.4 Final Random System - JPEG, Week 2 (02/05/2024) |
 |
| Figure 6.5 Final Grid System - JPEG, Week 2 (02/05/2024) |
|
|
Figure 6.6 Final Transitional System - JPEG, Week 2 (02/05/2024) |
|
| Figure 6.7 Final Modular System - JPEG, Week 2 (02/05/2024) |
 |
| Figure 6.8 Final Bilateral System - JPEG, Week 2 (02/05/2024) |
Figure 6.9 Final Task 1 - Exercise 1: Typographic Systems - PDF, Week 2 (02/05/2024)
Figure 6.10 Final Task 1 - Exercise 1: Typographic Systems (Grids & Guides) - PDF, Week 2 (02/05/2024)
Task 1 - Exercise 2 : Type & Play
Part 1 : Finding Type
Select an image of a man-made object (chair, glass, etc) or structures
(buildings), or something from nature (Human, landscape, leaf, plant, bush,
clouds, hill, river, etc). Ensure that the images foes not contain many
different elements.
Analyse, dissect and identify potential letterforms within the dissected
image. We have to do at least 4 letters with (uppercase/lowercase). The typeface reference should be in one of the following 10 typefaces.
First attempt
|
| Figure 7.1 Original photo and traced letterforms (Week 3) 06/05/2024 |
I choose the nature image of lily from Pinterest and I traced the letterforms - S.O.F.T by using Adobe Illustrator.
 |
| Figure 7.2 First attempt S.O.F.T (Week 3) 07/05/2024 |
Second Attempt
 |
| Figure 7.3 Extracting letterforms (Week 3) 11/05/2024 |
 |
| Figure 7.4 Original Letterforms (Week 3) 11/05/2024 |
My originally designed letterforms are not really clear to be seen as letterforms so I have to revise and make it look more similar to my typeface reference which is ITC Garamond Std (Bold).
Reference
 |
| Figure 7.5 Typeface reference-ITC Garamond Std (Bold) (Week 3) 11/05/2024 |
Digitalization
 |
| Figure 7.6 Digitalization process (Week 3) 11/05/2024 |
Progess
This is my first attempt on the poster design but I feel like its does not look like movie poster so I changed the background and some of the layout.
I want the theme to revolve around flowers so I did some research on the Disney movie "Alice in Wonderland". I refer to some of the colour and layout to make some changes.
Week 3 - Exercise 2 : Type & Play
I learned the vital role of line breaks, leading, words and letter spacing that can improve the readability and aesthetics of text. Adjusting these details elements can change the look and feel of a design. Experimenting with different arrangements highlighted the importance of balancing these aspects to achieve a nice-looking result. These insights will help me create more effective and visually appealing layouts.
 |
| Figure 7.7 Progress of second attempt (Week 4) 13/05/2024 |
Part 2 : Type & Play
After completing the letterforms we will need to combine the letterforms with an image that is the basis of the extracted letters. The text must be woven into a symbiotic relationship with the image. We need to create a movie poster with our final letterforms (size 1024px x 1024px).
 |
| Figure 8.1 First Attempt (Week 4) 15/05/2024 |
 |
| Figure 8.2 Background (Week 4) 18/05/2024 |
 |
| Figure 8.3 Alice in Wonderland (Week 4) 18/05/2024 |
 |
| Figure 8.4 Icon of Disney (Week 4) 18/05/2024 |
 |
| Figure 8.5 Adjusting the effect (Week 4) 18/05/2024 |
 |
| Figure 8.6 Gradient letterforms (Week 4) 18/05/2024 |
I added the Disney movie icon in my movie poster to make it more realistic and I also added some effect of outer glow to highlight my letterforms. To better integrate the poster, I adjusted the gradient colors of the letterforms to match the light and dark areas of the image. This makes the text more dynamic and cohesive with the overall design.
Final Task 1 - Exercise 2 : Type & Play
 |
| Figure 9.1 Image + Extraction (Week 4) 13/05/2024 |
| ||
Figure 9.2 Reference type-ITC Garamond Std (Bold) (Week 4) 13/05/2024
|
 |
| Figure 9.4 Initial Extraction+Final Refinement (Week 4) 13/05/2024 |
 |
| Figure 9.5 Final Task 1 - Exercise 2 : Type & Play (Part 2) - JPEG, (Week 4) 18/05/2024 |
Figure 9.6 Final Task 1 - Exercise 2 : Type & Play (Part 2) - PDF, (Week 4) 18/05/2024
FEEDBACK
Week 2 - Exercise 1 : Typographic System
General Feedback : Readability is important, less using graphical elements.
Specific Feedback :
(1)When you want to create an outline around the text, this is not good especially for some designs of typefaces (have contrast, thick and thin strokes), it never works. Axial system textual information must be attached to the line.
(2) The readability reduces because the pattern of the text, when you put the information too close, breaks the original shape of the word. It needs to increase a little bit of space between the different information texts but Mr.Vinod does like the design.
(3) There is a lot of plumping of information, it's not really commanding the space
(4) Can be considered random system but the lines are a bit unnecessary.
(5) Do not make the words so big, small letters with it is not really good, color choice is poor, black background with dark red is not really good.
(6) Mr. Vinod likes the dates being played like this but however they are not really transitioning all well together, it’s not really flowing well.
(8) The bilateral is incorrect because there are colour choices, there are 2 colours not 1 as directed.
General Feedback : Extract the letterforms into larger portions and make sure the consistency when refining the letters.
Specific Feedback : The extract does not represent the flower, Mr.Vinod showed me an example of a similar image of flowers and suggested that I keep the entire petal to make it more related to the flower. The flower of the image in the words is not objective.
Week 4
Week 4
General Feedback : To create a compelling movie poster, integrating letterforms with the background image is essential. Poster background should related to the reference typeface that we choose to be our letterforms. Poster size is 1024px x1024px.
REFLECTION
Experience
The first task was particularly challenging due to the requirement to complete eight systems. The workload seemed overwhelming for me, but I felt incredibly satisfied upon seeing my finished pieces. The instructor's feedback on areas needing improvement also deepened my understanding of the typographic system. The second assignment was very interesting, although I faced difficulties with creativity in my first attempt. Observing seniors' work and receiving feedback encouraged me to experiment more. This process helped me develop my tasks too.
Observations
I noticed that different typographic systems create unique impressions through their use of color, size, and arrangement, affecting how people view them. While working on Task 1, I found it fascinating that each system's layout has specific rules and principles. I'll remember these insights as they will be very helpful for my future studies.
Findings
I realized that creating typefaces is indeed very challenging. It requires a lot of time, effort, and attention to detail, to ensure consistency and quality. There is still much I need to learn in this field. Although the process can be exhausting due to the constant revisions and modifications, I am genuinely interested in gaining more knowledge about typography in the future.
FURTHER READING
 |
| Figure 11.1 Typographic Systems |
This week I chose this book as my further reading because I want to explore more about typographic systems since I just engaged with this knowledge.
- Axial System - All elements are organized either to the left or right of a single axis.
- Radial System - All elements extend from a point of focus.
- Dilatational System - All elements expand from a central point in a circular fashion.
- Random System - Elements appear to have no specific pattern or relationship.
- Grid System - A system of vertical and horizontal divisions.
- Transitional System - An informal system of layered banding.
- Modular System - A series of non-objective elements that are constructed as standardized units.
- Bilateral Sytem - All text is arranged symmetrically on a single axis.
 |
| Figure 11.2 Constraints and Options |
 |
| Figure 11.3 Constraints and Options |
 |
| Figure 11.4 Circle and Composition |
Circle elements can be used anywhere in a composition, particularly in restrained one size, one weight compositions, which gives the designer a tool to guide the eye. it can also create a pivot point, tension and emphasis or contribute to a visual organization or balance.
Comments
Post a Comment