23/04/2025 - 14/05/2025 (Week 01 - Week 04)
Aveline Kristie / 0372310
Advanced Typography / Bachelor of Design (Honours) in Creative Media / School
of Design
Task 1 / Exercises: Typographic Systems & Type & Play
TABLE OF CONTENTS
1.
Lectures
2.
Instructions
3.
Tasks
4.
Feedback
5.
Reflection
6.
Further Reading
1. LECTURES
Week 1: AdTypo_1_Typographic Systems
Typographic System
Typographical organization is complex because it relies on communication to
work effectively, involving factors like hierarchy, reading order, legibility,
and contrast.
The typographic system are akin to what architects term shape grammars and
provides a sense of purpose that focuses and directs the decision making.
"All design is based on a structural system."
Elam, 2007
8 Major Variations:
1. Axial
All elements are organized to the left or right of a single axis.
2. Radial
All elements are extended from a point of focus.
3. Dilatational
All elements expand from a central point in a circular fashion.
4. Random
Elements appear to have no specific pattern or relationship.
Fig 1.1 Typographic Systems
5. Grid
System of vertical and horizontal divisions.
6. Modular
Series of non-objective elements that are constructed in as standardised
units.
7. Transitional
Informal system of layered banding.
8. Bilateral
All text is arranged symmetrically on a single axis.
Fig 1.2 Typographic Systems
Week 2: AdTypo_2_Typographic Composition
Principles of Design Composition
-
Design composition is based on key principles like emphasis, isolation,
repetition, symmetry/asymmetry, alignment, and perspective.
-
They often seem more suited to imagery than to complex information
layouts.
Rule of Thirds
A frame (space) can be divided into 3 columns and 3 rows.
Intersecting lines are used as guide to place the points of interest
within the given space.
Fig 1.3 The Rule of Thirds Example
Typographic Systems
Among the eight systems, the Grid System is the most practical and
widely used. It originated from the grid-based layout of letterpress
printing and was later refined by what is now known as the Swiss Style
of typography, championed by designers like Josef Müller-Brockmann, Jan
Tschichold, and Max Bill.
Fig 1.4 Grid System Example
Other models / Systems
Environmental Grid
-
The Environmental Grid system is based on structures from real
environments.
-
Designers extract key curved and straight lines from these
structures.
-
These lines form a “super-structure” used to organize design
elements.
-
The system blends objective and non-objective elements for unique
textures and visuals.
-
It adds context by linking design forms to features from
environments tied to the message.
Fig 1.5 Environmental Grid Example
Form and Movement
- Based on the exploration of an existing Grid Systems.
-
Developed this system to get students to explore; the multitude of
options the grid offer; to dispel the seriousness surrounding the
application of the grid system; to see the turning of pages in a
book as a slowed-down animation in the form that constitutes the
placement of an image, text and colour.
Fig 1.6 Form and Movement Example
Week 3: AdTypo_3_Context & Creativity
Fig 1.7 Evolution of the Latin Alphabet
Context:
Refers primarily to
historical context: understanding
the time, tools, materials, and culture that shaped handwriting and
typography.
Handwriting:
-
Early mechanical typefaces were
designed to mimic handwriting.
-
Handwriting set the standard for form, spacing, and typographic
conventions.
-
Materials and tools like
feathers, bones, charcoal, reed pens, and surfaces
(clay, papyrus, palm leaves) directly influenced letter shapes.
Timeline of Major Writing Systems
1. Cuneiform (3400 BCE): First writing system from Sumer, pressed into clay with a reed
stylus.
2. Egyptian Hieroglyphics (2613–2610 BCE):
-
A sophisticated system combining pictures, phonetic symbols,
and classifiers.
-
Carved into monuments and tombs; represented ideas, sounds,
and objects.
3. Early Greek Alphabet (5th Century BCE):
-
Evolved from the Phoenician alphabet, introducing vowels.
-
Wrote in both directions (boustrophedon), with letters drawn
freehand and without serifs.
4. Roman Uncials (4th Century CE):
5. English Half-Uncials (8th Century CE):
-
A variation of Roman uncials, more condensed and slanted.
-
Developed in England and Ireland, used in religious texts.
6. Carolingian Minuscule (8th Century CE, under
Charlemagne):
-
A clear, uniform script introduced to standardize writing
across Europe.
-
Included punctuation, capital letters, and word spacing;
laying the groundwork for modern lowercase.
7. Blackletter (12th–15th Century CE):
-
A dense, angular script used throughout medieval Europe.
-
Known for its Gothic aesthetic; often used in early printed
books and religious texts.
8. Movable Type (11th–14th Century CE):
-
First developed in East Asia (China and Korea) before
appearing in Europe.
-
Revolutionized printing by allowing reusable, cast
characters; essential for mass book production.
Fig 1.8 Timeline of Major Writing System Examples
Eastern Handwriting Developments
1. Evolution of Middle Eastern: Originated with
the Phoenician alphabet; influenced Aramaic, Arabic, and Hebrew.
Likely inspired by Egyptian scripts.
2. Evolution of Chinese Script: Evolved from
oracle bones to seal, clerical, and modern scripts. Emphasizes
logographic characters.
3. IVC Script: Undeciphered script found on
seals; possibly symbolic or linked to Dravidian languages.
4. Brahmi Script (450 - 350 BCE): Root of most
Indian and Southeast Asian scripts; possibly derived from Semitic
or Indus scripts.
5. Pallava Script: South Indian script that
spread Sanskrit and Tamil writing to Southeast Asia.
6. Kawi: Derived from Pallava; used in Java and nearby
regions for official and literary texts.
7. Jawi: Arabic-based script adapted for Malay; used
in Islamic texts and classical Malay literature.
Fig 1.9 Eastern Handwriting Development Examples
Programmers and Type Design
-
Major tech companies (like Google) are increasingly producing
vernacular scripts.
-
Muthu Nedumaran: Created to address scenarios where written
content is presented in either vernacular scripts or a
combination of vernacular and Latin scripts.
-
Huruf: A local collective of graphic designers focused on
adapting Latin and vernacular lettering, often seen painted or
inscribed on walls and signs. This group is one of the leading
organizations in Malaysia working to digitize and revitalize
typefaces.
Week 4: AdTypo_4_Designing Type
Xavier Dupré (2007) suggested two key reasons for
designing a typeface:
-
Type design carries a social responsibility so one must
continue to improve its legibility.
- Type design is a form of artistic expression.
Notable Typeface Designers & Their Contributions
Adrian Frutiger
-
Swiss designer; advanced typography into digital era.
-
Created
Frutiger
for
Charles de Gaulle Airport
(1968).
-
Other works:
Univers,
Avenir,
Devanagari script redesign for India’s NID.
-
Emphasized purpose-driven design: signage, poor lighting,
movement.
Matthew Carter
-
Designed
Johnston Sans
for
London Underground
(1916).
-
Inspired student
Eric Gill,
who controversially based
Gill Sans
on Johnston’s design.
Fig 1.10 Typefaces Examples
Design Process of Typefaces
1. Research
-
Understand type history, anatomy, conventions, and
purpose.
-
Study existing fonts and usage contexts.
2. Sketching
-
Traditional (pen/brush) vs. digital (Wacom, Illustrator).
-
Hand sketching: More deliberate, expressive.
-
Digital:
Faster, consistent but risks losing natural flow.
3. Digitization
-
Tools:
FontLab,
Glyphs App,
Adobe Illustrator
(frowned upon by purists).
-
Focus on
form and counterform
for optimal readability.
4. Testing
5. Deploy
Construction Techniques & Visual Corrections
-
Use
grids
(square + circle) for Roman capitals.
-
Group similar shapes to speed up creation (round,
rectangular, diagonal).
-
Apply
optical corrections
(overshoots, spacing).
-
Intrinsic Motivation:
-
Extrinsic Motivation:
Fig 1.11 Group of Capitals and Lowercase Letters
2. INSTRUCTIONS
3. TASKS
Exercise 1 - Typographic Systems
For this assignment, we were required to explore eight different typographic
systems: Axial, Radial, Dilatational, Random, Grid, Modular, Transitional,
and Bilateral. Using these systems, we had to create typographic posters in
Adobe InDesign based on the content provided in the MIB. Each poster had to
be 200×200 mm in size and could use a maximum of three colours.
For the content, we were instructed to select one headline out of the 3
given:
All Rippled Up: Punk Influences on Design
The ABCs of Bauhaus Design Theory
Russian Constructivism and Graphic Design
So I decided to go with the first headline, which is "All Ripped Up: Punk
Influences on Design" for all of my works.
Content:
The Design School,
Taylor’s University
All Ripped Up: Punk Influences on 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
1. Visual References
I chose "All Ripped Up: Punk Influences on Design" headline for my posters.
To begin, I decided to do some research for inspiration and references in
Pinterest.
The article for the headline itself explains about punk. Punk is a 1970s
movement known for anti-establishment music, fashion, and art. The article
explains how punk’s raw, DIY style influenced graphic design with ripped
textures, bold typography, and rebellious visuals.
Fig 3.1 Visual References, Week 1 (24/04/25)
2. Progress
I made at least two designs for each system.
Axial System
Fonts Used:
Gill Sans Std (Regular, Bold)
Bembo Std (Extra Bold Italic)
Fig 3.2 Axial System Attempt 1 & 2, Week 1 (24/04/25)
For the axial system, I created two different designs. However, I prefer the
first attempt over the second one.
Radial System
Fonts Used:
Univers LT Std (55 Roman, 75 Black, 67 Bold Condensed)
Bembo Std (Bold)
Fig 3.3 Radial System Attempt 1 & 2, Week 1 (24/04/25)
For the radial system, Mr. Vinod gave me feedback that the graphical
elements in my first attempt were too distracting, although the rest was
fine. So, I decided to go with the second design but also planned to
reduce the opacity of the graphical element.
Dilatational System
Fonts Used:
Gill Sans Std (Regular, Bold, Extra Bold Display)
Univers LT Std (63 Bold Extended Oblique, 67 Bold Condensed, 57
Condensed)
Fig 3.4 Dilatational System Attempt 1 & 2, Week 1 (25/04/25)
For the dilatational system, I felt that my first attempt ended up looking
too similar to my reference, so I chose to go with the second attempt
instead.
Random System
Fonts Used:
Univers LT Std (55 Roman, 57 Condensed, 63 Bold Extended, 67 Bold
Condensed)
ITC New Baskerville Std (Italic)
ITC Garamond Std (Ultra Narrow, Ultra Condensed
Italic, Ultra Italic)
Futura Std (Extra Bold Condensed Oblique, Book)
Bembo Std (Extra Bold, Bold Italic, Semibold Italic)
Janson Text LT Std (56 Italic)
Bodoni Std (Roman)
Serifa Std (65 Bold)
Gill Sans Std (Extra Bold Display)
Fig 3.5 Random System Attempt 1 & 2, Week 1 (25/04/25)
For the random system, I ended up choosing the first attempt because I
felt it had more flow and uniqueness compared to the second one.
Grid System
Fonts Used:
Gill Sans Std (Extra Bold Display, Regular, Bold)
Fig 3.6 Grid System Attempt 1 & 2, Week 1 (25/04/25)
For the grid system, I believe the first attempt looks more balanced than
the second one, and overall, I feel it turned out better. However, I
plan to change the font colour of the dates to red so they stand out more
and appear highlighted.
Modular System
Fonts Used:
Futura Std (Extra Bold Condensed)
Gill Sans Std (Regular, Bold)
Fig 3.7 Modular System Attempt 1 & 2, Week 1 (26/04/25)
For the modular system, I felt that the first attempt looked too similar
to my grid design. The second attempt appeared more modular and visually
stronger, so I decided to go with that one.
Transitional System
Fonts Used:
Gill Sans Std (Bold)
Univers LT Std (55 Roman, 65 Bold)
Fig 3.8 Transitional System Attempt 1 & 2, Week 1 (26/04/25)
For the transitional system, I feel that the second design looks more
unique and interesting than the first one. Even so, Mr. Vinod mentioned
that the circular graphic was too strong and distracting, so I plan to
change it to display only the outline without the fill.
Bilateral System
Fonts Used:
Univers LT Std (55 Roman, 57 Condensed, 65 Bold)
Bembo Std (Extra Bold Italic)
Janson Text LT Std (56 Italic)
Univers LT Std (75 Black Oblique, 55 Roman)
Fig 3.9 Bilateral System Attempt 1 & 2, Week 1 (27/04/25)
Fig 3.10 Bilateral System Attempt 3 & 4, Week 2 (28/04/25)
For the bilateral system, I realized that my first, second, and third
attempts were actually more aligned with a multilateral approach rather than a
true bilateral one. So, I created a final design that better fits the system
and chose a black background for it.
Fig 3.11 Chosen Design Compilation, Week 2 (30/04/25)
3. Task 1 - Typographic Systems Outcome Compilation
Fig 3.12 Final Outcome Design Compilation, Week 2 (30/04/25)
Fig 3.13 Axial System Final Outcome, Week 2 (30/04/25)
Fig 3.14 Radial System Final Outcome, Week 2 (30/04/25)
Fig 3.15 Dilatational System Final Outcome, Week 2 (30/04/25)
Fig 3.16 Random System Final Outcome, Week 2 (30/04/25)
Fig 3.17 Grid System Final Outcome, Week 2 (30/04/25)
Fig 3.18 Modular System Final Outcome, Week 2 (30/04/25)
Fig 3.19 Transitional System Final Outcome, Week 2 (30/04/25)
Fig 3.20 Modular System Final Outcome, Week 2 (30/04/25)
Fig 3.21 Final Outcome .PDF, Week 2 (30/04/25)
Fig 3.22 Final Outcome with Grid .PDF, Week 2
(30/04/25)
Exercise 2 - Type & Play
For the second exercise, we were instructed to dissect at least five
letterforms from an image of a subject that has texture. Then, we
had to use one of the ten typefaces that Mr. Vinod gave us as a
reference font.
After doing some research, I chose a picture of sourdough bread
that I found on Pinterest as my subject.
Fig 3.23 Subject Chosen, Week 2 (01/05/25)
2. Letterform Dissection
After choosing my subject, I began to identify which letterforms I
could find in the bread. As a result, I observed the letters A, B,
V, O, and D.
Fig 3.24 Reference Font, Week 2 (01/05/25)
After dissecting all the shapes I found in the bread, I began
to create and refine each letter. I used
Univers LT Std (65 Bold) as my reference font. My goal
was to make the letters resemble the reference font while
still incorporating characteristics from the bread’s texture.
Fig 3.25 Progress of Refined Letterforms, Week 2
(02/05/25)
Fig 3.26 Progress of Refined Letterforms, Week 2 (02/05/25)
3. Final Letterform Outcome
After class, Mr. Vinod suggested that I should incorporate
more of the bread’s texture into my letterforms. So, I
added holes to the letters to reflect that detail.
Overall, I’m quite satisfied with the outcome.
Fig 3.27 Letterforms Final Outcome .JPEG, Week 3 (07/05/25)
Fig 3.28 Letterforms Final Outcome .JPEG, Week 3 (07/05/25)
Fig 3.29 Letterforms Final Outcome .JPEG, Week 3 (07/05/25)
Fig 3.30 Letterforms Final Outcome .JPEG, Week 3 (07/05/25)
Fig 3.31 Letterforms Final Outcome .JPEG, Week 3 (07/05/25)
Fig 3.32 Letterforms Final Outcome .JPEG, Week 3 (07/05/25)
Fig 3.33 Letterforms Final Outcome .PDF, Week 3
(07/05/25)
4. Poster Making
For the next step, which was creating a movie poster, I
began by searching for an image related to my subject to
match the style of my font. Then, I added each of my
custom letters to form the movie title, and included
additional movie details such as the actors, release
date, and more.
Fig 3.34 Progress of Making Poster, Week 3
(08/05/25)
Fig 3.35 Progress of Making Poster, Week 3 (08/05/25)
However, I wasn’t fully satisfied with my outcome, so I
imported my poster into Adobe Photoshop and began
adjusting the hue, saturation, lighting, and colours.
Fig 3.36 Progress of Making Poster, Week 3 (09/05/25)
Fig 3.37 Final Outcome .JPEG, Week 3 (09/05/25)
After the feedback session, Mr. Vinod said that the margin on my
poster was poor and the image didn’t look like bread at all. As
a result, I adjusted the margins and replaced the image used in
the poster. I then adjusted the colour and saturation in Adobe
Photoshop.
Fig 3.38 Revised Poster Progress, Week 4 (14/05/25)
Fig 3.39 Revised Poster Progress, Week 4 (14/05/25)
4. Final Poster Outcome
Fig 3.40 Final Outcome .JPEG, Week 4 (15/05/25)
Fig 3.41 Final Outcome .PDF, Week 4 (15/05/25)
5. Task 1 - Type & Play Outcome Compilation
Fig 3.42 Letterforms Final Outcome .JPEG, Week 3 (07/05/25)
Fig 3.43 Letterforms Final Outcome .JPEG, Week 3 (07/05/25)
Fig 3.44 Letterforms Final Outcome .JPEG, Week 3 (07/05/25)
Fig 3.45 Letterforms Final Outcome .JPEG, Week 3 (07/05/25)
Fig 3.46 Letterforms Final Outcome .JPEG, Week 3 (07/05/25)
Fig 3.47 Letterforms Final Outcome .JPEG, Week 3 (07/05/25)
Fig 3.48 Letterforms Final Outcome .PDF, Week 3 (07/05/25)
Fig 3.49 Movie Poster Final Outcome .JPEG, Week 4 (15/05/25)
Fig 3.50 Movie Poster Final Outcome .PDF, Week 4 (15/05/25)
4. FEEDBACK
Week 1
General Feedback: Recall Typography semester 1 knowledge and set up the e-portfolio for each task. We are instructed to always show progress and write summaries for all lectures in the blogpost. Mr. Vinod also briefed us for the first assignment.
Specific Feedback: -
Week 2
General Feedback: Mr. Vinod emphasized the importance of
avoiding extreme angles in the axial system, reminding us to stick to
a clear single axis for better readability. He also highlighted the
need to set proper margins, improve colour contrast, and maintain
consistency in point size and leading. Design should command space,
and in the random system, while chaos is essential, it shouldn’t let
graphic elements overpower the text.
Specific Feedback: Mr. Vinod mentioned that the graphic
elements in my radial system design were too distracting, and the
circle in the transitional system design appeared too strong. However,
overall the work was already good, especially the grid and random
systems.
Week 3
General Feedback: Mr. Vinod reminded us to keep our
letterforms consistent in shape and stroke thickness. He also
reminded us to really understand the image we chose, so we can
bring its essence into our letters more naturally.
Specific Feedback: Mr. Vinod said that I
could introduce more of the bread texture into the letters. He
suggested adding the texture in the holes of my "A", "B", "O", and
"D". He also mentioned that my letters are already good and
consistent.
Week 4
General Feedback: Before starting the
layout, it is important to set the margin first. Make sure that
the information is readable.
Specific Feedback: Mr. Vinod mentioned
that while the overall work is good, the bread doesn't really
look like bread. He also pointed out that the margins on my
poster need improvement.
5. REFLECTION
Experience
From the first exercise, I gained new knowledge about typographic systems, especially because I applied all of the systems to create a typographic poster. For the second task, I enjoyed the process as it allowed me to use my creativity to shape the outcome. However, blending the letterform with the object presented some unexpected challenges.
Observations
I feel that it takes time to truly understand how each system works and how it looks. Sometimes it’s a bit challenging, but overall, I enjoyed the process. In the second exercise, I realized how important it is to thoroughly understand the visual traits of the chosen object. It's also essential to maintain readability while experimenting with the form.
Findings
I found that each typographic system has its own unique structure and purpose. By experimenting with all of them, I learned how layout, alignment, and hierarchy affect the overall design and readability of a composition. Through this exercise, I learned that it's crucial to maintain the interplay between the object from which the letterforms were initially extracted and the image used in the type integration.
Fig 6.1 "Typographic Systems" by Kimberly Elam (2007)
Fig 6.2 "Constraints and Options" Page 10
This page explains how designers can adjust line breaks, leading, and
spacing to change the look and feel of text.
By changing where lines break, the spacing between lines, and the space
between letters or words, designers create different visual textures and
guide how the viewer reads the message.
Fig 6.3 "The Circle and Composition" Page 12
This page shows how a simple circle can be used in layouts to create
emphasis, balance, or tension.
By placing the circle in different positions, designers can guide the
viewer’s eye, highlight important information, or organize the composition
visually. Even small shifts in placement can change the overall feel and
focus of the design.
Fig 6.3 "Axial Systems, Thumbnail Variations" Page 23
This page explains the axial system, where design elements are aligned along
a central axis to create structure and order in a composition.
It shows how designers progress from basic alignment in the initial phase,
to experimenting with spacing and texture in the intermediate phase, and
finally to creative, unconventional layouts in the advanced phase, using
shaped or angled axes for more dynamic results.
Comments
Post a Comment