ADVANCED TYPOGRAPHY : TASK 3 TYPE EXPLORATION & APPLICATION

Idea 1: To start with, I refer back to my wordmark in task 2 and make an expansion from it. Previously I only made M, A, D, and E. I tested the word B, C, and F using the key element which is the small space that create the Bold illusion.

Idea 2: After that, I began searching for references and stumbled upon a crayon-looking font. I liked how the font created a playful and fun appearance—just like how a child playfully uses a crayon.

Idea 3: While I was doing my research, I started writing and thought, what if my handwriting became a font? I searched on Pinterest and found that some people have actually done it. My handwriting isn’t very neat, but I think that adds to its uniqueness.

Combining all of my research, here are my final project proposal:

Final project proposal

Back to T.O.C

3.2 Ideation

After propose my idea to Mr. Vinod, I decided to go with the first ideation and expand it.

Fig 3.2.1: Ideation chosen, Week 9 (20/06/2025).

I tried to find a bold, thick font with minimal spacing and lines that align with my ideation.

Fig 3.2.2: References, Week 9 (20/06/2025).

I digitized it while referring to the previous wordmark. The key elements I incorporated are:

Fig 3.2.3: Key elements, Week 9 (20/06/2025).

Fig 3.2.4: Baseline grid, Week 9 (20/06/2025).

I used the large rectangle shape as the foundation for the letters. The curve was inspired by the 'M' in my wordmark. The small rectangle was taken from the counter (hole) in the letter 'D', while the medium rectangle was based on the width of the letter 'E'.

Uppercase letter

Fig 3.2.5: Rough uppercase digitization, Week 9 (20/06/2025).

I cut the medium rectangle in half to create the letter 'V'. The corner radius varies for each letter—elements that need to appear more rounded have a 104px radius, while smaller rounded corners use a 45px radius.

Fig 3.2.6: Digitized uppercase (Attempt #1), Week 9 (20/06/2025).

After completing all the uppercase letters, I realized that the letter 'V' didn’t have the same counter as the 'U', and the 'Y' looked too similar to the 'T', so I decided to revise them. Since I'm going to design the numbers as well, some of them risk looking too similar — such as 'S' and '5', or 'Z' and '2'. I tried revising the 'S' to make it more rounded, so the '5' can remain sharper. As for 'Z', I plan to keep it sharp, while making the '2' more rounded.

Fig 3.2.7: Digitized uppercase after revision for letter 'V' 'Y' and 'S', Week 10 (23/06/2025).

After I created all the letters, I noticed that some of them didn’t look consistent, so I used a grid as a guide.

Fig 3.2.8: Digitized uppercase (Attempt #2), Week 10 (24/06/2025).

After finishing the uppercase letters, I moved on to the numbers. I need to design the numbers before the lowercase letters because some of the numbers look similar to uppercase letters. To avoid any issues with readability, I need to adjust them first.

Numbers

Fig 3.2.9: Rough number digitization with grid, Week 10 (24/06/2025).

Fig 3.2.10: Number adjustment (Left: number, Right: letter), Week 10 (24/06/2025).

I adjusted the numbers to differentiate them from the letters 'O', 'Z', and 'S'. I made the zero more rounded, the two more rounded at the top and middle, and the 'S' more rounded as well. I adjusted the radius of some letters and numbers to keep them consistent. After that, I began working on the lowercase letters. I made the baseline grid with descender to create the lowercase.

Lowercase

Fig 3.2.11: Size comparison side-by-side with the uppercase, Week 10 (27/06/2025).

Fig 3.2.12: Rough digitization (attempt #1), Week 10 (27/06/2025).

After I made the rough digitization, I made some changes for some letter.

Fig 3.2.13: After adjustment (left:before, right: after), Week 10 (27/06/2025).

After receiving feedback and starting the kerning process, I felt that the 'J' needed to be shorter to improve the spacing between letters.

Fig 3.2.14: After adjustment (left:before, right: after), Week 11 (02/07/2025).

Final Uppercase, Lowercase letter and Numbers

Fig 3.2.15: Uppercase, Lowercase, and Number final, Week 11 (02/07/2025).

Fig 3.2.16: Uppercase, Lowercase, and Number final (outline), Week 11 (02/07/2025).

Punctuation

To start with, I type out the punctuation on keyboard to see the size of the punctuation beside the letter. I used the baseline grid for the letters to maintain the consistency. While making the punctuation, I compare it side by side with the letter to see the size different.

Fig 3.2.17: Punctuation progress, Week 11 (01/07/2025).

Fig 3.2.18: Final Punctuation, Week 11 (01/07/2025).

After feedback I need to adjust all the bracket to become longer. I also add $ symbol using the uppercase S and the line from the punctuation.

Fig 3.2.19: Brackets adjustment (Top: Before, Bottom: After), Week 11 (02/07/2025).

Final Punctuation

Fig 3.2.21: Final Punctuation, Week 11 (02/07/2025).

Fig 3.2.20: Final Punctuation (outline), Week 11 (02/07/2025).

After completing all letters, numbers, and punctuation, I began to export it into FontLab to create a font that can be use.

FontLab

After finalize all, I export the letters, numbers, and punctuation. I downloaded the newest version to get the free trial.

Fig 3.2.21: Exported letters, numbers, and punctuation in FontLab, Week 11 (03/07/2025).

First, I adjusted the kerning for the uppercase letters based on the sidebearing measurement table provided by Mr. Vinod, with slight modifications since my font has a square structure, making the kerning values fairly similar across all characters. While adjusting the kerning, I encountered some issues with the measurements, some of the letter values increased too much. So, I had to manually adjust the kerning for each letter.

Fig 3.2.22: Top: adjust manually, Bottom: adjust with other letters, Week 11 (03/07/2025).

Fig 3.2.23: Uppercase and Lowercase kerning, Week 11 (03/07/2025).

Fig 3.2.24: Numbers and Punctuation kerning, Week 11 (03/07/2025).

After I finished everything, I exported the font as a .ttf file so it can be used.

Click here to download: Made Gravik

3.3 Development

For the font presentation and application, we are required to create five font presentation design and four design "HONOR" competition theme and two based on our own concept and purpose. Below is the theme I have chosen and the category.

Fig 3.3.1: Screenshot of Honor theme and category, Week 11 (03/07/2025).

I chose "Genesis - The Future" as the theme. It's about world in the future will be constructed with the power of technology and art, using creativity and imagination, this was based on the "HONOR" website explanation. As for the category I choose standby for the application of my font.

As for my own concept of the font, Made Gravik. I chose this name because the font originated as an expansion of my personal wordmark, and I wanted to retain my name as part of its identity. Including "Made" not only personalizes the typeface but also reflects me as a designer.

Font Presentation

The purpose of my font is to serve as a design element that can be used in various creative applications, such as stickers and posters. I vision it as a display typeface suitable for graphic designers who want to add a bold and expressive touch to their visual compositions. Below are some of my references:

Fig 3.3.2: References, Week 12 (08/07/2025).

I chose bright colors to create a playful vibe. The use of vibrant tones helps make the design more eye-catching and engaging, which complements the fun and creative personality of the font.

Fig 3.3.3: Color palette, Week 12 (08/07/2025).

My first presentation plan is to showcase my font through a quote poster, so people can understand how my font can be applied. The second part will present the font details, including basic Latin characters and punctuation. The third presentation will demonstrate how the punctuation appears in a poster context, with added graphic elements and some numbers. For the fourth presentation, I will showcase the numbers in my font and, to add variation, I will combine them with letters. My final presentation will explain the origin of my font, how I came up with the idea and the foundational shapes behind it.

Fig 3.3.4: Font Presentation progress, Week 12 (12/07/2025).

For the first presentation, I used my font name in quotation marks because it is not the correct spelling of "Graphic," so I wanted to emphasize the word. I also added a graphic element similar to those in my references.

Fig 3.3.5: Font Presentation #1, Week 12 (12/07/2025).

To create variation, I made an emoji using punctuation marks, and also to showcase how my punctuation is used.

Fig 3.3.6: Emoji elements created using punctuation, Week 12 (12/07/2025).

To present my punctuation and number, I tried to make it fun and made another emoji elements.

Fig 3.3.7: Font Presentation #3, Week 12 (12/07/2025).

Lastly, I want to present the origin of my font. Since the base of my font is made up of rectangles and squares, I tried to include them in the presentation along with the baseline and cap height.

Fig 3.3.8: Font Presentation #5, Week 12 (12/07/2025).

Final Font Presentation

Fig 3.3.9: Font Presentation #1, Week 12 (12/07/2025).

Fig 3.3.10: Font Presentation #2, Week 12 (12/07/2025).

Fig 3.3.11: Font Presentation #3, Week 12 (12/07/2025).

Fig 3.3.12: Font Presentation #4, Week 12 (12/07/2025).

Fig 3.3.13: Font Presentation #5, Week 12 (12/07/2025).

Font Application

For my font application, I tried to apply it to items that require a creative touch. With that in mind, I chose a sticker pack and a lanyard to showcase my font. I used a mockup from unblast.com to create the application.

Fig 3.3.14: Sticker design, Week 12 (13/07/2025).

After I made the design in Illustrator I export it to photoshop to create the mockup.

Fig 3.3.15: Sticker Mockup, Week 12 (13/07/2025).

To create the Lanyard, I create three different design for the strap and for the card id. I combine my font and the emoji to create variation and consistency for each design.

Fig 3.3.16: Lanyard design, Week 12 (13/07/2025).

Fig 3.3.17: Lanyard Mockup, Week 12 (13/07/2025).

Final Font Application

Fig 3.3.18: Final Application for Sticker Pack, Week 12 (13/07/2025).

Fig 3.3.19: Final Application for Lanyard, Week 12 (13/07/2025).

Honor Design Application

For Honor competition, we need to submit 4 works in total:

1. Clock Display

2. Personalized Signature Design

3. Overall Visual Design

4. Animation for Clock Display

My initial plan for the theme is inspired by the classic game called "Tetris". It is a nostalgic representation of early digital entertainment. Tetris was the first widely recognized video games that shaped the digital era. By bringing Tetris back in a modern context, I want to create a bridge of the past and the future. The geometric visuals Tetris have reminds me of a Retro-futurism.

References

Fig 3.3.20: Tetris References, Week 13 (14/07/2025).

For the overall design, I want to highlight my font, so I used it as the Tetris blocks. I used numbers and uppercase letters, and to differentiate each block, I applied different colors from my color palette.

Fig 3.3.21: Tetris inspired design based on my font, Week 13 (14/07/2025).

After completing the overall design, I began creating the clock display. I wanted to use my punctuation to form the Tetris blocks. I created the base of my Tetris using the period punctuation from my font.

Fig 3.3.22: Tetris block design, Week 13 (14/07/2025).

To make the clock, I use 3D effect to create a block elements, just like "Tetris".

Fig 3.3.23: Clock Display process, Week 13 (14/07/2025).

For the personalized design I want to create a Game Over screen, just like when we're playing games.

References

Fig 3.3.24: Game Over display, Week 13 (14/07/2025).

Fig 3.3.25: Personalized Design process, Week 13 (14/07/2025).

For the animation, I wanted to recreate the way Tetris blocks fall from the top. I exported my Illustrator file to After Effects to create the animation. In After Effects, I used the position property to make the blocks move downward.

Fig 3.3.26: Animation process, Week 13 (14/07/2025).

Final HONOR Standby

Fig 3.3.27: Clock Display, Week 13 (14/07/2025).

Fig 3.3.28: Personalized Design, Week 13 (14/07/2025).

Fig 3.3.29: Overall Design Week 13 (14/07/2025).

Fig 3.3.30: Clock Display animation (MP4), Week 13 (14/07/2025).

Back to T.O.C

3.4 Final Outcome

My font features bold characters with minimal spacing, giving it a strong visual presence. Inspired by retro-futurism, I used the aesthetic of the popular classic game Tetris into the design. This combination combines nostalgic elements from the past with a futuristic touch, reflecting the feel of retro-futurism while enhancing the visual identity of the font.

Download Made Gravik

Fig 3.4.1: Font Information (PDF), Week 12 (08/07/2025).

Fig 3.4.2: Final Font (PDF), Week 12 (08/07/2025).

Fig 3.4.3: Final Font baseline with and without outline (PDF), Week 12 (08/07/2025).

Fig 3.4.4: Fontlab Screen grab, Week 12 (08/07/2025).

Fig 3.4.5: Font Presentation 1, Week 12 (12/07/2025).

Fig 3.4.6: Font Presentation 2, Week 12 (12/07/2025).

Fig 3.4.7: Font Presentation 3, Week 12 (12/07/2025).

Fig 3.4.8: Font Presentation 4, Week 12 (12/07/2025).

Fig 3.4.9: Font Presentation 5, Week 12 (12/07/2025).

Fig 3.4.10: Font Application 1, Week 12 (13/07/2025).

Fig 3.4.11: Font Application 2, Week 12 (13/07/2025).

The submission for the Honor Competition couldn't be submitted because the category I chose was not available in the submission form. Due to the deadline, I wasn't able to change the design I had already created. Below is the final outcome design for Standby category.

Fig 3.4.12: Clock Display (HONOR), Week 13 (14/07/2025).

Fig 3.4.13: Personalized Design (HONOR), Week 13 (14/07/2025).

Fig 3.4.14: Overall Design (HONOR), Week 13 (14/07/2025).

Fig 3.4.15: Clock Display Animation (MP4), Week 13 (14/07/2025).

Fig 3.4.16: Design Elaboration for HONOR (PDF), Week 13 (14/07/2025).

Fig 3.4.17: Final Task 3 Compilation (PDF), Week 13 (14/07/2025).

Font Preview

Back to T.O.C

4. Feedback

Week 9

General Feedback: Always work on the uppercase alongside the lowercase to see the difference. Specify a clear target application for the font.

Specific Feedback: Mr. Vinod is okay with all the ideas, but I need to expand on them first because some of them seem boring, and he wants to see the expanded version before giving further feedback.

Week 10

General Feedback: Make sure to make lowercase side by side with the uppercase.

Specific Feedback: All good, continue

Week 11

General Feedback: Type out the punctuation to know the size and ratio

Specific Feedback: All my letters and numerals already good, just need some adjustment for the brackets in punctuation

Week 12

General Feedback: When creating a font presentation, make sure to really showcase about your font, don't make it too complicated.

Specific Feedback: The font presentation already good, keep up and explore more.

Week 13

General Feedback: Give an explanation about the purpose of your font at the start of the final outcome.

Specific Feedback: All the works already good.

Back to T.O.C

5. Reflection

Experience

This task required more creative thinking, as there are already many font that have been created. Designing a unique and different one was challenging. Back in Typography class in Semester 1, we were only required to make a few letters but not the whole typeface. Although it was difficult, I found the process interesting and enjoyable, especially the feeling of having my own font that I can actually use. While creating this font, I struggled to find its true identity due to many external factors. I wasn't confident at first, as I thought Made Gravik was a simple and boring font. In the end, I tried to embrace it, and while working on the font presentation, I finally discovered its true identity and it turns out, it's not bad at all. Overall, the experience was fun, and I learned a lot from this module.

Observations

The process of creating an entire font is challenging. I needed to design a new font with creativity while also maintaining the readability itself. Making the uppercase is alright until I need to make the lowercase of it. It was hard because I need to maintain the boldness of my typeface while ensuring that it remained readable. While working on the lowercase, I also learned how to properly design certain characters such as 'f', 'g', 't' and more. These letters require attention because they can ended up above the x height or fall below the baseline.

Findings

The final project for this module was exactly what I expected would be, creating a font was completely a new experience for me. I'm glad that I finished it and gave my best for it. The process of creating this font helped me discover my own artistic style, which gave me the confidence to continue. Overall, I never expected to have the opportunity to create Made Gravik, I hope that in the future, this work will remain one of the memorable pieces I've made.

Back to T.O.C

6. Further Reading

Fig 6.1: How to make Punctuation and Symbols.

Source: https://designwithfontforge.com/en-US/Punctuation_and_Symbols.html

The first step in designing punctuations is to create the period (".") character. This will be the guide to create the other punctuation marks. The period is taken from the "i" character, after extracted, make it a little bit larger. This dot can become the base for comma, colon, semi colon, question mark, exclamation mark and more.

Fig 6.2: Period beside the "i" character.

The next punctuation to make is comma, comma usually have two forms. The top of comma is slightly lighter than period and needs to be long enough. If we already done with comma, it is easy to make semi colon.

Fig 6.3: Two forms of comma.

After making comma and period, we can create exclamation and question mark. The bar above the period is slightly bigger at the top than the bottom.

Fig 6.4: Exclamation mark example.

Creating a question mark can be tricky because it requires a balance open curve above the period. We can use 'c', 'C', 'G', and 'S' glyph to provide the base of the design.

Fig 6.5: Question mark example using different basis.

After creating all of the above, we can begin creating additional symbols such as bracket, bar, quotes and more. Quotes are similar to comma but slightly longer and often curve more.

Fig 6.6: Quotation mark.

Fig 6.7: How to make Brackets.

Source: https://www.societyoffonts.com/2018/01/16/punctuation-part-5tall-thin/

All of the brackets and parentheses are all the same height and alignment. They line up vertically at the ascender line and drop below the baseline. The reason for this kind of alignment is to center around the x-height, because it tend to look right if they center vertically around characters this height. In conclusion, try to make it slightly longer than the uppercase and make it below the baseline.

Back to T.O.C

Search This Blog

Madeline Ordelia Tjahjadi (0376920)