24.09.2025 - 21.10.2025 (Week 1 - Week 4)
Nur Asma’ Binti Anuar / 0378095 / BDCM
Advanced Typography
Task 1: Exercises
____________________________
LECTURES
Lecture 1: Typographic System
All design is based on a structural system:
- Axial: informations divided into groups with a single/more axis,
straight or bent.
- Radial: all elements are extended from a point of focus, multiple
or singular perspectives.
- Dilational: all systems expand from a central point in a circular
manner, multiple rings or singular.
- Random: no specific pattern, usually difficult for organized
individual.
- Grid: follows the grid system in a structural manner.
- Modular: allows to move individual units to different portions of
the page. Units can be randomly placed that differs from the grid system but
all units are of the same size
- Transitional: layered banding of information divided into groups or
short/ highlighted sentences.
- Bilateral: all text are symmetrically arranged in a single axis.
Typographical organization is complex, elements dependent on communication
in order to function. Criteria; hierarchy, order of reading, legibility, and
contrast. It is used to advocate, celebrate, educate, elaborate, illuminate,
and disseminate informations. Along the way, the words and pages become art
and a way of expression.
An understanding of the systems organization process allows designers to
break free from the rigid horizontal and vertical grid systems of letter
press. Allows designers to use more fluid means to create typographic
message.
Lecture 2: Typographic Composition
7 different principles of design composition:
- emphasis: one is more emphasized than the rest
- isolation
- repetition
- symmetry
- asymmetry
- alignment
- perspective
Typographic systems: the 8 systems, especially the asymetrical systems were
new and used during the rise of punk as a way to rebel against the compacted
layouts.
Environmental Grid: based on exploration of an existing structure or many
combined. Extraction of crucial lines both curved and straight are formed.
Designer then organizes information around super-structure, includes
non-objective elements to create unique mixture of texture and visual
stimuli.
Form and movement: based on exploration of an existing grid system. Used 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 image, text and color. Placement of a form
on a page, over many pages creates movement.
Lecture 3: Context & Creativity
Handwriting: the first mechanically produced letterforms were designed to imitate handwriting. It becomes the basis or standard for form, spacing, and conventions mechanical type would try and mimic, the shape and line are influenced by the tools and materials used to make them, such as charcoal, sticks, plant stems, brushes, etc. Additional factors included the material upon which forms were written, such as clay, animal skin, and paper.
Cuneiform: Earliest system of actual writing, distinctive features and wedge is pressing the blunt end of a reed stylus into wet clay tablets.
Movable type: this innovation was pioneered in China, it was unsuccessful due to the number of characters & using clay, but it was achieved in Korea, as they establish a foundry to cast movable type in bronze, and it was established before the earliest printing in Europe.
It is important that we should understand history instead of forgetting about them, we should keep them alive as it gives younger designers to know more about culture, heritage, communities as context gives opportunities for inspiration for a possibility of originality. We have to be rich in history and culture knowledge in order to develop instead of blindly approaching cultures and developments that have no context. Context gives opportunity for creativity by observing our surroundings & exploration of our collective histories.
Lecture 4: Designing Type
Type design carries a social responsibility so one must continue to improve its legibility. Type design is a form of artistic expression.
Adrian Frutiger created the Univers and Frutiger typefaces. Purpose of his typeface was to create a clean, distinctive and legible typeface that is easy to see from both close up and far away that could be extremely functional. The limitations of his typeface were the letterforms needed to be recognized even in poor light conditions or when the reader was moving quickly past the sign, tested with unfocused letters to see which letterforms could still be identified.
Matthew Carter created the Verdana typeface. His purpose was to make the font to be tuned to be extremely legible even at very small sizes on the screen due in part to the popularity of the internet and electronic devices. Limitations were that the Verdana fonts exhibits characteristics derived from the pixel rather than the pen, the brush or the chisel. Commonly confused characters, such as lowercase i j l.
Edward Johnston created the Johnston Sans. The purpose of his typeface was ordered by London's Underground railway for a new typeface for its posters and signage, he handed over details and example of letter shapes that would set the tone for printed text until the present day. Limitations were that the typeface remit was to unite the London Underground Group, the different companies all using the same rails and tunnels, all the advertising and signage was all completely different, there was a cacophony of letters. Johnston applied the proportions of roman capital letters to his typeface, so it was rooted in history, rooted in traditional calligraphy, but it has an elegance and a simplicity that fitted modern age.
General process of type design:
- Research: it is to understand the type history, anatomy, and conventions, terminologies etc is important. Knowing the context, rules, etc is also important. Determine the purpose and what fit would be used for. When you are clear, then analyze, after analyzing, you will understand the usage of its patterns.
- Sketching: Using traditional tools or digital tools can be both correct, it depends on the creator or designer.
- Digitization: Attention should not only be given to the whole form but also to the counter form, the readability of the typeface depends on it.
- Testing: Refining and correcting aspects of the typeface, prototyping is also part of the testing process and leads to important feedback.
- Deploy: Even after deploying a completed typeface, there are always teething problems that did not show during the prototyping and testing phases, hence, the task of revision does not end upon deployment.
Typeface construction and consideration: using grids can help when constructing a letterform, the purpose of height, width, and contrast applies when using a grid. Some letterforms are similar in shape and size, it helps when designing as it is able to use these construction parts in other letterforms. Visually, a circular form might look smaller beside a square form even they are in the same size, because of real estate, hence, visual correction is required. The distance between letters also need a visual correction. Letters must be altered to a uniform. Visual white space, meaning the white space between the letters should be the same, this is called fitting.
____________________________
INSTRUCTIONS
Exercise 1: Typographical System
This exercise is to use the 8 typographic systems (axial, modular, grid,
bilateral, radial, dilatational, transitional, and random) for student to
explore using the text and content given. The exercise task is to be done
using Adobe InDesign only. Size 200 x 200mm, in addition to black,
students can use one other colour. Graphical elements, such as line, dot,
etc, can be used limitedly.
For the 8 systems, I tried to understand a bit with how it works and
where I should place the text informations. The first system I did was
the axial system, I followed Mr. Vinod's demonstration for the first
design before playing around to find a different design.
Fig. 1.1 Axial system design #1 (29.09.2025)
After that I went ahead to play around a bit with the radial
system.
Fig. 1.2 Radial system design #2 (29.09.2025)
Then came the rest. I had difficulty in understanding the rest, aside
from the grid system, everything else was quite unclear for me. So I
took inspiration or lookout view on the past students' work and from the
internet to try and grasp how the systems work. In the end, it looked
good in my eyes, but I still do not know if it was following the system
of not.
Fig. 1.3 Transitional, Bilateral system design #1 (29.09.2025)
Fig. 1.4 Dilatational, Random system design #1 (29.09.2025)
Fig. 1.5 Grid, Modular system design #1 (29.09.2025)
After understanding more about the systems from the feedbacks we were
given, I adjusted and renew the layouts and made it to be clear and
precise for readability, and make it actually follow the different types
of systems. I looked back at my first designs and the past
students' work to see clearly what was right and what was wrong, by
finally understanding each others' work I input what I can grasp of the
different type of systems into my new designs.
I then sketched out the new designs on paper before inputting it into
InDesign.
|
| Fig. 1.6 Layout sketches (01.10.2025) |
The first one I tried to renew was the modular system. By finally
knowing how to use the system I quickly set up the guides and grids to
use for the design. I played around a bit and there and came up with two
final designs, in which I prefer the 3rd one as the final.
Then came the bilateral system, I tried to use as little graphics as
I can and end up with using dash lines to highlight the title. Then
the random system was the one I used up all my effort on,
understanding from previous students' works and from Mr. Vinod's
explanation on the methods that were used, I took in the knowledge I
could grasp and input it into the design. I was still unclear if I did
was on the right track or not, but it was quite fun in handling it and
placing as messily as I could.
|
| Fig. 1.9 Bilateral system design #2 (01.10.2025) |
 |
| Fig 1.10 Random system design #2 (01.10.2025) |
|
Then came the radial system. I fixed the dates information
into placing it line by line as Mr. Vinod requested, so as to
follow the system. I also played around with the text size to
make it seem more dynamic as well as abiding by the typography
rules of using 8 - 12px for the text information.
|
| Fig. 1.11 Radial system design #2 (01.10.2025) |
|
I then also fixed the grid system with the textual
information by not using the justify alignment, as rivers
were not to be used in any typography said by Mr.
Vinod.
|
| Fig. 1.12 Grid system design #2 (01.10.2025) |
Then I renew the axial system, looking back at my first attempt, I
saw what I did wrong and instead tried to restart over
again.
|
| Fig. 1.13 Axial system design #2 (01.10.2025) |
Then the transitional system. For this system, I had a hard time in
redesigning the first attempt into following the system correctly, and
then I scraped it and tried to star anew once again. instead of wiggly
bands I just placed them in a layered order and line by line for each
text information.
|
| Fig. 1.14 Transitional system design #2 (01.10.2025) |
Finally the dilatational design. This one was the hardest for me, with
two reasons being, circled text are hard to navigate, and that I got
hypnotized by looking at samples and inspirations to come up with
another hypnotizing design. For the title I played a bit with the size
and make it look like it was going into a spiral to make it more
dynamic, as for the text information, I did the same method and using
different sizes from 8 to 12 px.
|
| Fig. 1.15 Dilatational system design #2 (01.10.2025) |
FINAL OUTCOME: Exercise 1
Fig. 1.16 Final Transitional system design JPEG (01.10.2025)
Fig. 1.17 Final Dilatational system design JPEG (01.10.2025)
Fig. 1.18 Final Axial system design JPEG (01.10.2025)
Fig. 1.19 Final Grid system design JPEG (01.10.2025)
Fig. 1.20 Final Radial system design JPEG (01.10.2025)
Fig. 1.21 Final Random system design JPEG (01.10.2025)
Fig. 1.22 Final Bilateral system design JPEG (01.10.2025)
Fig. 1.23 Final Modular system design JPEG (01.10.2025)
Fig. 1.24 Final 8 system design JPEG (01.10.2025)
Fig. 1.25 Final 8 system design PDF (Without Grids) (01.10.2025)
Fig. 1.26 Final 8 system design PDF (With Grids) (01.10.2025)
Exercise 2: Part 1 - Finding Type (Type & Play)
First, I used an image of a mosque taken from Pinterest. It was a simple
focus and enough letterforms for me to find.
Fig. 2.1. Mosque image (05.10.2025)
After carefully analyzing, I've found these letterforms that can be
identified as "S, U, D, w, and j)
Fig. 2.2. First extraction trace (05.10.2025)
Fig. 2.3. Letterforms extractions (05.10.2025)
After that, I tried to find a suitable reference font that could feel like
it was serving the purpose of an Arabic font or writing, and came to find
this font on Google Font.
Fig. 2.4. My Soul reference font Google Font (05.10.2025)
Then I tried to sketch out the idea based on the mixture of the reference
and the original extraction for further refinement. I was quite happy on
how it turned out and went on ahead to refine it on Illustrator.
Fig. 2.5. Sketch (05.10.2025)
Fig. 2.6. Refinement (05.10.2025)
Fig. 2.7. Refinement and First Extraction side by side (05.10.2025)
Fig. 2.8. Compilation of first Extraction JPEG (05.10.2025)
After receiving feedback, I was told that it had too many motifs and that
it lacks consistency. So I took Mr. Vinod's suggestion on focusing on one
area of the dome instead. After carefully analyzing, these were the
letterforms that I could make out of it, "A, j, i, T, w, and N"
Fig. 2.9. Second Extraction trace (08.10.2025)
Fig. 2.10. Second Extractions Letterforms (08.10.2025)
Then I tried to find a formal and neat font instead of the previous
approach and found this one.
Fig. 2.11. Montserrat Alternates reference font Google Font (08.10.2025)
After that I tried to refine it on Illustrator.
Fig. 2.12. Refinement Process (08.10.2025)
After further refining, I had trouble with the letter N, and I was not
happy on how it was not working with the rest, I tried to follow various
styles and tried to follow the original extraction but only finding a loss
in it. I tried to follow with weight, height, and contrast just like how I
searched on, but it was still not working out.
Fig. 2.13. Refinement Process (08.10.2025)
So I discarded the letter N and went to work with the five letterforms
instead. It was a challenge but I couldn't finish it in the end.
Fig. 2.14. Refinement Process without N (14.10.2025)
After the refinement is done, I went ahead into making the poster. I used
a different image of a mosque, and used the ITC Garamond Std font for the
content text. I searched for the logos on Google and paste it on
Illustrator and made it white or light color instead for balance and
contrast.
Fig. 2.15.Poster process (17.10.2025)
FINAL OUTCOME: Exercise 2
Fig. 2.16. Image and trace JPEG (14.10.2025)
Fig. 2.17. Final Original Extraction JPEG (14.10.2025)
Fig. 2.18. Reference Font JPEG (14.10.2025)
Fig. 2.19. Final Refinement Process JPEG (14.10.2025)
Fig. 2.20. Final Refinement with grid JPEG (14.10.2025)
Fig. 2.21. Final Refinement JPEG (14.10.2025)
Fig. 2.22. Final Original and Final Refinement side by side JPEG
(14.10.2025)
Fig. 2.23. All Compilation Process Letterforms PDF (14.10.2025)
Fig. 2.23. Final Poster Design with Refined Letterforms JPEG
(17.10.2025)
Fig. 2.24. Final Poster Design with Refined Letterforms PDF
(17.10.2025)
____________________________
FEEDBACK
Week 1: Briefing
Week 2:
General Feedback: Limited amount of graphics, too much can
impede information. Good design entertains but does not overwhelm
the message, less is more. *Never outline text when it is
especially small. Avoid using vintage and drop shadow. Readability: too much contrast can impact readability.
Typography needs to initially stand out by itself without the use of graphics. Adding more to the text can limit freedom. Can cause distraction. Reduce distraction and focus on the important information. Do not place graphical elements in the corners as it creates tension and distraction from the information.
Modular - 6 rows, Cannot make it modular without a grid. Transitional- Allows flow and rhythm. Random system comes with chaos with a method, makes it readable but not easy to read, balance between chaos and method. Combine fine art to make readers to look longer. Radial cannot have more than one line. Dilatational cannot make every information into a circle, hard to read and focus, use 0.5 stroke width. Bilateral - avoid using 45 deg angle, static and not dynamic layout
Specific Feedback: Axial can be fixed with the graphic and axis line, overall ok. Bilateral, dilatational, transitional, random needs to be fixed and try again, graphics too much, placed weirdly, not random enough. Grid is ok with the highlighted, don’t use justify/rivers . Modular needs to try again and follow the correct system grid. Radial is enough with one graphic, place one line at a time.
Week 3:
General Feedback: follow the image by its main point,
maintain the original motifs in some aspects. Don’t retain so much
of the reference font. Observation in details is critical for
designer to produce refinement.
Specific Feedback: study again only on one section, too many motif in the upper part of the dome, giving too many and different motif in the final. Make sure the letterforms are aligned with the stroke width, height and contrast.
Week 4:
General Feedback: Strokes and width should be the same size. Space between title if it is small. Content of texts needs to be readable. Cultivate observational skill can give good creative and critical thinking. Set margins and grids first on any layout. Keep the letterforms steady, don’t make it extreme as it already is. When adding shadows, don’t strive it too far from the content text as it will affect the readability. Too much effect can spoil the lettering. When centering the lettering, it should be optically centered/aligned not mathematically.
Specific Feedback: Width/ thinness of the letterforms should be the same and stay consistent (W, J, & I), the baseline for all letterforms should stay the same. The dot of J & I should be slightly above.
____________________________
REFLECTION
Experience
For the first exercise, the main challenge I faced was understanding
how to use the different types of typographic system, although it
seemed easy in theory, using it on practical itself was quite
difficult, especially trying to be creative or finding another
original idea after observing others' previous works. My other
challenge was doing the random system. At first it seemed like I was
doing something, but it wasn't enough. It felt incomplete, including
all of the other systems as well, at first. Then after learning,
observing, and readjusting, it felt sufficient enough for me in the
end.
For the second exercise, my main focus at the time was about my
religion, I wasn't sure if I could get anything from some
architectures in the Middle East at first, then I came to realize, why
not the mosques' architectures. Doing the refinement process, it felt
quite peaceful and fun for me while thinking about it now. I was not
sure if this commitment was going to go downhill or whatever ways it
would lead me to. Surprisingly, after finishing all the work for this,
it did not feel that bad as I thought it would, and I was quite happy
with how everything turned out to be.
Observation
After countless of observations of others' works, I noticed a
pattern and a method into how the typographical systems work. It was
kind of an eye opener and comedic in a way. Although I have to give
credit where is due, some of the previous seniors' work actually
helped me motivate into finding some form of creativity, for both
the first and second exercises. Exemplary works were inspired from,
Lui Hsiao Hui, Cheong Pei Hoong, my friend Ng Jia Xuan, and Kim
Seoyoon.
Findings
While searching for an image of the mosque architecture in exercise
two, I came to find out that some mosques were built entirely
different than the rest. Some complex, some even more complex, so I
came to find something simple enough with carvings that is easily
readable for me to figure out the letterforms. It was quite
remarkable to see the different designs and motifs from all across
the world. Learning about the 8 typographical systems and its histories was
disparate. Although it was not my kind of taste in design, as it had
limits and I had to be put in a box and that made me feel a little
helpless, it was still a small thing I'm grateful for learning in
the end. In future cases, this would help me in becoming more
sensitive when looking at others or my own works. So this was not a
waste of time for me, it was never my intention to make it into a
waste. Thus it brings me more motivation into becoming a better
designer in the future.
____________________________
FURTHER READING
Fig. 3.1. Typographic Systems by Kimberly Elam
Fig. 3.2. Typographic Systems - Random System pg; 72
|
| Fig. 3.3. Typographic System - Modular System pg; 122 |
|
| Fig. 3.4. Typographic System - Modular system pg; 123 |
Comments
Post a Comment