Advanced Typography - Task 1: Exercises
Advanced Typography - Task 1: Exercises 1 & 2
22/9/2025 - 20/10/2025 / Week 1 - Week 4
YUAN XIAOYUE, 0367988
Advanced Typography / Bachelor of Design (Hons) in Creative Media
Task 1: Exercises 1 & 2
LIST:
LECTURES：
Week 1 :
AdTypo_1_Typographic Systems：
In this lecture, Mr. Vinod explained the typesetting system, noting that we usually perceive it as linear, which is connected to its historical development.
All design is based on an underlying structural system. Kimberly Elam identifies eight primary variations, each allowing for countless permutations or variations. These variations are: axial, radial, expansive, random, grid, modular, transitional, and bilateral.
1. Axial System：
All elements are arranged along a single axis, either to the left or right. The information is separated into groups by the red lines shown in the figure, and each group is positioned at different angles on either side of the axis.
2. Radial system：
All elements radiate outward from a central point of focus. They are
arranged in relation to this point, with each element directing attention
back toward it. This arrangement defines the radial system.
3. Dilatation system：
All systems extend outward from a central point in a circular fashion.
Multiple concentric rings can be created, with information placed on
either side or along the width of these circles. This arrangement can also
be organized hierarchically, giving precedence to the most important
elements.
4. Dilatation system：
These elements show little to no specific pattern or relationship, which
is exactly what makes random systems intriguing. It should be noted,
however, that even within this apparent chaos, there are methods for
creating order and coherence.
5. Grid system：
This system is among the most widely used. Its elements are arranged in a
grid structure, divided both horizontally and vertically.
6. Transitional system：
This information system is hierarchical and strip-shaped, helping to
enhance both the dynamism of the composition and the impact of the
information.
7. Modular system：
A series of non-objective elements arranged as standardized units.
8.Bilateral system：
In the bilateral system, all text is arranged symmetrically along a single
axis. This approach is commonly used in designs such as invitation cards
and similar formats.
|
|
Eight systems (2025, September, 25) |
Week 2:
AdTypo_2_Layout and Composition:
Design Composition Principles:
This section explores composition principles such as emphasis,
isolation, repetition, symmetry and asymmetry, alignment, and
perspective, focusing on their application in print and typography.
These principles help designers establish visual hierarchy, direct the
viewer's attention, and enhance the overall balance and harmony of
their work.
|
| Design Composition Principles (October 06, 2025) |
The Rule of Thirds:
A common photographic and visual composition principle, the rule
divides the image into a grid of three rows and three columns. The
intersections are considered focal points, naturally drawing the
viewer's eye and creating a more harmonious and balanced composition.
|
| The Rule of Thirds (October 06, 2025) |
Typographic Systems:
There are eight primary systems in typographic design, with the grid
being the most representative. Grids establish an orderly visual
structure, reinforce modularity and hierarchical layouts, and
effectively enhance the readability and reading experience of text.
Postmodern Typographic Systems:
Postmodern typography breaks with traditional grid structures,
pursuing visual irregularity and chaos, emphasizing emotional
expression and visual conflict, often sacrificing readability to
enhance the design's individuality and tension.
Environmental Grids and Form and Movement:
These alternative systems organize typographic structure through
environmental elements, using grids to create a continuous visual
rhythm and dynamic layout across multiple pages or screens, achieving
a balance and extension between static and dynamic elements.
|
| Environment Grid (October 06, 2025) |
|
| Form and movement (October 06, 2025) |
Week 3:
AdTypo_3_Background and Creative:
The Influence of Handwriting on Typography:
Early mechanically printed typefaces were deeply influenced by
handwriting, and its stroke forms, spacing, and structural
specifications became the foundation for subsequent typeface
design. These forms, dictated by the writing tools and materials
of the time—such as bone pens, reeds, quills, and brushes—formed
distinctive handwriting styles.
|
| The Evolution of the Latin Alphabet (October 10, 2025) |
|
| Ancient Egyptian Hieroglyphics (October 10, 2025) |
The Origin and Evolution of Writing Systems:
Cuneiform (c. 3000 BC): Carved on clay tablets, this was an early
pictographic system.
Egyptian hieroglyphics: Combining pictographic, ideographic, and
phonetic symbols, it laid the foundation for subsequent alphabets.
Phoenician, Greek, and Roman scripts: Marked the transition from
pictorial to phonetic, establishing the structure of Western
writing.
Major Developments in Writing Throughout the Ages:
Roman Uncial (4th century AD): Rounded, flowing, and easy to
write.
|
| Roman Uncial (October 10, 2025) |
Carolingian Minuscule (8th–9th century AD): Introduced
standardized glyphs, spacing, and punctuation, establishing the
standard for modern handwriting.
|
| Carolingian lowercase letters (October 10, 2025) |
Blackletter (Middle Ages): Angular, dense, and forceful,
reflecting a Gothic aesthetic.
Origins of Movable Type Printing:
Movable type printing first appeared in Asia:
China (8th century): Woodblock printing facilitated book
reproduction.
|
| The evolution of Chinese characters (October 10, 2025) |
Korea (14th century): The invention of movable metal type preceded
Gutenberg's work in Europe.
Despite the large number of characters, these innovations
significantly facilitated the spread of knowledge in East Asia.
|
| Movable type printing 11C.--14C. (October 10, 2025) |
Modern Vernacular and Script Revival:
Contemporary designers are working to revive endangered scripts
and promote local fonts through digital and modern platforms. In
Malaysia, designer Muthu Nedumaran is actively promoting the
modernization of local scripts, ensuring the preservation and
innovation of cultural heritage within a global design context.
Week 4：
AdTypo_4_Design Type：
Typeface Design Process：
1. Research：
Before beginning design, you need to gain a deep
understanding of the history, structure, and basic
terminology of typefaces. You should also identify the
purpose and usage scenarios of the typeface and research
existing typefaces for inspiration, reference, and design
direction. This phase helps designers understand the
performance and functionality of typefaces in different
media.
2. Sketching：
Typeface design typically begins with hand-drawn or digital
sketches. The sketching phase focuses on exploring the
structure and proportions of glyphs, establishing a visual
foundation for subsequent digitization.
|
| Sketch of Johnston Sans. (October 14, 2025) |
3. Digitization：
Common professional software includes FontLab and the Glyphs
app. Some designers also use Adobe Illustrator for initial
construction. While this method offers greater flexibility,
specialized software remains the primary tool in
professional typeface development.
|
| Glyphs and Fontlab APP. (October 14, 2025) |
4. Testing：
Testing is one of the most critical steps in typeface
development. Prototyping, print testing, and evaluation in
various scenarios help uncover and refine details.
For body text typefaces, readability and clarity are primary
considerations; display typefaces, on the other hand,
prioritize form and visual expression.
|
|
Prototype Stencil (Stenz) developed and designed by
Vinod J.Nair. (October 14, 2025) |
5. Deployment and Refinement：
After release, fonts require continuous optimization.
Real-world use may reveal issues not discovered during the
testing phase, so rigorous testing and iterative updates are
crucial to font quality.
|
|
Prototype Number plate typeface (Car license
registration) (October 14, 2025) |
Construction & Refinement：
Using a grid or circular structure helps establish
consistent glyph proportions and is an effective way to
build a design system.
|
|
Construction grid for the Roman Capital using 8 x 8
cells. (October 14, 2025) |
The visual balance of different shapes should be considered
in the design. For example, curved strokes often extend
slightly beyond the baseline or topline to achieve a more
natural visual alignment.
Kerning is equally important. Maintain consistent visual
spacing between letters, rather than relying solely on
mechanical measurements.
During the printing process, especially when using absorbent
paper, ink traps should be used to prevent ink accumulation
and maintain sharp glyphs.
|
|
Example of what you measure is not what you see. (October 14, 2025) |
INSTRUCTION:
EXERCISE:
Week 1 :
We were asked to design eight typographic posters using Adobe
InDesign. We were required to use the provided content and limit the
color palette to black and one additional color. Limited use of
graphic elements such as lines or dots was permitted.
Notes:
Use Adobe InDesign only
Dimensions: 200 x 200 mm
Color: Black and one additional color
Graphic elements (lines, dots, etc.) are permitted, but in limited
quantities.
First attempt:
|
| First attempt of the eight systems (September 26, 2025) |
After the professor’s comments and feedback in class, I made a lot of
changes to make my layout design look better.
|
| Second attempt of the eight systems (September 30, 2025) |
|
| Axial System (September 30, 2025) |
|
| Radial system (September 30, 2025) |
|
| Dilatation system |
|
| Dilatation system (September 30, 2025) |
|
| Grid system (September 30, 2025) |
|
| Transitional system (September 30, 2025) |
|
| Modular system (September 30, 2025) |
|
| Bilateral system (September 30, 2025) |
No baseline pdf
(September 30, 2025)
Baseline PDF available (September 30, 2025)
Exercise 2 - Typing and Gaming：
We were asked to choose a picture that contained a man-made object
(chair, glass, etc.), a structure (building), or a natural thing
(people, landscape, leaves, plants, bushes, clouds, hills, rivers,
etc.). Make sure the picture doesn't contain too many different
elements.
Final Submission: Investigations (both type and game) should
include:
- Image
- Extracted letterforms (illustrator) on a baseline
- Reference font
- Refinement process
- Final letterforms on a baseline
- Original extraction and final letterforms next to each other
- Image collage, dissection and extraction, reference, refinement,
and final
- Poster
I chose a picture of ice cracks:
|
| negatives (October 08, 2025) |
|
| Letter Extraction negatives (October 08, 2025) |
|
| Letter Extraction negatives (October 08, 2025) |
|
|
Extracted letters (October 08, 2025) |
|
|
Compilation process (October 08, 2025) |
|
|
Final Result (October 08, 2025) |
Final Result PDF (October 08, 2025)
In Exercise 2 Part 2 we were asked to create a movie poster using the
final font we created in Part 1.
I added a filter to the background to make it more textured, and then
used a clipping mask to make the letters look good. Because the
background colors are dark blue and white, I tried several colors but
couldn't see the letters clearly. Finally, I chose the look of a snowy
mountain, and the letters looked a bit like black and white spots.
|
| Production process (October 12, 2025) |
|
| Production process (October 12, 2025) |
|
| First poster (October 12, 2025) |
In class, the professor told me the text contrast was too low, so I
changed it back to gold to make it stand out more and look more
appealing. I also added the film company logo and credits.
Below is my final poster.
|
| Final poster (October 14, 2025) |
Final poster PDF
(October 14, 2025)
FEEDBACK:
Week 1：
Generall Feedback: This week, the professor used a video to explain
eight common typographic systems and illustrated how they are applied in
real-world design.
Special Feedback: Teacher Vinod explained the course outline and the
requirements for Task 1. We learned about the module's main content,
learning objectives, requirements, and final grading criteria. We also
viewed the excellent digital portfolios of previous students.
Week 2：
General Feedback： This class provided feedback on the completion of
Task 1. The professor emphasized that we must use InDesign for our
creations. Common issues included excessive decoration and typography that
did not meet the requirements of the specified system.
Special Feedback： This class provided feedback on the completion of
Task 1. The professor emphasized that we must use InDesign for our
creations. Common issues included excessive decoration and typography that
did not meet the requirements of the specified system.
Week 3：
General Feedback：In this class, the professor gave each of us
feedback on the homework of Exercise 2, and then explained the next poster
production.
Special Feedback：The professor suggested that my letters should be
extracted from large areas rather than from gaps, so I extracted all five
letters and and began designing.
Week 4：
General Feedback：In class, the professor gave each of us feedback on
the poster production and then introduced the homework for next week.
Special Feedback：The professor told me that the contrast between the
text and the image was too low, so I changed the text color and added the film
company logo and production crew information.
REFLECTION:
Experience:
In Exercise 1, my biggest challenge was maintaining creativity within the
rules of the system. Initially, I referenced many classic typographic works,
but I often followed the examples without developing my own ideas. Later,
after receiving feedback from the professor, I made significant changes and
ultimately created my own work.
In contrast, Exercise 2 felt much easier. I performed well in the research
and selection phase, but still struggled with refining the typeface. After
further feedback, my work improved significantly.
Observation:
I discovered that each typographic system has a unique structure and
meaning. The teacher's guidance helped me correct errors and gain a deeper
understanding of the system's principles.
In typeface creation, I realized the importance of detailed adjustment,
how every stroke and spacing impacts the overall look. While designing
movie posters, I also learned that elements like the main title, subtitle,
and logo are key to establishing a professional visual hierarchy.
Through these two exercises, I realized that typography relies on
structure and balance, and that even minimalist designs require precise
control.
Findings：
During this exercise, I discovered that typography is full of creativity
and possibilities. Exercise 1 allowed me to learn eight typographic
systems. Through self-exploration and feedback from my instructor, I
realized that following a system isn't restrictive; it makes my work more
professional, and that creativity and rules can coexist.
Exercise 2 opened up greater creative freedom for me, but also exposed my
shortcomings in controlling details. The entire process taught me that
going from understanding theory to completing a design requires time and
patience. Despite the challenges, these challenges have strengthened my
independence and confidence, and laid the foundation for me to tackle
complex design tasks in the future.
FUTHER READING:
|
| Typographic System (October 14, 2025) |
After reading the opening of Kimberly Elam's "Typographic Systems," my
understanding of typography has deepened. I used to think of typography as
simply lining up text and making images look good, but this book made me
realize that typography is actually a way of organizing thought.
The book introduces eight typographic systems: axial, radial, diffuse,
random, grid, modular, transitional, and bidirectional. Through clear
illustrations and analysis, Elam helped me understand that these systems
aren't rigid rules, but tools that help designers establish order, control
rhythm, and achieve visual balance. I was particularly impressed by her
discussion of the grid system. She likened it to an "invisible skeleton"
that supports the structure of a page while allowing designers to find
creative space within order.
I was also interested in her mention of postmodern typography, which breaks
with traditional rules and uses more freeform methods to express visual
conflict and rhythm. This got me thinking: design doesn't always have to be
symmetrical and neat; sometimes, imperfection can be more vibrant.
After reading the entire book, I felt that the author's discussion wasn't
just about technology; it was about design thinking. She reminds us that the
purpose of typography isn't just to look good; it's to make information
clearer and more meaningful.
This book has inspired me to think more about structure, space, and
hierarchy in my designs, and has also given me a deeper understanding of why
"rules" are meant to be broken.
评论
发表评论