Task 1 / Exercises: Typographic Systems & Type & Play | Advanced Typography
Task 1 / Exercises: Typographic Systems & Type & Play
22/04/2024 - 15/05/2024 (week 1 - week 3)
Rafa Maritza Hertrian [0364958]
Bachelor of Design (Honours) in Creative Media/ Taylor's University
Advanced Typography GCD 61004
INSTRUCTIONS
Throughout the beginning of the semester, various exercises will be
prescribed in the module. These exercises will aid and benefit you in your
quest to gain theoretical and practical knowledge in Advanced Typography
that will inform you and provide you with the necessary experience to take
on the module’s tasks. All exercises prescribed are to be completed and
documented (labelled, clean, clear & concise) in your eportfolio and
hardcopy submissions respectively (print outs–if requested). The exercises
are as follows:
- Typographic Systems (1 Week): Axial, Radial, Dilatational, Random, Grid, Modular, Transitional and Bilateral
- Type & Play Part 1 & 2 (2 Week)
LECTURES
Week 1 Lecture 1: Typography Systems
“All designs is based on a structural system” - Elam
The Elements are dependent on communication to function. Additional
criteria: hierarchy, order of reading, legibility, and contrast also come into
play. Typography systems are akin to what makes SHAPE GRAMMARS. It provides a
solid framework that allows learners to be guided in their exploration while
their intuition develops and mature
Axial System
All elements are organized to the left or right of a single axis. The image below is an example, the red line is the axis mentioned.
|
| Figure 1.1.1Axial System sample from type 365 (20/04/24) |
Information is divided into groups and placed at different angles (different sides of the axis). The Axial does not always have to be straight, it can be bent as in the example image. Axial can be varied but two lines would not be seen as an axial system. However, there is no exact right or wrong to the system.
 |
| Figure 1.1.2 sample student, Julius Teoh Hoong Boon (20/04/24) |
This is an example of an Axial system that is going diagonally across
Radial System
All elements are extended from a point of focus. Elements are spread out
according to the specific focus.
|
|
Figure 1.1.3 Sample Radial System from type 365 (20/04/24) |
|
| Figure 1.1.4 Sample student, Tamara Audrey (20/04/2024) |
Dilational System
All elements expand from a central point in a circular fashion. In a design,
there can be a multiple-ring of circles with information placed on either side
of the surface. Information can be placed hierarchically where the most
important information is placed on the outer part of the ring or vice
versa.
|
|
Figure 1.1.5 Dilational system sample from type 365 (20/04/24) |
|
|
Figure 1.1.6 Sample student, Julius Teoh Hoong Boon (20/04/24) |
Random System
Elements appear to have no specific pattern or relationship. This is a system
that most people who have already adapted to a very organized system find very
difficult to incorporate into their designs. Even though it is random, there
is a certain method in the chaos.
|
| Figure 1.1.7 Random System sample (20/04/24) |
|
| Figure 1.1.9 Sample student Tamara Audrey (20/04/24) |
Grid System
A system of vertical and horizontal divisions. This system is fairly common
because everyone is using it.
|
| Figure 1.1.10 Grid System sample (20/04/24) |
In this system, sizes weights, and colors are significant to apply to create a hierarchy.
|
| Figure 1.1.11Sample student Grid System Tamara Audrey (20/04/25) |
Transitional System
An informal system of layered banding. Banding means segregating information within certain bands.
|
| Figure 1.1.12 Transitional System sample from type 365 (20/04/24) |
|
| Figure 1.1.13 Sample student Transistional System, Tamara Audrey (20/04/24) |
The color, weight, and size contribute to the excitingness of the composition creating an eye-catching effect but also an informative design.
Modular System
series of non-objective elements that are constructed as a standardized
unit. Mr Vinod stated that he has his own understanding of this system and
it is what will be enforced to the students. However, based on Kimberly
Elim's book, the modular system can be incorporated in a more flexible way.
The precise rule of this system is that the red squares seen on the sample
below needs to be in the same size because modular allows you to move
individual units to different portions of the page.
|
|
Figure 1.1.14 Sample Modular System (20/04/24) |
Kimberly Elim suggests that the units can be randomly placed even beyond the
larger grid but Mr. Vinod prefers that the units stay within the
squares.
|
| Figure 1.1.15 Sample student Modular system Julius Teoh Hoong Boon (20/04/24) |
As seen in this sample, the layout is gridded but the different elements in
different spaces can be shifted
Bilateral System
All text is arranged symmetrically on a single axis. This is often used in
invitation cards or other types of formal invites. This system can be basic
but it always depends on how designers imply it.
|
|
Figure 1.1.16 Sample Bilateral System (20.04/24) |
|
| Figure 1.16 Sample Tamara Audrey Bilateral System (20/04/24) |
Week 3 Lecture 2: Typography Composition
Arrangement of textual information in a given space.
Principles of Composition: Emphasis, isolation, repetition, symmetry,
asymmetry, alignment, and perspective. However these only focus more on the
imagery rather than the complex units of information that consist of different
elements. It could be divergent from the theory when using it.
Emphasis
Within a given space, emphasis is shown in 2d and also in the layout. Notions
such as repetition and perspective are not that conducive when it comes to
typographical composition.
|
| Figure 2.1 Emphasis |
The Rule of Thirds
A photographic guide to composition. Intersecting lines are used as guides to place the point of interest within any given space. It is an element of composition that is used to decide the placement of important information within a space.
|
| Figure 2.2 The Rule of Thirds |
Typographic Systems (already covered in the previous lecture)
The most pragmatic and the most used system is the Grid system (Raster
Systeme) which is derived from the grided compositional structure of
letterpress printing.
|
| Figure 2.3 Typographic Systems |
While the grid system may seem to be old and rigid the versatility of the
system tends to allow an infinite number of adaptations or permutations
which is why it remains popular. This is because the human eyes prefer to
see something in order instead of jumping all over the page.
In reaction to this, a group of younger designers such as David Carson,
Paula Scher, and Jonathan Barnbrook challenged these rules and began to
embrace the chaos, randomness, and asymmetry that birthed the post-modernist
era.
|
| Figure 2.4 Examples of randomed typographic system |
Environmental Grid
This system is derived from exploring existing structures or combining
numerous structures. Extraction of crucial lines for both curved and
straight are formed from the structure. The designer then organizes the
information around the super-structure
|
| Figure 2.5 Environment Grid |
Taking composition from an environment or real-life place and applying it in
a design.
Form and Movement
The multitude of options the grid offers; 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 the
image.
|
| Figure 2.6 Form and Movement |
Week 4 Lecture 3: Context & Creativity
Handwriting
Important because the first mechanically produced letterforms imitates human
handwriting. It is the Basis or standard for form, spacing, and
conventions(unwritten rules) mechanical type would try and mimic. It is also
influenced by the tools that is used to write the letterforms.
|
| Figure 3.1 Evolution of the Latin Alphabet |
Cunieform (c. 3000 B.C.E.) : The earliest writing system
Its distinctive wedge form was the result of pressing the blunt end of a
reed stylus into a wet clay tablets. This was read left to right
|
| Figure 3.2 Cuneiform |
Hieroglyphics (2613-2160 B.C.E)
The Egyptian writing system is fused with the art of relief carving. The
system is a mixture of both rebus and phonetic characters.
|
| Figure 3.3.1 Hieroglyphics |
Built on the Egyptian Logo-Consonantal System, the Phoenicians developed a
phonetic alphabet consisting of 22 letters.
|
| Figure 3.3.1 Early Greek |
Roman Uncials
By the 4th Century Roman letters were becoming more rounded, the curve form
allowed for less strokes ad could be written faster.
|
| Figure 3.3.2 Roman Uncials |
English Half Uncials
In England, the uncials evolved into a more slanted and condensed form.
while English and Iring uncials evolved, writing on the European continent
devolved considerably and needed a reformer.
|
| Figure 3.3.3 English Half Uncials |
Emperor Charlemagne / 8th C. CE.
After the fall of the Roman empire, the end of a central advanced culture
resulted in general literacy and a breakdown of handwriting into diverse
regional styles.
Carolingian Minuscule
A court school was established under the direction of Alcuin of York.
Black letter / 12 - 15 C. CE
Gothic was the culminating artistic expression of the Middle Ages, occurring
roughly from 1200-1500. The term Gothic originated with the Italians who used
it to refer to rude or barbaric cultures north of the Italian Alps.
The Italian Renaissance
As the Gothic spirit reached its apex in the other areas of western Europe.
Humanist scholars in Italy were slowly reviving the culture of antiquity. The
humanist admired the Carolingian script, which had clear open handwriting.
Humanists named the newly rediscovered letterforms Anitca.
Evolution of Middle Eastern Alphabets: While the Phoenician letter marks a
turning point in the written language-use of sound represented in letters-the
script itself has been possibly influenced by the Egyptian Hieroglyphics and
Hieratic Scripts.
|
| Figure 3.3.4 Evolution of Middle Eastern Alphabets |
The Evolution of the Chinese script: From the Oracle bone to Seal Script to
Clerical Script. Traditional and simplified scripts
|
| Figure 3.3.5 Evolution of the Chinese script |
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.
The Brahmi script (450-350 BCE): it is the earliest writing system developed
in India after the Indus script. It is one of the most influential writing
systems.
|
|
Figure 3.3.6 The Brahmi script (450-350 BCE) |
Writing system in Southeast Asia: The oldest writing systems present in
Southeast Asia were Indian scripts. There were a few but the most important
would be Pallava; the basis for writing systems across Southeast Asia. Other
than Pallava, there is also Pra-Nagari, an early form of Nagari script.
 |
| Figure 3.3.7 Middle Eastern Alphabet Evolution |
Writing systems in Nusantara: Indonesia's most important historical script is
Kawi, it derives from the Sanskrit term Kavya meaning poet. Kawi was the
script used for contact with other Kingdoms. Due to its widespread, Kawi
became the basis of other scripts in both Indonesia and the Philippines.
 |
| Figure 3.3.8 Nusantara Indonesia Kawi |
Other than Kawi, Indonesia has a great number of historical writing systems
including Incung, Rencong script, Batak script, Bugis script, and Javanese
script. This diversity intensifies the beauty of the writing system in
Nusantara.
 |
| Figure 3.3.9 Jawi Arabic Alphabet |
In conclusion, all systems of writing have some form of influence. To claim
complete originality is accurate. History gives us context, but it also allows
designers to design, conduct research, or help codify to communicate and
understand better our collective heritage.
Week 5 Lecture 4 Perception and Organisation
Perception: visual navigation and interpretation of the reader via contrast, form, and organization of the content (textual, visual, graphical, or colors).
Contrast
 |
| Figure |
PRACTICAL
Exercise 1: Typographic Systems (Week 1)
Inspirations
before starting my own design, I look for existing designs that apply
typographic systems from pinterest
Pinterest pin board link: https://pin.it/3sfAcBEOu
Indesign Formatting (following tutorial)
 |
| Figure 4.1 Indesign Formatting Tutorial (21/04/24) |
Designing Axial System
|
| Figure 4.2 Designing Axial System |
|
| Figure 4.3 Designing Radial System |
|
| Figure 4.4 Designing Dilational System |
|
| Figure 4.5 Designing Random System |
|
| Figure 4.6 Designing Grid Systems |
|
| Figure 4.7 Designing Transitional System |
Modular System
Bilateral System
Tracing over the reference Picture
Converting it to Adobe Illustrator
Reference Font: Univers LT- Extra Black
|
| Figure 4.8 Designing Modular System |
Bilateral System
|
| Figure 4.9 Designing Bilatral System |
Exercise 2: Type & Play (Week 2)
Students will be asked to 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 image does not contain
many different elements.
Choose Object: Trametes Versicolor
I chose to use this polypore mushroom called Trametes Versicolor because
I think it has a really unique and interesting shape and I see several
potentials on how it can form letters.
|
| Figure 5.1 Reference Object Trametes Versicolor |
Tracing over the reference Picture
From the reference picture I choose, I found J, G, H, and T
|
| Figure 5.2 Tracing Over Refence |
|
| Figure 5.3 Converting to Adobe Illustrator |
Reference Font: Univers LT- Extra Black
|
| Figure 5.4 Referencing from Univers LT-Extra Bold |
Text Development Process
|
| Figure 5.5 Development Process |
It can be seen from this development that the typeface tends to shift more similarly to the referenced font while becoming distinct from the extracted letters. This is a common thing to happen as the letters should look uniform to every letter in the typeface.
|
| Figure 5.6 Making Process |
Each letters are improvised using Adobe Illustrator tools by editing the
letters' paths.
I made a new poster with a background of the object that I use to extract
the letters of my typeface, which is a Trametes Versicolor. I used a clearer
image and started to add the components of a mock movie poster. I also tried
to make the title match the background image by choosing a contrasting
color.
Creating Mock Poster
After creating the typeface, students are assigned to make up a mock movie
poster out of the typeface that has been created.
At first, I misunderstood that the mock poster didn't have to represent
the created typeface, but Mr. Vinod said that it was the other way around.
I created a poster with a jellyfish background because I thought that the
typeface that I had made was similar to the shape of the jellyfish.
However, it is not correct to what has been assigned.
|
|
Figure 5.7 First poster attempt |
|
| Figure 5.8 Second poster attempt |
I also added some logos from Disney Pixar and 20th Century Fox to add into my
poster.
|
| Figure 5.9 Inserted Logos |
FINAL SUBMISSIONS
Exercise 1: Typographic Systems
|
| Figure 6.1.1 Axial System FINAL JPEG |
|
| Figure 6.1.2 Radial System FINAL JPEG |
|
| Figure 6.1.3 Dilational System FINAL JPEG |
|
| Figure 6.1.4 Random System FINAL JPEG |
|
| Figure 6.1.7 Modular System FINAL JPEG |
|
| Figure 6.1.8 Bilateral System FINAL JPEG |
Figure 6.2.1 Typographic Systems FINAL PDF
Figure 6.2.2 Typographic Systems FINAL PDF with grid
Exercise 2: Type & Play
|
| Figure 6.3.1 Image Submission |
|
|
Figure 6.3.2 Extracted Letterforms on baseline
(illustrator) |
|
|
|
|
|
Figure 6.3.4 Final letterforms on baseline |
|
| Figure 6.3.5 Original extraction and final letterforms next to each other |
|
| Figure 6.4 Mock Movie Poster Final JPG |
Figure 6.5 Mock Movie Poster Final PDF
FEEDBACKS
Week 1
General Feedback: Use the given 10 fonts from the previous
semester.
Specified feedback: Mr Vinod said that making a text vertical is allowed
when using an axial system, as long as it stays within one line. Mr.
Vinod also suggested one of my designs to make it less slanted so that
it is more readable.
Week 2
General Feedback: The text must stay within one line for the Axial
system.
Week 3
General Feedback: For Exercise 2, make sure the reference image has a
fixated and unique shape. Create a lot of exploration for making the
typeface.
Specified Feedback: Add some of the features from the reference font
such as adding straight parts while combining it with the irregular
shapes. Mr Vinod said that the final type does not have to be the exact
same shape as the extraction, Instead, focuses more on making each
letter uniformed to one another. For instance, add the features from the
letter 'G' to the other letters.
Week 4
General Feedback: Make sure the title and the text on the poster are
readable.
Specific Feedback: the poster background image has to be the same as the
reference of the extraction letter instead of an image that is not
connected. The reference image can be used for the poster.
REFLECTION
Exercise 1 Questions
Do the arrangements adhere to the prescribed system?
I tried my best to follow the composition of each system based on my
understanding.
Comment on the information's hierarchy?
In most of my designs, I focus on allowing viewers to know what the
whole thing is about by putting the headline in the highest hierarchy
and following up with the subheadlines for more context.
Does the composition draw you in?
Yes, most of the systems are either unique or easy to
understand.
Does the design adhere to best practices in typesetting?
For the systems that look more irregular, it is harder to apply
common rules of typesetting.
How can she/he improve on the design?
I can improve if I think thoroughly about how the color, size, and
boldness affect the focus of the design.
Exercise 2 Questions
Are the strokes consistent in style & weight?
Yes, I tried to not alter the style and weight of the reference
font. Instead, I just added several traits from the extracted
letterform and made sure that every letter looked similar.
Comment on the refining process:
• Are the number of stages appropriate/enough?
My refining process includes a test in making
the letters manually using pen tools from scratch and also
editing the reference font.
From that, I feel that the 7th refined text (can be seen in
Figure 5.5) already meets my expectation
• Has the form evolved while retaining crucial/core features?
Yes, I noticed that my final design of the text
does not look too identical with the extracted letters. This
is because I wanted to make
the final typeface uniformed to one another.
What can be improved upon?
I think the font design could be better if the letter strokes did
not exceed the cap height since it is how the reference font looks.
This would also make the letters look more neat if it is used in an
actual text.
FINAL REFLECTION
Experience
I enjoyed both processes of creating Exercises 1 and 2 because both
tasks challenged my technical and creative thinking skills. Though
according to the given lectures, there are fundamental rules in
typographic systems, I still have the freedom to explore how the
systems can be utilized in my own way and understanding.
Observation
I noticed that in the typographic systems, designers might have
their own way of interpreting the given rules. There are no specific
right or wrongs to the typographic systems, that is how designers
can find the unique selling point of their design.
Finding
In this task, I realized how important it is to have consistency in
any design. Consistency is the key to unity in one's design and I
think a design without consistency will look ragged and random in a
bad way. Consistency is applied in both exercises in this task. In
exercise 1, I find that the systems naturally make designs
consistent. And in exercise 2, I realized what makes a typeface is
the traits that can be found in every letter created.
FURTHER READING
Before starting with the Type & Play exercise, I read this website to get an idea of what processes that need to be done to find type.
The final form of the type should be a combination of the extracted letters from the image and the reference font that we choose.
Comments
Post a Comment