ADVANCED TYPOGRAPHY - TASK 1: EXERCISES

21.04.25 - 9.05.25 (Week 1 - Week 3)
Michelle (0373843)
Advanced Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University
Task 1: Exercises - Typographic Systems, Type & Play

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Process Work

3.1 Exercise 1: Typographic Systems

3.2 Exercise 2 : Type & Play

4. Feedback

5. Reflections

6. Further reading

LECTURES

Week 1

Typographic System

All design is based on a structure. Typographic systems are frameworks (in organizing visual elements) to be used alongside exploration and intuition in design. It's primary objective is communication.

The 8 Major Typographic System variations according to Kimberly Elam:
(each with infinite permutations)

Axial, elements organized in the opposite sides of a single axis. Variations: bending axis.
Radial, elements extend, pointing towards central focus. Variations: several central points.
Dilatational, elements extend from central point in a circular manner (rings).
Random, elements without specific pattern or relationship, allows creative expression in chaos.
Grid, elements structured with horizontal and vertical divisions.
Modular, elements put in standardized units that can be rearranged within a layout. Variations: multiple standardized units sizes.
Transitional, elements placed in layered bands.
Bilateral, elements set symmetrically in an axis. Variations: tilted axis.

Typography forms words, texts, and pages into art.

Week 2

Typographic Composition : arrangement of textual information

Design Principles - ambiguous for typography, more suitable for visual imagery.
Rule of Third - 3x3 photographic composition.
8 Typographic Systems.
Environmental Grid - exploration on an existing structure/numerous structured combined.
Form & Movement - exploration on existing grid systems.

Week 3

Context & Creativity

Handwriting laid the foundation for form, spacing, and conventions in mechanical type.
Tools (e.g. sharpened bones, charcoal, pens) & materials (including writing surface, e.g. clay, wood, papyrus) influenced the shape and line of hand-drawn letter forms.
Latin Alphabet (1750 BCE): evolve from proto-Sinaitic letter forms and hieroglyphics to a sound-based writing system in Phoenicia.
Cuneiform (earliest writing systems - 34th century BCE): wedge-shaped marks on clay.
Hieroglyphics (2613 and 2160 BCE): combined ideograms and phonetic characters.
Greek Alphabet: introduced vowels, initially written in capital letters without fixed reading direction.
Carolingian Minuscule (8th century): the standardization of writing through the Carolingian minuscule - basis for modern lowercase letters.
Movable Type and Printing (11th century): pioneered in China (Chinese characters) and later successfully implemented in Korea (Korean Hangul).
Cultural Influences and Misunderstandings: The historical contributions of civilizations like Egypt and Mesopotamia are often overlooked in Western narratives, led to a skewed understanding of historical developments in writing and typography.
Eastern Developments in Handwriting: from Phoenician to modern Arabic scripts, shows the interconnectedness of writing systems and their influences.
Indus Valley Civilization (IVC) script (3500-2000 BCE): remains undeciphered but is believed to have a logo-symbolic nature.
Brahmi Script (450-350 BCE): the parent script of many Indian scripts.
Cross Cultural Exchange: development of various scripts across the Indian subcontinent and Southeast Asia.
Indian scripts, particularly the Pallava script, were foundational in developing writing systems across Southeast Asia.
Kawi Script: from the Nagari script, indigenous to Java, used for communication between kingdoms, played a significant role in the writing of Malay languages.
Modern Developments: Programmers and designers are trying to create multi-script typefaces which incorporate both vernacular and Latin scripts, reflecting a growing awareness of the importance of preserving local languages and scripts.
Creativity & Originality: Young designers are encouraged to explore their cultural histories and develop original works that reflect their heritage rather than appropriating Western styles. This approach fosters creativity and ensures the preservation of local identities in design.

Week 4

Responsibility in Design

Designers needs to improve legibility and express artistic vision to solve problems through their work.

Notable Type Designers

Adrian Frutiger (20th century): created Frutiger typeface for Charles de Gaulle Airport, focusing on legibility from various distances.

Matthew Carter: designed Verdana and Georgia to be legible on screens.

Edward Johnston: invent London Underground typeface, emphasizing bold simplicity and modernity while rooted in tradition.

Design Process

Research, understanding history, anatomy, and conventions.
Sketch, digital/traditional.
Digitization, professional software, e.g. FontLab & Glyphs.
Testing, refine.

Motivation in Design

Intrinsicz: personal drive.
Extrinsicz: commissioned or tasked

INSTRUCTIONS

PROCESS WORK

Exercise 1: Typographic Systems

I chose "Russian Constructivism and Graphic Design" as my headline.

From doing brief research, I noticed that Russian Constructivism is dominantly associated with primary colors. Most often used is red, black and white. Sometimes, yellow and blue.

After consideration, I decided to go with yellow as my accent color to challenge myself with not using the most common color. Yellow often represents intellect, which suits the definition of constructivism.

Constructivism = active learning, not passive absorption.

Axial

With axial system, I tried to do variations by using tilted and bent lines.

Figure 1.1 Axial system, Week 1 (29/04/25)

Figure 1.2 Axial System Attempts with Guides, Week 1 (29/04/25)

The 3 layouts above from left to right uses: tilted line with 45° angle; line with one bent point; line with 2 bent points.

Figure 1.3 Axial System Attempts with Accent Color, Week 1 (29/04/25)

After coming out with the layouts, I applied the accent color to help bring more interest. For the element, I only use line, since it ties in with the "axial" theme.

After feedbacks from Sir Vinod in class, turns out I did the thing which needs to be avoided (45° angle). In addition, the axis seems to be hard to be noticed in the bent variations I tried to make. So, I come up with something new.

Figure 1.4 Axial System New, Week 2 (30/04/25)

I tried to keep it simple this time, since I might overcomplicate it in my previous designs.

Radial

For radial system, I categorized the information into different sections: title; who & time; place.

Figure 2.1 Radial System, Week 1 (29/04/25)

The element I used in hopes to improve the layout is circles/2 large dots to indicate the center points of the radial shapes. I also added 2 lines at the corners to resemble a border, making the layout feel more whole.

Figure 2.2 Radial System with Accent Color, Week 1 (29/04/25)

Dilatational

In dilatational system, just like what I did for radial, I also distribute the information into groups: title surrounded with location and details; who & time divided by day.

Figure 3.1 Dilatational System, Week 1 (29/04/25)

Then, I added curved lines to further indicate the rings/bands. It also helps in categorizing the texts.

Figure 3.2 Dilatational System with Accent Color, Week 1 (29/04/25)

In the feedback session, turns out my composition seems a bit odd and unbalanced. Therefore, I made minor adjustments.

Figure 3.2 Dilatational System Adjusted, Week 2 (30/04/25)

Random

For random, since it has no fixed structure in the layout, I added system by using fonts in the same typeface. In addition, I also kept the tilt radius the same at +15°/-15°.

Figure 4.1 Random System, Week 1 (29/04/25)

I arranged a messier layout after I found out that my design was not random enough. I forced my brain to get out of the template, since I'm very used to designing in structure, following the usual principles in typography. But in this case, there's essentially no principles.

Figure 4.2 Random System New, Week 2 (30/04/25)

Grid

I did my layout on a 4x4 grid since it gives many divisions without making the space to small for text. It also allows me to give white spaces to my layout, to separate my texts.

Figure 5 Grid System, Week 1 (29/04/25)

Since grids used both vertical and horizontal lines, I utilized it in my texts orientation.

Modular

Since the modular system lays in standardized units, I did my best to find fonts which will fill the units to the fullest without passing it. I repeated the text "Russian" since it being alone doesn't quite form a shape close the the units.

Figure 6.1 Modular System, Week 1 (29/04/25)

Figure 6.2 Modular System with Accent Color, Week 1 (29/04/25)

Transitional

For me, transitional system feels slightly similar to dilatational system. However, instead of using solely circular bands, we can create the shape of the bands more freely. My shape below is somewhat inspired by Yin Yang, by dividing the composition into 2 space equally.

Figure 7.1 Transitional System, Week 1 (29/04/25)

Figure 7.2 Transitional System with Accent Color, Week 1 (29/04/25)

In week 2, I decrease the sharpness of my bent, and arranged the body texts to be more flowy.

Figure 7.2 Transitional System New, Week 2 (30/04/25)

Bilateral

Lastly, for the symmetrical system, I attempted a very simple arrangement. Although this might seem plain compared to the others, I liked the simplicity of both the shape, and way to read.

Figure 8 Bilateral System, Week 1 (29/04/25)

Final Outcome

Figure 9.1 Final Axial System (JPEG), Week 2 (30/04/25)

Figure 9.2 Final Radial System (JPEG), Week 1 (29/04/25)

Figure 9.3 Final Dilatational System (JPEG), Week 2 (30/04/25)

Figure 9.4 Final Random System (JPEG), Week 2 (30/04/25)

Figure 9.5 Final Grid System (JPEG), Week 1 (29/04/25)

Figure 9.6 Final Modular System (JPEG), Week 1 (29/04/25)

Figure 9.7 Final Transitional System (JPEG), Week 2 (30/04/25)

Figure 9.8 Final Bilateral System (JPEG), Week 1 (29/04/25)

Figure 9.9 Final Typographic Systems (PDF), Week 1 (29/04/25)

Figure 9.10 Final Typographic Systems with Grids (PDF), Week 1 (29/04/25)

Exercise 2: Type & Play

For exercise two, we are instructed to find image of anything that is consistent with slight variations. When I try to find my image, I try to think of things with repetitions, and something that I haven't seen been done for this exercise. Then, fingerprint came to my mind. So I started to browse in Pinterest, to find images of fingerprints which I could notice the figure of alphabet letters inside.

Figure 10.1 First Reference Image - Fingerprint, Week 2 (06/05/25)
Source: Pinterest

I traced the letters I recognized from the image, then I colored it yellow to highlight it.

Figure 10.2 Dissection 1 - Fingerprint, Week 2 (06/05/25)

I aligned the traced letters together, then I find a reference font which I thought suit the vibe of the letters I've extracted. After some time scrolling the many typefaces I had, I decided to use Juice ITC. I altered the letters a couple times to look more uniform following my reference font as a guide.

Figure 10.3 Fingerprint Font First Attempt, Week 2 (06/05/25)

However, I wasn't satisfied with my result since it doesn't really scream out 'fingerprint'. It only portray the unpredictable trait of fingerprint. As expected, Sir Vinod also think my design does not represent 'fingerprint'. He suggested me to look at the overall pattern of repeated lines, rather than focusing on single lines. So, I start over, changing my approach.

Figure 10.4 Second Fingerprint Analysis 1, Week 3 (07/05/25)
Source: Pinterest

I changed my reference image to gain a fresh imagery and POV. Now, rather than trying to find letterforms in the individual lines, I fused a couple of lines together, seeing their flow to form the letters.

Figure 10.5 Dissection 2 - Fingerprint Week 3 (07/05/25)

After I dissect the letters from the fingerprint, I thought that it still isn't 'fingerprint' enough. I looked more like stripes pattern (e.g. zebra). So, I tried another way.

Figure 10.6 Second Fingerprint Analysis 2, Week 3 (07/05/25)

I attempted to widen my POV even more, from single to a couple lines, now to a full group of lines in a fingerprint. I simplified the shape of fingerprints in general to only capture its essence: repeated circular lines.

Figure 10.6 Circular Pattern Letterform, Week 3 (07/05/25)

I choose Bodoni Std in Roman as my reference font. Then I integrated the circular pattern of fingerprints to form the letters. I started to see the resemblance of fingerprint in my letter form which is a sign I'm moving forward. Even so, I figure that now the design lacks variety (the abstract trait of fingerprint). Now, people might still mistake it for optical illusion or target board. Therefore, I go on to improve it.

Figure 10.7 Second Fingerprint Analysis 3, Week 3 (11/05/25)

I explored using dashed lines with different gaps, lengths, and end-caps (straight/circular). I do my best to alternate the lengths of the dashes so the gaps are random and spread out.

Figure 10.8 Circular Pattern with Dashes Letterform, Week 3 (11/05/25)

Now, I can sense the unique nature of fingerprint radiated better from the letters.

Figure 10.9 Fingerprint Attempt 2 Recap, Week 3 (11/05/25)

After I'm happy enough with the evolved and refined letters, I started to work on my poster. I begin by looking through free-stock-photos-website: Pexels. From the beginning of this exercise when I decided to do fingerprints, I've visioned the concept of making a poster about trace: a mark/indication of an existence. That's why I chose the letters t, r, a, c, e, s and selected the image below (a hazy handprint left on glass surface).

Figure 10.10 Poster Image, Week 3 (13/05/25)
Source: Darya Grey_Owl on Pexels

I searched for quotes about traces for my sub-title, and found one from pinterest. However, I only use a part of it to fit the theme of mystery/investigation rather than it being a bright motivation.

I looked at movie posters as reference to build my poster. I mainly followed an image guide and a joker poster.

I also sourced the production houses and companies online: MD Pictures; Warner Bros; IMAX; Dolby.

Figure 10.11 Poster Design, Week 3 (13/05/25)

Final Outcome

Figure 12.1 Image & Extraction, Week 3 (13/05/25)

Figure 12.2 Overall Process, Week 3 (13/05/25)

Figure 12.3 Extracted Letterforms, Week 3 (13/05/25)

Figure 12.4 Reference Font, Week 3 (13/05/25)

Figure 12.5 Final Letterform, Week 3 (13/05/25)

Figure 12.6 Original Extraction (top) & Final Letterform (bottom) comparison, Week 3 (13/05/25)

Figure 12.7 Type & Play Letterform Compilation (PDF), Week 3 (13/05/25)

Figure 12.8 Final Poster (JPEG), Week 3 (13/05/25)

Figure 12.9 Final Poster (PDF), Week 3 (13/05/25)

FEEDBACK

Week 1

General: MIB & rules briefing, watch lecture 1 & in design tutorial. We're encouraged to take notes and refresh our memories on Typography.

Week 2

General:

The main focus of design is the content (core element). The structure & organization of content comes first before other design elements.

Specific:

Axial: Never do 45 angles. Redo.
Radial: Okay.
Dilatational: Weird & imbalanced.
Grid: Acceptable, but make content aligned to the columns. Fix.
Random: Not random enough. Redo.
Modular: Okay.
Transitional: Title can keep. Body text needs to be arranged better, confusing to read. Redo.
Bilateral: Okay.

Week 3

General Feedback:

Make sure letterforms still connect to the reference image, and the reference is recognizable. However, apply the characteristic repetitively. Make sure thickness is consistent and uniform.
Enemy of letterform: A point that never ends. Cut the point, make an end.
In creating vectors, the more points, the harder it is to alter. So use less points. Delete unnecessary points by holding shift to avoid deformation in AI.
AI tutorials: compound path, spirals, stroke modulations.
Do research before making the poster. Try to integrate title with the image.
Fast paced schedule is needed for future assignments which needed lots of brainpower discipline.

Specific Feedback:
Mistake: only using on one line. I should include more lines. Rather than focusing on the forms, focus on the overall pattern (repetition of lines), could be thick or thin.

Week 4

General Feedback:

Use colors that reflect the background image to create relatability.
Make sure the title interacts with the background so it doesn't seem separate.
Include imagination in placing the title to suit the meaning/theme of the word.
Ensure readibility and legitibility of the texts in poster as it is not only for decoration.
Be careful, because sometimes students get too immersed in doing work, that we forget the main objective of the task.
Don't forget to stay within the margin set at the beginning of designing.

Specific Feedback:

Good job.

REFLECTION

Experience

In exercise 1, I had fun trying to come up with different designs, exploring the possibilities of the system to create unique yet structured product. Although it can get a bit stressful trying to come up with ways to implement the systems our own way. Especially after seeing great references, it could feel impossible sometimes. But by just doing it, trying to place things, rotate, tilt, and so on, it sparks excitement.

As for the second exercise, I also quite enjoyed it. There's a lot of freedom given for us to do what we want/interested in. I really liked the concept of the task given. In practice, it encourages me to analyze 'the thing that makes it the thing' or the identity/characteristic of something, how to simplify/add to it, and how to apply and represent it accurately.

Observation

In doing the first exercise, I realized that I get very immersed in creating the layouts. I liked the idea of trying to do something as the principals, but uniquely and differently than others. So I was mostly focused on the layouts, and only concern about the colors and elements last.

While doing the second exercise, I noticed that different objects/subjects might require different approach from various POV to be analyzed.

Findings

Exercise 1 really gets me to get more familiar with InDesign. I noticed that the time I spent for each design decreases as I went on. From starting by having to check on notes, lectures, and outside source, till I can explore and solve on my own.

After doing exercise 2, I realized that sometimes, I just need to start and follow the flow. It's usually hard for me to do so as I like to have clear plan before starting. But in the beginning of exercise 2, I was quite confused on what to do, so I ended up only doing what comes to mind, even though I already predict it won't be good enough. I guess doing is better that not doing. And by starting, often times ideas and thought pops up naturally as we do the task.

Search This Blog

Michelle (0373843)