Advanced Typography | Task 3: Type Exploration & Application

04/06/25 - 02/07/25 [ Week 8 - Week 12 ]

Nicco Chew Jin Xun (0366563)

Advanced Typography | Bachelor of Design (Hons) In Creative Media | Taylor's University

Tutor: Mr. Vinod


Table of contents

Task 3: [ Type Exploration & Application ] (30%)


Instructions


Task 3 / Type Exploration & Application


Task 3 - Type Exploration & Application ( 30% )
- We were required to create a font based on three options below:

1. Create a font that is intended to solve a larger problem / meant to be part of a solution in the area of your interest be it graphic design, animation, new media / entertainment design / any other related area not necessarily reflecting your specialisation. End result: a complete generated font (.ttf) with applications.

2. Explore the use of an existing letterform in an area of interest, understand its existing relationship, identify areas that could be improved upon, explore possible solutions / combinations that add value to the existing letterform / lettering. End result: a complete generated font (.ttf) with applications.

3. Experiment. For your idea to qualify as an experiment it must be novel & unique — working with material that might be 3-dimensional, digitally augmented, edible, unusual, typographic music video / fine art. End result: defined by student.


From the options given, we then have to present three ideas / concepts within a proposal.
I have four ideas in my proposal slides which were:

IDEA #1 
Expansion of my own font created during Typography Task 3 - Monotrix.
IDEA #2
Constructs fonts from the buildings of Damascus for the use of architecture exhibition.
IDEA #3
Creating a font for the use of architecture exhibition inspired by the TechGrid typeface.
IDEA #4
Creating a modular, geometric display font for posters.

I chose to proceed with IDEA#2 to be applied in architecture exhibition. Mr.Vinod also agree with it and said it's interesting.

Research

Since I had decided to construct my font based on the architectural elements of the Damascus buildings, I began doing online research to gather references and inspiration. I carefully observed the intricate details, structural forms, and unique characteristics of these historical buildings. Through this visual research, I aimed to identify a consistent design direction that could translate the spirit of Damascus architecture into typographic elements.
Fig 1.1 - Research of damascus building, week 9

Since my goal was to design a typeface that visually reflected architectural qualities, I turned to Pinterest as a source of inspiration. I searched for fonts that carried a structural, geometric, or architectural feel whether through sharp lines, modular systems, or monolithic letterforms. Browsing through these references gave me a clearer sense of direction and helped me define the tone of my own typeface. Some designs reminded me of blueprints, while others echoed classical columns or arches, which aligned well with my concept. Collecting and analyzing these examples not only sparked new ideas but also gave me a better understanding of how visual weight, symmetry, and proportion can be used to communicate a sense of "architecture" within typography.

Fig 1.2 - Research of other typeface, week 9

Fig 1.3 - Blueprints fonts example, week 9

My typeface relied heavily on a custom grid base to achieve the architectural look I envisioned. I also searched on Pinterest for examples of typefaces that were constructed using visible grid systems. I specifically looked for fonts where the design process incorporated underlying lines, shapes, or geometric modules as these helped me understand how to build consistent, well-balanced letterforms.

As I analyzed these examples, I noticed a common pattern: many of the fonts were constructed using a combination of squares, circles, and occasionally triangles. These basic geometric forms created a stable and repeatable structure across the entire type system. Squares provided a solid foundation, circles added fluidity and softness to the curves, while triangles were often used to create dynamic angles or sharp terminals.

Fig 1.4 - Grid base fonts example, week 9

Progress in Adobe illustrator

One of the architectural features that stood out to me the most in the Damascus buildings was the signature arched doorway, a graceful and iconic element that felt essential to capture. Inspired by this, I began constructing my own geometric framework grid, which I used as the foundation for building each letterform.

The grid consists of repeated circular and rectangular modules, carefully aligned to reflect the rhythm and balance found in the building's layout. I wasn’t sure at first if “grid” was the correct term, but I see it as a modular structure that guides the entire development of the typeface.

As shown in the image above, I went through four main iterations. Each version became more refined in terms of proportion, alignment, and visual harmony. I constantly evaluated the spacing, curve dynamics, and how the arches flowed within the structure. By the final (4th) version, the grid had become a stable system that helped me generate a consistent font.

Fig 1.5 - Progress of making grids of letterforms, week 9

As I progressed from the 3rd to the 4th version of my typeface grid, I made a key structural decision: I connected the small square and circle modules located on the side of each form. This change make it became a symbolic and functional feature across all the letterforms. By introducing this connection, I created a consistent architectural element that appears throughout the entire type system. It almost acts like a “joint” or “support beam” which is a subtle yet intentional structure that holds the design together. This detail not only enhanced the visual rhythm and unity of the font, but also gave it a recognizable identity. In a way, this connected part became a signature motif, something that visually ties every letter back to the core concept of construction, support, and architectural order.

Fig 1.6 - Progress of making grids of letterforms, week 9

To begin forming actual letters from the geometric grid I built, I used the Shape Builder Tool in Adobe Illustrator. This tool allowed me to merge, subtract, and refine sections of the grid into solid, readable letterforms. It felt like I was sculpting the letter out of architecture like using structural shapes as the blueprint and carving away the unnecessary parts.

Fig 1.7 - Progress of making uppercase letterforms, week 9

As shown in the evolution of the letter "A" below, I iterated through multiple versions, tweaking the proportions and refining the curves especially around the arched areas just to make sure they remained true to the core idea yet remained legible and functional. It was a slow but fulfilling journey of trial and discovery.

Fig 1.8 - Progress of making uppercase letterforms 'A', week 9

Fig 1.9 - Progress of making uppercase letterforms, week 9

This stage of the process required a lot of experimentation. I kept trying out different compositions, combining and adjusting shapes repeatedly until I was satisfied with how the letter looked. Every curve, stroke, and negative space was tested to see if it matched the architectural personality I was aiming for.

Fig 1.10 - Progress of making uppercase letterforms, week 9

Fig 1.11 - Progress of making uppercase letterforms, week 9

Fig 1.12 - Progress of making uppercase letterforms, week 9

Fig 1.13 - Final uppercase letterforms, week 10

Making Punctuations

Fig 1.14 - Progress of making numbers and punctuations, week 10

Fig 1.15 - Final numbers and punctuations, week 10

Import font into FontLab 7 & FontForge

Before import my font in illustrator into FontLab, I downloaded this sidebearing chart as a guideline.
Fig 2.1 - Sidebearing chart, week 11

Fig 2.2 - Import letterforms into fontlab, week 11


Fig 2.3 - Import letterforms into fontlab, week 11

Fig 2.4 - Adjust the sidebearrings of the letterforms , week 11

Fig 2.5 - Done adjusting the Width, LSB and RSB of the letterforms , week 11

Fig 2.6 - Tying out the letterforms , week 11

When I was ready to export my typeface, I realized that the software I had been using, FontLab 7, was running in demo mode  which unfortunately doesn’t allow exporting fonts unless you purchase the full version. To overcome this limitation without spending money, I decided to switch to FontForge, to generate my final font file. Although it required some adjustments getting used to a different interface, FontForge offered all the basic tools I needed to successfully export my typeface.

Fig 2.7 - Import letterforms into fontforge, week 11

Fig 2.8 - Import letterforms into fontforge, week 11

Fig 2.9 - Import letterforms into fontforge, week 11

Fig 2.10 - Adjust the sidebearrings of the letterforms , week 11

Fig 2.11 - Tying out the letterforms , week 11

Fig 2.12 - Generating fonts , week 11

Fig 2.13 - Typing out the font in FontDrop! , week 11

Font Presentation Process

Fig 3.1 - Colour Palette, week 13

The concept behind the Arcatura font presentation is rooted in a strong architectural and metallic aesthetic.  Visually, I explored a tone that blends brutalist architecture with metallic textures for evoking a sense of engineered strength and raw beauty.  

The overall concept I aimed for could be described as a fusion of architectural brutalism and post-apocalyptic grit. I wanted the font to carry a sense of permanence as though each character was carved into metal or forged from materials that have withstood time and decay.

By placing the typeface in this visual context, I wanted to communicate its potential beyond print like imagining it engraved on structures, placed on exhibition walls, or integrated into urban spaces as part of a larger architectural identity.
Fig 3.2 - Progress of font presentation, week 13

Fig 3.3 - Adding texture to font presentation, week 13

Fig 3.4 - Adding texture to font presentation, week 13

Fig 3.5 - Adding texture to font presentation, week 13

Fig 3.6 - Adding texture to font presentation, week 13

Fig 3.7 - Adding texture to font presentation, week 13

Font presentation #1 introduces the Arcatura typeface in its full uppercase form, along with numerals and symbols. The slightly blurred, grainy background simulates a dusty or corroded surface, reflecting the idea that this typeface was born out of aged architectural ruins.
Fig 3.8 - Task 3 font presentation 1, week 13

Font presentation #2 is a detailed and clean grid showcase of the alphabet. The clarity here emphasizes the grid-based design behind the typeface.
Fig 3.9 - Task 3 font presentation 2, week 13

Font presentation #3 introduces font usage in smaller composition and text arrangements. The vertical and horizontal type layout is reminiscent of architectural diagrams or blueprint annotations, reinforcing the connection to design and construction.
Fig 3.10 - Task 3 font presentation 3, week 13

Font presentation #4 presents the typeface in a more experimental layout. The heavily textured metallic background, resembling brushed steel or scratched aluminum, adds a layer of industrial tension that portraying the font as something engineered in a mechanical or dystopian setting.
Fig 3.11 - Task 3 font presentation 4, week 13

Font presentation #5 showcases the rough, uneven surface mimics weathered iron or concrete walls surfaces you might find in an old, crumbling urban space. I intentionally layered gritty textures here to emphasize imperfection, history, and raw beauty, making the typeface feel grounded and tactile.

Fig 3.12 - Task 3 font presentation 5, week 13

Font presentation #6 composition focuses on the oversized rendering of the letters “A”, “R”, and “C” as functioning as a typographic sculpture rather than just letterforms. Each character is treated like an architectural frame, with sharp vertical lines and carved-out arches. The use of negative space and line weight here is crucial in expressing balance and strength 

Fig 3.13 - Task 3 font presentation 6, week 13

Font presentation #7 layout evokes a strong dystopian or post-apocalyptic atmosphere. The vertically stretched typeface, placed against a grainy and distorted metallic background, enhances the emotional tension in the question.
Fig 3.14 - Task 3 font presentation 7, week 13

Font Application Process

I envisioned the typeface as something that could exist not only on paper, but also on the surface of buildings, steel panels, or weathered industrial signage where structure and material become one.

Following the tone set by the font presentation, the font applications aim to place Arcatura typeface in a realistic and thematic context specifically, in the world of architecture exhibitions. 

The goal was to show how Arcatura typeface can function as more than a typeface like how it can shape spatial experiences and communicate structural identity.  In these four visuals, I explored how the font could be applied in different exhibition-related materials, including posters, signage, digital layouts, and environmental graphics.  Across all examples, I maintained a metallic / architectural / brutalist visual language, echoing the design tone established during the presentation stage.

Fig 4.1 - Progress of font application, week 13

I designed a long rectangular poster banner to showcase the Arcatura typeface
Fig 4.2 - Progress of font application, week 13

After finishing some of the mock-up, I began experimenting with colour adjustments to better match the colour palette I had previously chosen. My goal was to create a more unified visual identity between the font presentation and the font application.

I tested some of the tool in filter gallery such as halftone pattern and charcoal. I even added some grain textures to give the mock-up a more tactile, weathered look, as if the design had aged over time or been exposed to rough environments.

Despite trying several variations, I eventually realized that most of the color changes felt excessive or unnecessary. Instead of enhancing the design, they started to distract from the clarity and strength of the typeface itself. In the end, I decided that a more minimal and raw approach worked better, allowing my font to remain the main focus while still maintaining a cohesive tone with the rest of the visuals.

Fig 4.3 - Progress of adjust colour font application, week 13

So, at the end I only adjust the image by photo filter to change it to a warmer colour tone.

Fig 4.4 - Progress of adjust colour font application, week 13

Font application #1 showcases a long rectangular poster banner using Arcatura typeface as the main title font for an architectural exhibition. The strong, structural nature of the letters immediately communicates the theme.  The use of negative space and sharp contrast gives the design a sense of architectural order. The minimalist style allows the typeface to speak for itself, acting as the "structure" of the poster.

Fig 4.5 - Task 3 font application 1, week 13

Font application #2, Arcatura typeface is used for wall-mounted exhibition information, possibly at the entrance or an intro section. The subtle grainy texture in the background references the same weathered surface aesthetics from the presentation stage, keeping the tone consistent while elevating the atmosphere of the space.
Fig 4.6 - Task 3 font application 2, week 13

Font application #3, this layout imagines how Arcatura typeface could function on digital signage such as a screen in a gallery or a modern exhibition space. The tall, monolithic forms of the typeface stand out clearly even in a minimal UI. 
Fig 4.7 - Task 3 font application 3, week 13

Font application #4, this final image explores how Arccatura typeface can function as part of an architectural wayfinding system, specifically for floor or level signage within a building or exhibition space. The bold display of “FLOOR 08” uses the font’s heavy structure and clean geometry to establish a strong spatial presence.
Fig 4.8 - Task 3 font application 4, week 13

Honor Competition

Fig 5.1 - Progress of making clock design , week 13

Fig 5.2 - Honor Competition - Overall Visual Design , week 13

Fig 5.3 - Honor Competition - Clock Display , week 13

Fig 5.4 - Honor Competition - Personalized Signature , week 13


Task 3 Final Outcome
Download my font here:

Fig 6.1 - Font Information - PDF , week 13

Fig 6.2 - Final Font, week 13

Fig 6.3 - FontForge Screenshot, week 13

Fig 6.4 - Task 3 font presentation 1, week 13

Fig 6.5 - Task 3 font presentation 2, week 13

Fig 6.6 - Task 3 font presentation 3, week 13

Fig 6.7 - Task 3 font presentation 4, week 13

Fig 6.8 - Task 3 font presentation 5, week 13

Fig 6.9 - Task 3 font presentation 6, week 13

Fig 6.10 - Task 3 font presentation 7, week 13

Fig 6.11 - Final Font Presentation - PDF, week 13

Fig 6.12 - Task 3 font application 1, week 13

Fig 6.13 - Task 3 font application 2, week 13

Fig 6.14 - Task 3 font application 3, week 13

Fig 6.15 - Task 3 font application 4, week 13

Fig 6.16 - Final Font Application - PDF, week 13

Fig 6.17 - Honor Competition - Overall Visual Design , week 13

Fig 6.18 - Honor Competition - Clock Display , week 13

Fig 6.19 - Honor Competition - Personalized Signature , week 13

Fig 6.20 - Final Honor Competition - PDF, week 13


FONT TEXTER

*only type in UPPERCASE*


Feedback

- Week 9 [ 18/06/25 ]

  General Feedback:  

For this week, Mr. Vinod reviewed selected e-portfolios and provided us with guidance on how to better organize and submit our work. He suggested adding a cover page to our blogs to enhance their identity and make them more impactful. Additionally, he gave individual consultations on our Task 3 proposal presentations, offering feedback on which aspects were approved and which could be further improved. 


  Specific Feedback:  
He said the second idea is interesting but it'll be better to make attempt first and make clear objectives so that he can understand what my idea is.

- Week 10 [ 25/06/25 ]

  General Feedback:   
Mr Vinod suggested to find a reference font and type the letters and punctuations out to do a comparison when we creating punctuations so our punctuations sizes won't go wrong. 

  Specific Feedback:  
I have shown Mr.Vinod my current progress and let him know that I'm still working on the uppercase letters cuz I've do till letter N only. Besides, I ask Mr.Vinod about if I could double the base for letter M so it can look better and he said just do whatever you want, as long as it looks good and consistent.

- Week 11 [ 02/07/25 ]

  General Feedback:  
Mr. Vinod mentions that if we not going to do lowercase letters, then remember we need to import the uppercase letters into lowercase letters too during FontLab. 

  Specific Feedback:  
Mr.Vinod mentions that my progress is almost same as last week so I kept continued to create the punctuations.

- Week 12 [ 9/07/25 ]

  General Feedback:  
Sir briefed us the Honor competition and our next task which is 3 font applications and 5 font presentations. He also gave examples on how we should do our font presentation.

  Specific Feedback:   
I continue working on fontlab during the class and manage to finish before class and show Mr.Vinod and he said overall looks good.

- Week 13 [ 16/07/25 ]

  General Feedback:  
Absent due to stomach cramps.

  Specific Feedback:   
Absent due to stomach cramps.


Reflection

Observations
During the early stages of the project, I spent a significant amount of time studying the architecture of Damascus buildings. What caught my attention most was the consistent of arches that are elegant, structural, and deeply symbolic. I noticed how these archways weren’t just decorative, but essential parts of the building’s form and identity. Their curves created a natural flow, while the repetition of shapes and symmetry brought a strong sense of order and rhythm. These observations shaped the core direction of my typeface idea. I aimed to create letterforms that felt just as structured and harmonious as the architectural references, with a strong visual identity rooted in geometry and balance.

Experience
As I continued the design process, I discovered that architecture and typography share more similarities than I initially expected. Both rely heavily on proportions, alignment, and structural logic. To translate this into my font, I constructed a geometric grid inspired by architectural layouts that made up of circles and rectangles. I iterated through four versions of this grid, refining how each component interacted with the others. I also realized that not every design decision needed to be overly complex. Sometimes, simplifying a shape could enhance clarity while still maintaining the architectural essence. These findings helped me create my typeface.

Findings
This assignment was both a creative and technical journey. I began by building my letterforms in Adobe Illustrator, treating each glyph like a small building, carefully designed and balanced within its own space. Once the visuals were ready, I learned how to use FontForge, a new software for me, to generate and export the font. It was a challenge at first, but it gave me a much better understanding of how fonts function behind the scenes and I did love the interface of FontForge even it's a bit difficult to use than Fontlab. Beyond the technical side, I created font presentation, font applications, and  clock design that featured my typeface. Through this, I learned how to express a design system across multiple platforms, and how meaningful inspiration like architecture can influence the way we create typography. This experience deepened my appreciation for type design and opened my eyes to the endless creative potential between structure and form.

Further Reading

Fig 7.1 - Thinking with Type by Ellen Lupton, week 10

1. Typography Is Not Just Font Choice – It’s a System

  • Lupton explains that typography involves structure, spacing, alignment, and rhythm, not just choosing a pretty font.

  • She emphasizes how type behaves in space and how readers visually navigate text.

2. Three Main Sections:

Letter

  • Covers anatomy of type, classification (serif, sans serif, script, etc.), and historical evolution.

  • Key idea: Letters are visual forms, and every part (x-height, ascender, bowl, etc.) matters in readability and tone.

Text

  • Focuses on legibility, spacing, and hierarchy within a body of text.

  • Teaches how to control leading, kerning, justification, and line length.

  • “Typography exists to honor content.” (One of the most famous lines.)

Grid

  • Explores how to use grids and layout systems to structure content.

  • Encourages breaking the grid creatively when necessary, but first understanding its logic.

3. Form Follows Function—but also Expression

  • Lupton argues that typography isn't just about clarity—it's also about voice and expression.

  • She introduces the idea of expressive typography, where form enhances the meaning of the message.

4. Visual Examples & Practical Tips

  • The book is filled with real-world examples, visual comparisons, and exercises.

  • She shows what to do and what not to do, which is useful for self-learning and refining your own type work.

5. Critical Thinking Meets Visual Design

  • She introduces basic semiotics and design theory, helping you think deeper about what your typography communicates beyond words.

  • Ideal for both creative inspiration and technical refinement.


Comments