ADVANCED TYPOGRAPHY (TASK 1): EXERCISES
–––
21/04/2025 - 21/05/2025 (Week 1 - Week 5)
Irdhina binti
Mazli Sham (0366894)
Advanced Typography - Bachelor of Design in
Creative Media - Taylors University
Task 1 Exercises
TABLE OF CONTENTS:
LECTURES
WEEK 1: TYPOGRAPHIC SYSTEMS
- "All design is based on a structural system" - Elam, 2007
- elements are dependent on communication [IMPORTANT] to function
- similar to shape grammars [architecture]
- unique set of rules that provide a sense of purpose – focus and directs decision making
- serves as a guideline (use appropriately)
EIGHT MAJOR VARIATIONS [infinite permutations]:
- Axial
- all elements organised to the left/right of a single axis
- axis not necessarily straight (can be bent)
- Radial
- all elements extended from a focal point (words written on radius)
- Dilatational
- all elements expand from a central point in a circular fashion (words written on circumference)
- can organise importance/hierarchy outside-in or inside-out
- Random
- all elements have no specific pattern/relationship
- Grid
- vertical and horizontal divisions
- Modular
- series of non-objective elements constructed in as a standardised unit
- unit are similar to columns with same width/height
- info can be moved around as long as it fits to one unit (like building blocks)
- Transitional
- informal system of layered banding
- information stored in different "bands" (think stylised wind, write info on the wind lines)
- Bilateral
- all text is arranged symmetrically on a single axis
|
| Fig. 1. Visual Notes on Typographic Systems [22/4/2025] |
WEEK 2: TYPOGRAPHIC COMPOSITION
- Arrangement of textile information
- Appealing but also engaging
- Some principles are more easily transferable
Design Composition
- Rule of Thirds: divided into 3 columns/rows
- place info on intersections points/lines
- better don't use for typographic systems
- Grid System
- known as Raster Systeme – derived from compositional structure of letter press printing
- now termed as the Swiss (Modernist) style of Typography
- infinite number of adaptations
- Environmental Grid
- based on exploration of an existing structure(s) (building, painting etc)
- extraction can be both curved and straight
- provides context to forms in the design (environment associated to the communicators)
- Form and Movement
- based on exploration of existing Grid systems
- explores the multitude of options the grid offer
- dispel seriousness around the grid system
WEEK 3: CONTEXT AND CREATIVITY
Handwriting
- first mechanically produced letterforms designed to mimic handwriting
- basis/standard (roots) for form, spacing and conventions to try and mimic
- influenced by tools and materials such as charcoal sticks, brushes etc (creates unique characteristics)
- also influenced by material the letterforms were written on (ie. palm leaf, animal skin etc)
|
|
|
- CUNEIFORM [c. 3000 BCE]
- earliest system of actual writing
- used in a number of languages
- form is a result of pressing the blunt end of a reed stylus into wet clay tablets
- HIEROGLYPHICS [2613 – 2160 BCE]
- Egyptian writing system fused with art of relief carving
- mixture of both rebus and phonetic characters
- used in three ways
- ideograms (literal depictions)
- determinatives (general idea of the word)
- phonograms (sounds that spell out individual words)
- EARLY GREEK [5TH C. BCE]
- built on the Egyptian logo-consonantal system
- 22 letters
- read in a format called boustrophedon (left to right, right to left)
- drawn freehand with no serifs
- strokes grew thicker, aperture lessened, serifs appeared in time
- used for inscriptions throughout the Greek empire
- model for formal writing in imperial Rome
- written with a flat brush, held at an angle
- ROMAN UNCIALS [4TH CE]
- more rounded – less strokes and written faster
- ENGLISH HALF UNCIALS [8TH CE]
- slanted and condensed
- English/Irish uncials evolved, writing on Europe devolved – needed a reformer
- came in the Carolingian Handwriting Reform
- CAROLINGIAN MINISCULE
- court school under direction of Alcuin of York
- book production increased and language was standardised under Emperor Charlemagne's patronage [8 C. CE]
- used for all legal/literary works to unify communication
- style became the pattern for Humanistic writing in the 15th century
- became the basis of lower-case roman type
- BLACK LETTER [12 – 15 C. CE]
- Gothic – originated with the Italians who referred to it as rude/barbaric cultures north of the Italian Alps
- tight spacing and condensed lettering with evenly spaced verticals
- reduced amount of costly materials in book production
- ITALIAN RENAISSANCE
- embrace of ancient Greek/Roman culture spurred a creative wave through Italian art/architecture/literature and letterform designs
- analysis of form applied to art/architecture was directed towards letterform
- resulted in a more perfect/rationalised letter
- MOVABLE TYPE [11 C. – 14 C.]
- printing on wood block practiced in China, Korea and Japan (earliest known printed book - AD 868 "Diamond Sutra")
- China attempted to use movable type for printing but failed due to number of characters and display material
- late 14 C., Korea established a foundry to cast movable type in bronze - allows dismantling and resetting
- created a new script Han'gul
Greek Influence on Rome but not Egyptian or Near Eastern Influence
on Greece. Why?
- 19th C. - out of style to credit Africa/Africans with anything of value
- Greece/Rome were more elevated over much older and influential civilisation compared to Ancient Egypt but also less extensive than Mesopotamia, Indus Valley, China etc
- ie. Indology - central person (Max Mueller) never actually visited India, instead viewing historical evidence through colonial lenses
- same goes for Classicism, Egyptology, Africanism, Orientalism
WEEK 4: DESIGNING TYPE
- social responsibility to improve legibility
- artistic expression
Frutiger [named after Adrian Frutiger who also made
Univers]
- san serif typeface
- designed in 1968
- used for the Charles de Gaulle International Airport, France
- Purpose: clean, distinct and legible typeface easily seen from near or far, functional
- Consideration/Limitations: need to be recognised in poor light conditions or when quickly passed
Verdana [made by Matthew Carter in 1996 for Microsoft]
- Purpose: extremely legible regardless of size partly due to popularity of the internet and electronic devices
- Consideration/Limitation: fonts exhibit characteristics derived from pixels, creating confusion commonly in lowercase i, j, and l
Bell Centennial [in honour of AT&T's 100th
anniversary]
- Purpose: used in telephone directories
- had to solve technical and visual problems related to Bell Gothic [existing phonebook typeface]
Johnston Sans [created in 1916 by Edward Johnston who made the
typeface "Underground"]
- bold simplicity that was truly modern yet rooted in tradition
- combined classical Roman proportions with humanist warmth
- Purpose: London's Underground railway posters and signage
- Consideration/Limitation: rooted in history and traditional calligraphy yet maintaining elegance and simplicity fitting the modern age
General Process of Type Design:
- Research
- history, anatomy, conventions
- purpose – what it is used for, different applications
- examine existing fonts for reference/inspiration
- Sketching
- traditional then scan for digitisation OR straight use digital
- note: straight digital might impede natural hand stroke movements
- Digitisation
- ie. Fontlab, Glyphs App
- use Adobe Illustrator to design/craft letterforms then use font apps [frowned by purists]
- Testing
- part of refining and correcting aspects of the typeface
- prototype included
- Deploy
- teething problems may occur but not be detected during testing
Typeface Construction:
- Roman Capital: grid consisting of square with a circle inside touching the line of the square in four places. within it is a rectangle the size of 3/4 square centred on the square
INSTRUCTIONS
TASK 1
TYPOGRAPHIC SYSTEM
CONTENT
Taylor’s University
All Ripped Up: Punk Influences on Design
or
The ABCs of Bauhaus Design Theory
or
Russian Constructivism and Graphic 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
SKETCHES
PROGRESS WORK
After understanding the lecture and finding inspiration through Pinterest
and previous works shown by Mr. Vinod, I tried coming up with a few
sketches as a test. However in the end, I relied more on experimentation
and ideas that came along through those experiments since I had trouble
imagining the text placement without the exact guides and measurements.
|
| Fig. 3. sketches of typographic system designs [23/4/2025] |
PROGRESS WORK
I decided to make a multiple attempts of some of the same
typographic system to get a better understanding of each one using
first-hand experience.
|
|
|
- AXIAL [FONT: Bodoni Std]
While axial was the most straightforward, its simple nature made
it hard for me to come up with an interesting
composition.
|
|
|
- RADIAL [FONT: Gill Sans Std]
Radial was a lot more experimental since I wanted to have a
good composition while still maintaining readability. I did four
designs with three of them just being the same elements moved
around. The remaining design was initially made for
random but I repurposed it since my friends told me
it looked too uniform/organised. While it was time consuming, I
had a lot of fun experimenting and creating shapes with
sentences.
|
|
|
|
|
|
- DILATATIONAL [FONT: ITC Garamond Std]
I wanted to go for an interlocking theme for transitional,
at least for the title. It slightly looked like a flower
before the addition of other contents.
|
|
|
- RANDOM [FONT: Bodoni Std]
For Random, I was not sure whether I could duplicate
the same content multiple times or how
overboard I could go so I decided to play it
safe. However, seeing classmates' works during
consultation as well as Mr. Vinod's feedback of
essentially go crazy, I redid the composition
which ended up being a lot more random than the
first.
|
|
|
|
|
|
- GRID [FONT: ITC Garamond Std]
Similar to Axial, I had a difficult time thinking of a
good composition for Grid but ultimately settled for one
that is good enough by my standards.
|
|
|
- MODULAR [FONT: Bodoni Std]
Modular was harder for me to understand to the point I
had to wait for consultation and redo the design I had
afterwards, which was more align to the understanding of
the modular system.
|
|
|
|
|
|
- TRANSITIONAL [FONT: Gill Sans Std]
Transitional was fun for me to design because I got to
play around with the type on path tool. I made some
minor adjustments after Mr. Vinod's feedback.
|
|
|
|
|
|
- BILATERAL [FONT: Futura Std]
I initially thought bilateral just meant that the
design has to be symmetrical but after Mr. Vinod's
feedback, turns out it was also supposed to be centred.
Thankfully, the design I had was already aligned with
its basic definition.
|
|
|
FINAL OUTCOME
FINAL COMPILATION:
|
|
|
WITHOUT GUIDELINES:
WITH GUIDELINES:
TYPE & PLAY
We were required to choose a photo (manmade/nature) and extract letters
from the patterns or textures present.
Initially, I chose paper strips/scraps as a subject to extract letters. I
extracted five lowercase but then extracted some uppercase letters since
the former would require more precision in terms of baseline, ascender,
descender etc.
|
| Fig. 18. photo of paper strips and scraps [2/5/2025] |
LETTERS EXTRACTED:
EXTRACTION:
I used the starting point from Clip Studio Paint as a reference for the actual extraction on Illustrator. I was told by my friends to directly trace the image including all the small details instead of going over them with one straight line since the latter could be considered exploration.
PROGRESS WORK
Image below shows a comparison between the reference typeface and my final design as well as the original extraction.
FINAL OUTCOME
|
| Fig. 19. letter extractions [2/5/2025] |
|
| Fig. 20. extracted letters – lowercase (g, a, q, t, c) [3/5/2025] |
|
| Fig. 21. letter extraction [3/5/2025] |
|
| Fig. 22. extracted letters – uppercase (E, A, T, V, C) [3/5/2025] |
INITIAL EXPLORATION:
|
| Fig. 23. overall exploration [3/5/2025] |
SKETCHES
After Mr. Vinod's feedback, I decided to straight redo the entire thing
using an entirely new image and object; rocks. I studied its jagged form
and how the cracks between the different surfaces interact to create a
satisfying visual.
CHOSEN PHOTO:
|
| Fig. 24. Photograph by Ingi Heraldss [11/5/2025] |
EXTRACTION:
This time, I started my letter extraction on Clip Studio Paint and
removed the hues from Heraldss' photo to easily see the shape/form. In
this phase, I simplified the rough edges to get a general shape of the
letterforms.
|
| Fig. 25. progress work (csp) [11/5/2025] |
I used the starting point from Clip Studio Paint as a reference for the actual extraction on Illustrator. I was told by my friends to directly trace the image including all the small details instead of going over them with one straight line since the latter could be considered exploration.
|
|
|
|
|
|
PROGRESS WORK
EXPLORATION:
I used the typeface
Danger Diabolik
as a rough reference for its solid shapes and comic-like aesthetic.
|
|
|
Since my reference image consists of rock formations from (presumably) a
mountain, I decided to incorporate the mountain part as well
as the cracks seen in rock structures into my typeface design as shown
from the third iteration before refining the details to achieve the final
result. [ORDER OF ITERATION TOP TO BOTTOM: 1–5]
|
|
|
Image below shows a comparison between the reference typeface and my final design as well as the original extraction.
|
|
|
|
|
|
FINAL POSTER:
For the poster, I chose a photo of a rock formation structure that
gives a contrast between light and dark as the background.
|
| Fig. 32. Photograph by Stephen Taftra [12/5/2025] |
I rearranged the letters to form HYUMA with the letter U in
the middle. I made the colours opposite of their respective backgrounds
to make the title pop more.
Furthermore, I added a gradient to H, Y, M and A to mimic
the lighter part of the background.
|
|
|
As for the various logos, I decided to rearrange and distort them
using shear tool according to the different angles of the rock
surfaces.
|
|
|
FINAL OUTCOME
LETTER EXTRACTION:
|
|
|
|
| Fig. 36. Letter shaping process [12/5/2025] |
|
| Fig. 37. Extracted letters [12/5/2025] |
|
| Fig. 38. Reference typeface (Danger Diabolik) [12/5/2025] |
|
|
|
MOVIE POSTER:
|
|
|
FEEDBACK
Week 1:
General Feedback: Briefed on Task 1 and learned the eight Typographic System.
Designs must have a balance (not too simple, not too crowded) and
good readability, can distort as long as it is readable and
relevant.
Week 2:
General Feedback:
While doing the typographic systems, be aware of the readability and
how graphics/placement increases or decreases it.
Specific Feedback:
Refine random system and redo the modular system. Modular can use
shapes instead of grids as long as it remains one singular "block"
that can be stacked together to create a "new" block.
Week 3:
General Feedback:
Mr. Vinod gave feedback to everyone's respective
designs.
Specific Feedback: Make the letters have a "folding" effect by using gaps and
thick/thin contrast to make them relate more to the original
photo (paper strips/scraps).
Week 4:
General Feedback: Have some interaction between title and background,
emphasis can be used to show hidden story element so be
careful when applying emphasis.
Specific Feedback: Good job, no problem.
REFLECTION
EXPERIENCE: The first task for Advanced Typography was a good
refresher on both InDesign and Illustrator, which was
very needed especially for the former since I did not
have the chance of touching the software for a while
before coming to this class. I enjoyed doing the
different kinds of compositions, especially the more
experimental ones like random, dilatational and radial.
As for the second part of task 1, it was quite similar
to another assignment from Design Basics back in
Foundation in Design but this time we were allowed to
choose online images rather than taking our own, which
was a relief for me. Overall, both tasks were enjoyable
despite the rushing deadlines and conflicting
schedules!
OBSERVATION: Mr. Vinod's feedback session of projecting
everyone's work and reviewing them right then and
there did help me with my design process even when it
was not my own feedback. Furthermore, analysing other
people's work, both classmates and outside artists did
help me determine whether my design was too "simple"
or too "complicated", not to mention feedback from
friends. I also learn that similar to other forms of
art, typography also takes time and patience to
achieve a good result in terms of composition and
overall design.
FINDINGS: At first glance, the typographic systems looked
complicated but once I got the hang of it, I
realised that I have been using them without knowing
even before learning Typography. From what I have
learned, they are a lot more similar to drawing
compositions, which made it easier for me to
understand each system.
FURTHER READING
|
|
|
For further reading, I read page 9 and 10 of Kimberly Elam's book
Typographic Systems regarding a circle and its role in composition, also
known as The Circle and the Composition. On page 9, it explains how a singular circle with a set size can guide
the eye and control the composition as shown below.
|
|
|
The series of compositions below further shows the role a simple element plays in changing a composition by just moving them around.
|
|
|
Comments
Post a Comment