TABLE OF CONTENTS
2. Instructions
All design is based on a structural system which is divided into eight major variations – axial, radial, dilatational, random, grid, modular, transitional, and bilateral – which have infinite permutations.
Typographical organization is complex because the elements depend on communication to function, while also considering hierarchy, order of reading, legibility, and contrast. These systems are like rules that focuses and directs decision making, serving as a framework that helps learners develop their intuition.
|
| Fig 1.1 Typographic System Variations |
Lecture 2 / Typographic Composition
Principles of Design Composition
We tend to generalize design composition into emphasis, isolation, repetition, symmetry, asymmetry, alignment, perspective, etc. However, these principles aren't easily translated into typographic layouts/composition as they're more relevant to imageries. But some of these principles are more transferable than others.
|
| Fig 1.2 Emphasis & Rule of Thirds in Typography |
Grid System
Out of the 8 typographic systems, the most commonly used one is the grid system (Raster Systeme), which is derived from the gridded structure of letterpress printing. This system is further enhanced into the Swiss (Modernist) style of typography by adding exciting and engaging elements to a seemingly rigid structure. Despite its rigid structure, its versatility and modular nature allows many adaptations, which makes it a popular choice.
|
| Fig 1.3 Grid System Guide |
Post-Modernist Typographic Sytem
As a reaction to the ordered approach of typography, a group of young designers challenged this notion, resulting in the post-modernist era of typographic systems, where chaos, randomness, and asymmetry were explored. Despite its random nature, there was still a method behind it – lots of planning and intuition were used for the arrangement of information. This popularized asymmetry, random, repetition, dilatational, and radial systems into a generation influenced by punk anti-establishment thought and music.
|
| Fig 1.4 Post-Modernist Typographic System Works |
Environmental Grid
This system is based on the exploration of existing structure(s) – paintings, architecture, interior, etc. – where crucial lines, whether straight or curved, are extracted and formed into a super structure. This super structure is a group of non-objective elements that create a unique mixture of texture and visual stimuli. This system provides context to the form of the chosen structure(s), because the information is arranged around the key features extracted from the environment.
|
| Fig 1.5 Environmental Grid Process |
Form and Movement
This system is based on the exploration of the grid system, mainly done
to dispel the seriousness of the grid system. By exploring other options
in the grid system, movement can be created through the placement of text,
images, and colors. Maintaining visual connections between pages is
important for continuous movement, and having variations between pages
help keep readers engaged as predictability becomes boring. In addition to
that, introducing new elements increase its complexity, thus it is better
to do so incrementally.
|
| Fig 1.6 Form and Movement Example |
Week 3
Lecture 3 / Context & Creativity
Handwriting
Handwriting is an important in the study of typography because the first mechanically produced letterforms were designed to imitate it. The shapes that were mimicked would differ by the used tools & materials – such as sharpened bones, charcoal sticks, plant stems, brushes, feather, and steel pens – as well as the writing surfaces – like clay, papyrus, palm leaf, animal skins, and paper.
|
| Fig 1.7 Evolution of the Latin Alphabet |
Cuneiform (3000 B.C.E.) - The earliest actual writing system which was used in multiple languages between the 34th century B.C.E. to the 1st century C.E. It's wedge form is a result of a reed stylus into wet clay tablets.
|
| Fig 1.8 Cuneiform |
Hieroglyphics (2613 - 2160 B.C.E.) - An Egyptian writing system which is fused with the art of relief carving. It uses a mix of rebus and phonetic characters – the first link to a future alphabetic system. Hieroglyphic images can be used in three different ways:
- Ideograms - Represent the thing things they actually depict.
- Determinatives - Represent that the signs are phonograms that indicates a general idea of the word.
- Phonograms - Represent sounds that 'spell out' individual words.
|
| Fig 1.9 Hieroglyphics |
Early Greek (5th C. B.C.E.) - Built on the Egyptian logo-consonantal system, The Phoenicians developed a phonetic alphabet consisting of 22 letters. The Greeks adapted the phonetic system by adding more vowels. Text was often written in boustrophedon – alternating left-to-right and right-to-left lines. Greek letters were written freehand and without serifs at first. Over time, strokes are thicker, apertures narrowed, and serifs developed.
|
| Fig 1.10 Phoenicia (Present Day Syria, Lebanon, and Israel) |
Roman Uncials (4th C.) - Lettering became rounder, and curved forms allowed faster writing with fewer strokes.
English Half-Uncials (8th C.) - In England, Roman uncials evolved into a more condensed, slanted-style.
Caroline Minuscule (8th C.) - Under Charlemagne, a standardized script was developed to improve literacy and record-keeping. This system introduced punctuations, word spacing, and the use of capitals at the start of sentences. This became the basis for Humanistic writing and lowercase roman type.
Blackletter (12th - 15th C.) - A dense, angular script that is characterized by vertical strokes,
tight spacing, and pointed arches. Its condensed form saves more space,
allowing material costs to be reduced in book production.
The Italian Renaissance (15th C.) - Inspired by the Carolingian script and the classical ideals of the Renaissance, Humanist scholars in Italy designed more balanced and rational letterforms. This led to the Antica letterform – a more rounded writing system.
Movable Type (11th - 14th C.) - Printing using wood blocks had been practiced in Asia, with the earliest known in the Diamond Sutra which contained the world's first printed illustration. China pioneered this innovation, but was unsuccessful due to the large number of characters and clay materials. Korea advanced this by using a foundry to cast movable type in bronze and developing the Hangul script (like phonetics).
|
| Fig 1.11 Major Writing Systems |
Evolution of Middle Eastern Alphabets - Although Phoenician letter used sound to represent letters, the script was possibly influenced by Egyptian Hieroglyphics and Hieratic Scripts.
|
| Fig 1.12 Evolution of Middle Eastern Alphabets |
Evolution of Chinese Script - The script evolved from oracle bone, seal script, clerical script, traditional and simplified script. The characters represents a word, not sounds.
Fig 1.13 Evolution of Chinese Script
Indus Valley Civilization Script (3500 - 2500 B.C.E) - The oldest writing found in the Indian subcontinent which is still undeciphered and seems to be logo-syllabic in nature.
Brahmi Script (450 - 350 B.C.E.) - The earliest writing system developed in India which is one of the most influential writing system that became the root of most modern South and Southeast Asian writing systems.
Pallava Script - The most important writing system in Southeast Asia. It is a South Indian script used to write Sanskrit and Tamil, which became the basis for writing systems across Southeast Asia. Another script known as the Pra-nagari, an early form of the Nagari Script was also used for writing Sanskrit.
Kawi Script - Indonesia's most important historical script which was based off Nagari, but indigenous to Java. Other prominent scripts spread throughout Indonesia include: Incung Script, Rejang Script, Batak Script, Bugis Script, and Javanese Script.
Jawi Script - An Arabic-based alphabet that was introduced alongside Islam through missionary traders.
Programmers and Type Design
For decades, Asia has neglected lots of its written heritage, and by adapting western printing technologies, it was harder to adapt the old text in printed form. With the development of computers and the increase of programmers, more vernacular and even multi-script typefaces are being produced.
Lecture 4 / Designing Type
Why Design More Typefaces?
According to Xavier Dupré (2007), there are to main reasons:
- Type design carries a social responsibility so one must continue to improve its legibility.
- Type design is a form of artistic expression.
Frutiger by Adrian Frutiger
A renowned 20th century Swiss designer who is considered responsible for the advancement of typography into digital typography. He designed the Frutiger typeface which was designed in 1968 for the Charles de Gaulle International Airport. The goal of this typeface was to create a clean, distinctive, and legible typeface that is easy to see both close up and far away. He also designed notable typefaces like Univers and Avenir.
Consideration/Limitations: The letterforms need to be recognized in poor light conditions and when readers move quickly past the sign. He tested with unfocused letters to see which letterforms could still be identified.
Verdana by Matthew Carter
The son of typographer Harry Carter designed Verdana in 1996 for Microsoft. This font was designed to be extremely legible on screens, even at small sizes. He also designed Bell Centennial, which was designed to solve ink-bleed issues by having ink traps.
Considerations/Limitations: Verdana has characteristics derived from the pixel rather than the pen, brush, or chisel. This caused confusion between characters like lowercase i, j, and l.
Fig 1.19 Verdana Font Display
Johnston Sans by Edward Johnston
The creator of an influential London "Underground" typeface known as Johnston Sans. It was designed for London's Underground railway posters and signage with "bold simplicity" in mind.
Consideration/Limitation: He wanted to unify the visual identity of advertising and signage in the railway system. He applied proportions of Roman capital letters to his typeface so that it stays rooted in history, but also incorporated elegance and simplicity that fitted the modern age.
Fig 1.20 Johnston Font Display
General Process of Type Design
- Research - Begin by understanding type history, type anatomy, type conventions, terminologies, side-bearing, metrics, hinting, etc. Then, continue by determining the type's purpose and what different applications it will be used in. Different fonts should also be examined to be used as reference.
- Sketching - This process can be done either traditionally (brushes, pens, ink, and paper) or digitally (drawing tablets). When using traditional methods, the natural movement of hand strokes are better reflected, while doing it digitally would be much quicker, persistent, and consistent.
- Digitization - Professional software such as Fontlab and Glyphs App are commonly used. Adobe Illustrator is also used to first to design the letterforms before importing into specialized font apps. Both form and counter form should be given special attention for better readability in this process.
- Testing - This process is done by prototyping, refining, and correcting aspects of the typeface. Depending on the typeface category, readability and legibility becomes an important consideration, except display types as expression of the form is prioritized.
- Deploy - Completed typefaces might have unexpected issues even after deployment, requiring further revision. Rigorous testing is important to minimize issues.
Typeface Construction
Roman Capital - Designers use grids which consists of a square, and inside it a circle that touches the four sides of the square. Within the squares is a rectangle in the center of the square, three quarters the size of the square. These grids with circular forms facilitate the construction of letterforms.
Construction and Considerations - Depending on the form and construction, the alphabets can be categorized into groups, and further distinction is made between a group for capitals and a group for lowercase letters.
Fig 1.22 Grouping of Alphabet Construction
Different forms and constructions should be taken account when designing a type. An important visual correction is the extrusion of curved and protruding forms past the baseline and cap line. This also applies to vertical alignment between curved and straight forms.
Fig 1.23 Curved Form Extruded Beyond the Cap Line
Visual correction is also needed for letter spacing. Placing letters with equal spacing is not a good design practice. A process called 'fitting' is done instead, where the spacing is altered to a uniform visual white space.
Context and Creativity
Typefaces emerge due to a need or demand. The motivation for this can be intrinsic and extrinsic.
- Intrinsic - Comes from the designer's personal drive – to create a desired form or to solve a problem.
- Extrinsic - Comes from commissions or assignments.
INSTRUCTIONS
The first exercise of this module was to create designs following the 8 typographic systems. This task was to be done in InDesign, and the text used in the design is as follows:
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
To start of this task, I first read the book, Typographic Systems by Kimberly Elam to help give me a better insight on how to tackle this exercise. This is documented in the further reading section. I then looked for resources to inspire my design direction, specifically about the Russian Constructivism movement and anything similar to the typographic systems.
|
| Fig 2.1 Research / Source: Pinterest / Week 1 (29/04/25) |
Initially, I wanted to sketch out my ideas, but because transferring the sketch into InDesign had text length inconsistencies, I decided to just start working in InDesign. I started by roughly laying out the text first and experiment with the placements.
Axial
For this system, I was pretty satisfied with my initial design.
However, I thought that there was more things I could do, so I
rotated the whole composition and changed the positioning of the
letters for a more interesting look.
Fonts Used: Futura STD - Bold, Bold Oblique, Heavy, Book
|
| Fig 2.2 Axial Designs / Week 1 (29/04/25) |
Radial
For this system, I wanted to further push the constructivist
look into my design. I decided to include a red streak to
highlight the title and surrounding it with supporting information. I first did a simpler design to
try out the system and worked on another one which I was
immediately satisfied with.
Fonts Used: Gill Sans STD - Extra Bold, Bold, Regular
|
| Fig 2.3 Radial Designs / Week 1 (29/04/25) |
Dilatational
For dilatational, I started with simpler singular circle
designs as a base, and moved on to more unique layouts. I tried
to do a vortex-like look but I was quite disappointed with the
results and made another one with text radiating around 2
circles, connecting the texts between both circles.
Fonts Used: Univers STD - Black, Bold, Roman
|
| Fig 2.4 Dilatational Designs / Week 1 (29/04/25) |
Random
Because constructivism is very structured design-wise, I don’t
want my design to be too influenced by it. I thought to do a
design like the text is falling over and everything is slanted,
but after trying some versions, I don't really like them. I
tried stacking multiple texts on top of each other which looked
interesting, but the information became illegible. So I worked
on something else which was not as random but still looked
appealing.
Fonts Used: All the 10 fonts
|
| Fig 2.5 Random Designs / Week 1 (29/04/25) |
Grid
Although this system is seemingly a simpler
one, I spent the most time on this system to figure out a
suitable grid system that allows for an interesting layout. I
tried made multiple designs that I scrapped, and these are the
designs that I found to be acceptable enough.
Fonts Used: Futura STD - Bold, Heavy, Medium, Book
|
| Fig 2.6 Grid Designs / Week 1 (29/04/25) |
Transitional
For transitional, I first did a simple design, and like the
random system, slowly made the texts fall over. I thought the
wavy text didn't look that great, so I tried a 'snake-like'
design instead, one with rotations and another with straight
lines and compact spacing.
Fonts Used: Futura STD - Bold, Heavy, Book
Gill Sans STD - Bold, Regular
|
| Fig 2.7 Transitional Designs / Week 1 (29/04/25) |
Modular
Like the grid system, I had an unusually hard time working on
these designs because I'm not sure how I can make the design
interesting. I did one with 6 main modules and I thought to have
another with a bold title with the rest of the information
placed in modules below.
Fonts Used: Futura STD - Bold, Heavy, Medium, Book
|
| Fig 2.8 Modular Designs / Week 1 (29/04/25) |
Bilateral
This system was pretty straightforward, I just played around
with the placements to get something that would work. I tried
adding visual elements to make it look interesting, but I was
afraid that it look similar with previous works, so I just left
it clean.
Fonts Used: Futura STD - Bold, Heavy, Book
|
| Fig 2.9 Bilateral Designs / Week 1 (29/04/25) |
Final Typographic Systems
|
|
Fig 2.10 Final Typographic Systems Compilation - JPG / Week 1 (29/04/25) |
|
| Fig 2.11 Final Axial System Compilation - JPG / Week 1 (29/04/25) |
|
| Fig 2.12 Final Radial System Compilation - JPG / Week 1 (29/04/25) |
|
| Fig 2.13 Final Dilatational System Compilation - JPG / Week 1 (29/04/25) |
|
| Fig 2.14 Final Random System Compilation - JPG / Week 1 (29/04/25) |
|
| Fig 2.15 Final Grid System Compilation - JPG / Week 1 (29/04/25) |
|
| Fig 2.16 Final Transitional System Compilation - JPG / Week 1 (29/04/25) |
|
| Fig 2.17 Final Modular System Compilation - JPG / Week 1 (29/04/25) |
|
| Fig 2.18 Final Bilateral System Compilation - JPG / Week 1 (29/04/25) |
Fig 2.20 Final Typographic Systems Compilation with Grids - PDF / Week 1 (29/04/25)
Task 1: Exercise 2 / Type & Play
Week 2 / Research & Digitization
For the second exercise, we were tasked to dissect pictures of nature or manmade objects for potential letterforms and turn it into a font consisting of at least 5 different letters. Afterwards, use the font to create a movie poster using the original image or things related to it.
At first, I wanted to either use images of a phenomenon called crown shyness or maps (street layouts, topography, etc.). As I was walking, I noticed some corrosion/oxidation on a bridge which I thought could have potential for a more interesting shape in the letterform design. I took a picture of it and settled with that as the base of my design.
|
|
Fig 2.21 Base Pictures - Crown Shyness, Map,
Bridge / Week 2 (06/05/25) |
I then proceeded to Photoshop to look for letters I can extract. To help me with this process, I reduced the saturation and adjusted the curves. With my theme, I thought a fitting 5-letter word could be "OXIDE". But since the letter "I" isn't too interesting shape-wise, I looked for "Y" to replace it into "OXYDE". Afterwards, I worked on Illustrator to get more detailed extraction of the shapes, with some adjustments from the original extraction.
|
| Fig 2.22 Letterform Extraction in Photoshop (Left) & Illustrator (Right) / Week 2 (06/05/25) |
I continued by arranging the extracted letterforms in its correct orientation. As I'm not sure which fonts would fit such a rough edges, I decided to go with an extra bold condensed Futura as my reference font. Then, I went back to Photoshop to distort the letterforms to follow the shape of Futura using the free transform and puppet warp tool.
|
| Fig 2.23 Extraction Distortion / Week 2 (06/05/25) |
Since I didn't really like the look of the rough edges, I decided to go with a more stylized look –making something that is more fluid and alien-like. To keep the design still faithful to the original extraction, I took note of some significant parts of the original extraction and implemented it in the final design with some exaggeration. This includes missing chunks, additional lines, weights variation, and protruding lumps. With that in mind, I worked on multiple sketches until I came up with a design I liked.
|
| Fig 2.24 Letterform Sketches / Week 2 (06/05/25) |
At first, I wanted to use the shape builder tool to finalize the font. However, due to how abstract the form is, it didn't really work out well after several attempts. So, I instead used the pen tool to work on the font.
|
| Fig 2.25 Final Letterform / Week 2 (06/05/25) |
Week 3 / Revision & Poster Design
Based on the feedback given by Mr. Vinod, my design wasn't a faithful representation of my source image. The smoothness doesn't reflect the rough and jagged qualities of the image. To solve this issue, I tried adding a textured outline and use the roughen distort to get rough edges.
|
| Fig 2.26 Revisions / Week 3 (07/05/25) |
I decided to stick with the second revision and did some minor tweaking to the points. With the finalized letterforms, I started working on the poster. With red already as my base color, I think I could go for an unsettling and grunge look for my poster. To make my the letterform pop more, I decided to have the background in black and white, while the text becomes red.
|
| Fig 2.27 Color & Curves Adjustments / Week 3 (13/05/25) |
After adjusting the colors and curves, I felt that the values were still off, so I added in some gradients around the text to create a vignette. I also added an outer glow effect on the text set to color burn blending mode so that the red could pop out more.
|
| Fig 2.28 Adding Shadows / Week 3 (13/05/25) |
I then added in some credit text and logos in red to make it look more like a movie poster. I used the Steel Tongs font for the text which automatically comes with the roles when typing lowercase letters. Because the text is quite bottom heavy, I also adjusted the placement of the title.
|
| Fig 2.29 Adding Text & Logos / Week 3 (13/05/25) |
Although it looked finished, I thought I could add some more effects to make it look more interesting up close. I added in a radial blur effect around the corners and added the noise filter for some grain textures. Overall, I think it enhanced the look of the poster.
|
| Fig 2.30 Final Adjustments / Week 3 (13/05/25) |
Final Exercise 2
|
| Fig 2.31 Image and Text Extraction / Week 4 (20/05/25) |
|
| Fig 2.32 Refining Process / Week 4 (20/05/25) |
|
| Fig 2.33 Extracted Letterforms (Baseline) / Week 4 (20/05/25) |
|
| Fig 2.34 Reference Font / Week 4 (20/05/25) |
|
| Fig 2.35 Final Letterform / Week 4 (20/05/25) |
|
| Fig 2.36 Original Extraction and Final Letterform Comparison / Week 4 (20/05/25) |
|
| Fig 2.38 Final Poster Design - JPG / Week 4 (20/05/25) |
Fig 2.39 Final Poster Design - PDF / Week 4
(20/05/25)
FEEDBACK
General Feedback: This week, we were briefed on the first exercise using the 8 typographic systems.
Week 2
General
Feedback:
- When rotating, don't make it too extreme like 45 degrees as it creates separation by cutting the page in half.
- In relation to that, don't split the page with two high contrast colors because it makes reading hard. Same goes for graphical elements too since a high contrast would not help guide the eye, thus creating a distraction instead of helping support the text.
Specific Feedback: The smoothness of the letterforms doesn't represent the image properly.
Specific Feedback: The results are already good.
I definitely did not expect to have such a hard time working on the typographic systems. I spent a days trying to figure out what layout works best, even tweaking my design weeks after the expected deadline. In comparison, I finished the type & play exercise in just a few hours. I guess I have a lot when it comes to creating layouts as I struggled with a similar topic in the first semester.
An observation I made was to make more observations before, during, and even after working. Providing myself with adequate references is an overall positive for my designs. This allows me to take in new perspectives on my design direction, avoid designs that are commonly made, and be more intentional with my choices.
Findings
I found that to be able to improve, I shouldn't focus on getting things right, but it's about taking risks and trusting my own judgement. I tend to ask for more feedback to be reassured in my decisions, but the feedbacks given should already give me a good picture on how I can improve. I should be confident in my decisions and take both good and bad decisions as a learning opportunity.
|
| Fig 3.1 Typographic Systems Book Cover |
I decided to read this book as it was recommended by Mr. Vinod to further understand the 8 typographic systems. I took this opportunity to collect more references and to get a better understanding of how to proceed with my design. There are lots of ways to display these systems, especially with the use of shapes, transparency, etc. However, I'm unsure how much graphical elements are allowed, so I ended up not using those. But overall, this book helped guide me while working on my task.
|
| Fig 3.2 Examples of Designs |
Finding Type: A Novel Typography Exercise
I also read the post written by Mr. Vinod on Kreatif Beats, to better familiarize myself with the upcoming exercise. He recommended to use images with strong and repetitive characteristics. Then continue by deconstructing the image to easily identify possible letterforms in the image. From there, use a reference typeface to help in the refining process of the letterforms.