ADV TYPOGRAPHY - Task 01: Typographic Systems / Type & Play
23/09/2024 - 21/10/2024 | Week 01 - Week 04
Koh Sher Wei | 0353816
Advanced Typography | Bachelor of Design in Creative Media
List of Contents:
Lectures :
Week 01 [ Typographic Systems ]
Typographic Systems
- Elements depend on communication to function.
- Additional Criteria: hierarchy, order of reading, legibility,
contrast
- Typographic is akin to "shape grammars" in architecture.
- The system has a set of rules
- Guides learners to explore their intuition.
Eight major Variations
- Axial (elements are organised in different groups)
|
| fig 1.1.1 example of axial system |
- Radial (elements are extended from a point of focus)
|
| fig 1.1.2 example of radial system |
- Dilatational (elements expand from a central point in circular
form)
|
| fig 1.1.3 example of dilatational system |
- Random (elements have no specific pattern of relationship *with a
method of chaos)
|
|
|
- Grid (elements are divided with vertical and horizontal
divisors)
|
|
|
- Transitional (layered/segregated banding)
|
|
|
- Modular (non objective elements constructed as standardised
units)
|
|
|
- Bilateral (elements are arranged symmetrically in a single
axis)
|
|
|
- By understanding different typographic systems, organisation can be
more fluid and creative instead of focusing primarily on standard grid
systems.
Week 02 [ Typographic Composition ]
Typographic Composition
- emphasis
- isolation
- repetition
- symmetry and asymmtery
- alignment
- perspective
Rule Of Thirds:
- a photographic guide to composition
- frame is divided into 3 columns and 3 rows.
- intersecting lines are used as guides for the points of interest
within the given space.
- not often used
|
|
|
Other models / Systems
Typographic Systems:
- 8 systems that have previously been covered
- most used system is grid system (or Raster System)
- structure of letter press printing
- further enhanced by the Swiss (Modernist) style of Typography
- grid system is very versatile
- but allows an infinite number of adaptations
|
|
fig 1.2.2 Grid system variations |
Environmental Grid
- an exploration of existing structure/ numerous structures
combined.
- by extracting lines (curved and straight) for formation
- taking key features of environment to communicate a message.
|
|
fig 1.2.3 example of Environmental Grid |
Form and Movement
- exploration of existing Grid systems.
- placement of a form on a page, over many pages to creates movement.
- care should be taken to ensure visual connections and surprises on
every page.
- to mimic the nature of a moving screen using frame by frame
spreads.
|
|
fig 1.2.4 example of Form and Movement |
|
|
fig 1.2.5 example of Form and Movement |
Week 03 [ Context and Creativity ]
Handwriting
- first mechanically produced letterforms were designed to
imitate handwriting.
- it is the basic and standard for form, spacing and conventions for
mechanical type.
- shape and line of hand drawn letterforms are influenced by tools
and materials used to make them.
- Cuneiform refers to the earliest system of writing, evolved from
pictograms between 34C. B.C.E.
- Hieroglyphics were when Egyptian writing systems fused with the art
of relief carving.
- Ideograms to represent depiction of things
- Determinatives to represent the meaning of phonograms and to indicate general idea of a word.
- Phonograms represent the sounds that "spell out" individual words.
- It is important to note that the evolution of handwriting is
respected and developed through published books by
typographers.
- With digital revolution, the west began to digitise many of the
historical writing creations.
|
|
fig 1.3.1 Evolution of the Latin Alphabet |
Programmers and Type Design
- vernacular scripts are being produced by software giants.
- "multi-script" typefaces are being produced to cater to situations
where matter is communicated in the vernacular script or vernacular
latin scripts.
|
|
|
Local Movement and Individuals
- In Malaysia, programming language needed to encode the different types
of vernacular writing was cracked by Muthu.
- This system is now used in mobile devices.
- Huruf, a local group of graphic designers have been digitising and
revitalising typefaces in Malaysia.
MIB (Instructions) :
Part 01 (Typographic Systems) :
Task
For this exercise, students are expected to produce a few compositions
for each typographic systems with research and exploration.
The content is as provided:
The Design School,
Taylor’s University
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
Reference/Research
I've searched up a few posters/designs of different typographic
systems, as well as the general design idea with the title "Russian
Constructivism".
|
|
fig 2.1.1 reference posters [W1_24/09/24] |
Russian Constructivism stems from the belief that art can be used to
express social revolution, as opposed to being a simple form of
personal expression. As such, the characteristics of Russian
Constructivism utilises traditional techniques, bold typography and
often painted in red, black, or with an occasional yellow tone. This
leads to dramatic effects that portrays the excitement and shock
factor that an artist aims to convey about their societal goals.
Although this specific art style is no longer intended for political
stances, it still holds its influence in advertising posters and book
covers.
|
|
fig 2.1.2 Example of "Russian Constructivism" poster
[W1_24/09/24] |
Axial System
|
|
fig 2.2 Axial System sketches [W1_27/09/24] |
For the left layout, I focused more on playing with the axis of the system.
I tried to see if rotating the title would give it more dynamic, thus making
overall layout seem less plain. Furthermore, it automatically brings our
attention to the lecture information due to the way it is slanted
downwards.
As for the layout on the right, I kept the axis as a straight vertical
line. Instead, I utilised the colour and wording placements to make it more
interesting.
Radial System
|
|
|
For radial, I struggled with the overall layout composition as I'm not
used to placing words/phrases in multiple angles. It was also difficult to
line the information to a point of interest, so I used graphics as a guide
to help figure out the general composition.
Dilatational System
|
|
fig 2.4 Dilatational System [W1_27/09/24] |
The title for this system is done using two identical circles,
positioning the texts to align with one another to make a nice curve that
runs along the page. With the remaining spaces, I used smaller circles to
compose any additional information is a stair-like manner so that the
composition looks more dimensional.
Random System
|
|
|
The random system is pretty much random, as per its name. I did try
to compose the arrangement with some minor rules, to create an
"organised mess". Just as any other layouts and systems, I made sure
that the main focus is the title, by making the font size
significantly larger than the rest. Furthermore, I made sure to group
the lecture information together, having them placed in only one area
of the page. Other texts were used to fill in any spaces.
Grid System
|
|
fig 2.6 Grid System sketches [W1_27/09/24] |
I used a 4x3 grid and split the textual information
neatly.
Transitional System
|
|
fig 2.7 Transitional System [W1_27/09/24] |
Modular System
|
|
|
Bilateral System
.jpg)
|
|
|
Final Outcome
.jpg)
|
|
fig 3.1 Axial System Final
[W2_01/10/24] |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.jpg)
|
|
|
|
|
|
|
fig 3.9.1 Final System Outcome (PDF) [W2_01/10/24] |
| fig 3.9.2 Final System Outcome w Grid (PDF) [W2_01/10/24] |
Part 02 (Type and Play) :
Task
For part 02, we need to find a photo of an object, structure or nature.
(note: photo must only include single element.) Then, we will need to
identify letterforms from the shapes or textures of our chosen image. The
extracted letterforms are to be explored, digitised and reformed into
proper forms, without losing its original features.
Letterform extraction
|
|
|
I browsed through multiple photos, and ultimately decided on using corals
as my object of focus. I chose this specific photo because it includes
very prominent lines and texture of the coral, which makes it good to
extract letterforms.
|
|
fig 4.1.2 Letter extraction [W3_07/10/24] |
|
|
fig 4.2 Letterform extraction by itself [W3_07/10/24] |
I've managed to find a few letters, but I decided to only take the word "CAGE" for digitisation and reformation.
Refinement Process
|
|
fig 4.3 letterform adjustment [W3_07/10/24] |
Before constructing the type face, I stretched out the extracted
letterform to make them look more eligible and give it a proper form to
make analysing easier. I didn't change much or letter "C" or "G" but I
did have to distort and reform letters "A", and "E".
|
|
fig 4.5 Letterform development [W3_07/10/24] |
|
|
fig 4.4 Reference Font [W3_07/10/24] |
The reference font that I used is "ITC Garamond Std (Ultra Narrow)",
which has rounded edges with bubbly features. It was the perfect font to
base off of due to the slightly curvy features of my letterform
extraction.
Firstly, I placed (fig 4.3) on the reference font and stretched the
letters out to fit the type face. I tried to do it in a way that retains
the original shape while having consistent lettering features. However,
some of the edges ended up being too pointy which took away from the
original form of corals. So, I refined the letters a little by rounding
the edges, to make the curves less messy.
For the final version, Mr. Vinod told me that I should try to incorporate
the overlapping features of the coral into my letterform. I expressed this
by using the "knife tool" in illustrator to make cuts in the letters, then
warped the space between the cuts to make it look like an
overlap.
Final Outcome 01
 |
| fig 4.5 Image and Extraction [W3_07/10/24] |
 | |
|
 | |
|
|
|
|
Poster Design
Once we've completed our letterform, we need to find a photo of our
chosen object (or use the original chosen photo) to display our final
letterform. The idea is to present a symbiotic relationship between the
letterforms with the image, in a 1024px x1024px sized poster
layout.
|
|
|
.jpeg)
|
|
fig 5.2 Selected image [W3_07/10/24] |
Ultimately, I decided on this image as it is simple and does not
contain too many details/distracting elements. It is also similar to the
original photo I used for my letterform extraction.
Adjustments
Before using the photo, I did some adjustments on Adobe photoshop to
correct the colour and saturation.
|
|
fig 5.3.1 Selected image in PS [W3_07/10/24] |
|
|
fig 5.3.2 Image with adjustments [W3_07/10/24] |
Poster Development
|
|
|
|
|
fig 5.4.2 Poster Layout with coloured letterform
[W3_07/10/24] |
When I placed the letterforms onto the image, I just resized it and
changed the colour of the letterform to fit the vibe of the image. I
didn't like it as a final design because it just felt too plain and barely
connects to the image.
Instead, I added some darker colours within the letterform itself to act
as shading so that it replicates the overlapping feature of the corals. It
was a good idea as I think it enhanced the letterform.
|
|
fig 5.5 Poster with added effects (JPEG) [W3_07/10/24] |
Poster Development
According to Mr.Vinod's feedback about the proper text arrangement of
movie posters, I re-did the caption of my poster while referencing
real poster designs.
|
|
|
Feedback:
Week 02
General Feedback:
- Axial System should only be rotated around 20/30 degrees, don't go
over.
- Dilatational System should not be too messy.
Specific Feedback:
- Graphical elements are supposed to enhance the information, not take
away from them.
- Keep graphical elements limited
- Don't leave too much blank space.
- Modular system should have specific areas within the grid, the
separation should be obvious.
Week 03
General Feedback:
- Structure of the typeface should include the entire part of our
intended photo
- Text extraction should be focused on the immediate object to show
its features.
- There is lack of observation of our objects and
characteristics.
Specific Feedback:
- It is mimicking the image well.
- Have to make sure that the forms of the structure of letterforms are
comparable.
- Try to include the overlapping feature of the corals in your
letterform.
Week 04
Specific Feedback:
- Would be better to use Sans Serif font for the
typography.
- Should include logos.
- Take a look at some examples of Poster layouts and texts to
better understand.
Reflection:
Experiences
Part 01 of this exercise helped me understand the different typographic
systems better, which also made me realise why I usually struggle with
typography layouts. I tried very hard to only focus on the systems without
using graphics, which I found a little difficult as it felt so plain and
simple. It definitely gave me a push to explore the proper ways of doing
layouts without graphic distractions.
As for part 02, I really enjoyed being able to create letterforms from an
image. I don't think I struggled too much with this exercise so it was
mostly fun. It allowed me to be creative and explore typography with a
design twist.
Observations
So far from week 01 to week 03, classes are still manageable and lectures
are easy to understand. I appreciate that there is a dedicated time in
class where Mr. Vinod provides feedback to all of us. It allows me to
learn from mistakes, problems and good examples of other
students.
Findings
Overall, I think learning about the different typographic systems is very
beneficial for our future design process. It simplifies the structure of a
design. Having part 01 and part 02 in the same task is definitely a good
balance between having to follow system and layout rules while being able
to explore different ideations.
Further Reading:
|
|
|
- Grids provide structure and order to design, which allows visual organisation of elements harmoniously.
- Ensures consistency across layouts.
- Maintains alignment and uniformity throughout a design, making it more legible and user-friendly.
- Establishes a clear visual hierarchy by guiding the line of sight, enhancing communication efficiency.
- Grids are used in various design formats; print, web, user interface and more.
- Mastering the grid system is critical for creating visually coherent and effective layouts.
