Advanced Typography - Task 3: Type Exploration and Application

8/6/26 - 13/7/26 / Week 8 - Week 13
Janice Cheah Pei Ern / 0376497
Advanced Typography / BDCM / Taylor's University
Task 3

LIST / JUMP LINK


INSTRUCTIONS



TASK

In this task, we had to first come up with proposals. We can choose whether to Create a Font to Solve a Problem, Expand an Existing Letterform, or Experiment something unique.

I came up with three proposals which include expansion from my Task 1, poster text expansion from one of my favourite animations and experiment (somewhat expand) on creating a font made out of molecules. Here below is my presentation:
Fig. 1.1 Final Proposals Presentation PDF (Week 9, 15/6/26)

I decided to go ahead with the molecule font idea, as I find it quite interesting. I was somewhat inspired by the molecular structure at Petrosains Centre and my experience with molecular models back in Chemistry class in highschool.

I was suggested by my tutor that if I proceed with this idea, I can make the structure of the letters using the molecules instead of just trying to fit them in as I did in my sketch in my proposal.

I did a rough sketch of how it might look like. It is kind of messy so I decided to just proceed into Illustrator and construct the strokes for consistency.
Fig. 1.2 2nd Early Rough Sketch of Chemole font (Week 9, 16/6/26)

I did the different basic strokes (horizontal, vertical, diagonal, curves) first before putting them together to form the letter.
Fig. 1.3 Strokes for Letter Construction (Week 9, 17/6/26)

After forming the letters using the stroke, I tried to make all the letters look more consistent by removing and adding elements. I constructed the letters with Futura Std Bold at the back as a reference.
Fig. 1.4 1st Version of A to O Letter Construction Process (Week 9, 12-14/6/26)
Fig. 1.5 1st Version of P to Z Letter Construction Process (Week 9, 12-14/6/26)

Fig. 1.6 1st Version of A to Z Uppercase Letters for Chemole Font (Week 9, 14/6/26)

However, the outcome came out flat instead of 3D, like the molecular model. My tutor suggested increasing the depth and making it look more 3D. So I decided to look back at the basic strokes and improve my work from there.

Fig. 1.7 Improved Version of Basic Strokes (Week 10, 24/6/26)

My tutor agreed that the improved work has more depth, so I applied the strokes to form the letters again.

Fig. 1.8 Improved Version A to O Letter Construction Process (Week 10, 26-28/6/26)

Fig. 1.9 Improved Version P to Z Letter Construction Process (Week 10, 26-28/6/26)

After doing the uppercase letters, I also did the numbers and some of the main punctuation.

Fig. 1.9 Numbers and Punctuations Construction Process (Week 11, 29/6/26)

Fig. 1.10 Final Version of Chemole Font (Week 11, 29/6/26)

Fig. 1.11 Outlines of Chemole Font (Week 11, 29/6/26)

As I focused more on making the improvement to give it a more molecular model look, I decided to make it Unicase instead.

Sidebearings
Next, I moved into transferring the letters into FontForge to adjust the sidebearings according to the formula picture provided by my tutor.

As I only have uppercase, I downloaded the sidebearing measurement for the uppercase letters.

Fig. 2.1 Sidebearing Measurement for Uppercase Letters

Before doing the sidebearings, I measured out the height for cap height, ascender, x-height and descender to put it into FontForge.
 
Fig. 2.2 Height measurement

Then, I downloaded my letters individually as SVG files and put them into FontForge.

Fig. 2.3 Screengrab of Letterforms in FontForge (Week 11, 3/7/26)

Fig. 2.4 Screengrab of Metric View of Sidebearings for Letters in FontForge (Week 11, 3/7/26)

Fig. 2.5 Screengrab of Metric View of Sidebearings for Numbers and Punctuation in FontForge (Week 11, 3/7/26)

Font Presentation
After generating the font in FontForge, we moved on to creating the font presentation. As my font is quite complex, I tried to keep it simple and focus on the details of the font. My tutor also reminded me to avoid rotating the text and zoom into the details instead of packing them together.


Fig. 3.1 Drafts of Font Presentation (Week 12, 8/7/26)

Fig. 3.2 Font Presentation #1 (Week 12, 8/7/26)

Fig. 3.3 Font Presentation #2 (Week 12, 8/7/26)

Fig. 3.4 Font Presentation #3 (Week 12, 8/7/26)

After making the first 3 Font Presentation, my tutor suggested separating the letters and numbers into two different pages to make my last 2 Font Presentation.

Fig. 3.5 Font Presentation #4 (Week 12, 8/7/26)

Fig. 3.6 Font Presentation #5 (Week 12, 8/7/26)

Font Application
For my font application, I used my font as the logo and main text. As for the other text, I used Futura Std Medium. I tried to make the mockups range from smaller items to bigger items while still making sure the designs somewhat relate to molecules or Science. I looked up for mockups in Unblast and Mockupworld.

Fig. 4.1 Drafts of Font Application (Week 12, 10-11/7/26)

At first, I wanted to use a laptop as one of my showcases as to what it will look like on a website, but I already have a digital signboard mockup so I decided to just leave this idea aside.

Fig. 4.2 Laptop Attempts

I actually also wanted to use a beaker as one of my showcases as it was an interesting idea and relates back to Science. However, the visibility of my font is not that great on it unless I make it black which isn't part of my colour scheme, so I also leave this idea aside.


Fig. 4.3 Beaker Attempts

For my Application #1, I went with a close-up of the font used on a product. I actually did this last out of all the applications, and I noticed most of the ones I did are quite big in size, so I went with a dropper bottle.

Fig. 4.4 Font Application #1 (Week 12, 11/7/26)

As for my Application #2, I was reminded of an event called "STEAM Fair" which was held annually back in my high school. I decided to design a ticket using the font I created.

Fig. 4.5 Font Application #2 (Week 12, 10/7/26)

For my Application #3, I decided to try to make a book cover that is related to Science/Chemistry. I tried to use my font as the main title for the book.

Fig. 4.6 Font Application #3 (Week 12, 10/7/26)

For Font Application #4 and #5,  I thought of what it would look like if there was a Science exhibition held (which somewhat relates to the Petrosains inspiration). I decided to go with a digital signboard at outdoors and a painted wall maybe inside the exhibition.

Fig. 4.5 Font Application #4 (Week 12, 10/7/26)

Fig. 4.7 Font Application #5 (Week 12, 11/7/26)

Final Submission: Task 3

Chemole is a name formed from the combination of the words "Chemistry" and "Molecules". The typeface was created as an experimental exploration of the concept of molecular structures forming the structure of letterforms. Inspired by 3D models of molecules, Chemole explores translating molecular models into unique letterforms.

Click here to download Chemole


Fig. 5.1 Font Information - TTF File (Week 12, 12/7/26)

Fig. 5.2 Finalised Letterforms (Week 12,12/7/26)

Fig. 5.3 Screengrab of Font in FontForge (Week 12, 12/7/26)

Fig. 5.4 Font Presentation #1 (Week 12, 12/7/26)

Fig. 5.5 Font Presentation #2 (Week 12, 12/7/26)

Fig. 5.6 Font Presentation #3 (Week 12, 12/7/26)

Fig. 5.7 Font Presentation #4 (Week 12, 12/7/26)

Fig. 5.8 Font Presentation #5 (Week 12, 12/7/26)

Fig. 5.9 Font Presentation Showcase (Week 13, 13/7/26)

Fig. 5.10 Font Application #1 (Week 12, 12/7/26)

Fig. 5.11 Font Application #2 (Week 12, 12/7/26)

Fig. 5.12 Font Application #3 (Week 12, 12/7/26)

Fig. 5.13 Font Application #4 (Week 12, 12/7/26)

Fig. 5.14 Font Application #5 (Week 12, 12/7/26)

Fig. 5.15 Font Application Showcase (Week 12, 12/7/26)

      Fig. 5.16 Font Presentation PDF (Week 12, 12/7/26)

Fig. 5.17 Font Application PDF (Week 12, 12/7/26)

Test Out Chemole Here:

FEEDBACKS

Week 9:
Specific Feedback: 
Idea 3 can use grid, put dots on the grid and try connect them.
Idea 3 can also use a base letter shape at the back, then put dots into the letters and connect them.
Some of the lines/bonds can be breaking instead of connecting to the dot.

Week 10:
Specific Feedback:
1st review- Focus on reconstructing the uppercase letters to make them look like there is depth, in case it doesn't work, go with the current version
2nd review- The depth is there for the updated version, continue with the other letters

Week 11:
General Feedback:
Everything looks okay, proceed with the outline stroke and making the font.

Week 12:
Specific Feedback:
Do not rotate the text and make it straight like the original. 
The showcase of alphabets and numbers can be separated into 2 artboards.
The 1st artboard is good, for artboard 4 can add more letters and shrink it.
Have another colour for the 5th artboard, as there are already 2 white artboards.


REFLECTIONS

Experience
This final task was quite fun and possibly the most head-scratching task among the others, as I had to apply what I had learnt throughout the previous tasks here. It was a hurdle at the beginning as the font I wasn't satisfied with the earlier versions of the font, but I am glad that I managed to overcome it with some feedback given by my tutor. 

Observation
I observed that designing a font is a time-consuming process, as I spent almost 2-3 full days constructing the letterforms and their details. The sidebearings of the font also take time due to the calculation for each letter. Despite the lengthy process, I am quite satisfied with the final outcome of the font.

Findings
During this task, I found that designing a font requires both creativity and precision. Every design decision, from the construction of letterforms to the spacing and sidebearings, influences the readability and consistency of the typeface. Applying the correct measurements and formulas can help create a more balanced and cohesive font. 

Further Reading
Week 11
Fig. 6.1 GT Academy Lesson 29: Punctuation (30/7/26, Week 11) 

Provided by our tutor, I read up on how to create some of the punctuation for my font.

Fig. 6.2 Size and Placement of Period (30/7/26, Week 11) 

I took note on how I should design my period/full stop punctuation. They should be placed directly on the baseline of the font. 

Fig. 6.2 Size of Comma (30/7/26, Week 11) 

The size of a comma is about the height of two stacked periods, but the comma's head should be slightly smaller than a period's.

Fig. 6.3 Comma's terminal angle (30/7/26, Week 11) 

The downstroke terminal's angle of the comma can refer to the angle of the ends of "S", whether it is horizontal, diagonal or vertical.

Fig. 6.4 Placement of Colon and Semicolon (30/7/26, Week 11) 

The colon and semicolon should be placed between the x-height and the baseline of the font.


Comments

Popular Posts