Advanced Typography | Task 3 / Type Expression and Application

12/11/24 - 17/12/24 | Week 8 - Week 13
Nadia Chong Wen | 0355736 | Bachelor's of Design (Honours) in Creative Media
Task 3 / Type Expression and Application


Table of Contents

  1. Instructions
  2. Task 3
    1. Type Expression
    2. Final Outcome
  3. Feedback
  4. Reflection
  5. Further Reading

2. Instructions

↑Back to the top↑


3. Task 3

Proposal

Figure 1.0 | Proposal Slides / Week 8 (14/11/24)

I decided to go with Idea No. 2 in the end since I thought it would be fun to experiment with creating another kind of gothic typeface.

Researching/Collecting References

Figure 1.1 | References #1 - Gothic Type / Week 9 (20/11/24)

Figure 1.2 | References #2 - Rounded Type / Week 9 (20/11/24)

As gothic typefaces are slightly restrictive as a typeface, I looked for as many gothic fonts to understand their strokes and how they approach the lettering. Other than that, I looked for fonts with rounded corners with a similar base to gothic fonts to make my own type.

Digitization

Rough Digitization

As it was hard to procure a pen that could achieve my wanted type and I was falling behind, I decided to go straight to digitization within Adobe Illustrator instead of sketching in a notebook or note app as to have more structure to create my font.

Figure 1.3 | Attempt 1# / Week 10 (26/11/24)

I used the guides and a rectangle as a base for making the type and structuring it correctly. I learned the gist of how to digitize a gothic font from this youtube video on how to make gothic fonts. I followed the base and estimated the size and structure of the font from the references.

Below is my first successful attempt at the digitization of the uppercase letters:

Figure 1.4 | Attempted Digitized Uppercase / Week 11 (03/12/24)

Feedback and Adjustments

Figure 1.5 | Adjusted Digitized Uppercase / Week 11 (03/12/24)

After Mr. Vinod gave his feedback on what I should adjust, I adjusted the height of some of the letterforms that have gone above the ascender height. I also adjusted some of the structures of the letterforms to make them look more precise and fitting to the other letters. I wanted to maintain a sharp edge for most of the letters as to give it a professional look.

Here is a side-by-side comparison to one of the letterforms:

Figure 1.6 | Adjusted Letterform "Z" / Week 11 (03/12/24)

Uppercase and Lowercase

Figure 1.7 | Adjusted Uppercase and Lowercase / Week 12 (10/12/24)

I repeated the process and principles onto the letters and made adjustments whenever needed. I struggled with shaping parts of the letterforms due to the angle of the pen. It was really difficult to find the right angle for the pen to go towards in order to look right.

I also noticed that many people I have shown my letterforms have stated that it looks very generic and something you see everywhere. So I decided to use a round pen to see if it would give me any ideas to make it more unique. 

Figure 1.8 | Uppercase and Lowercase Round Pen Test / Week 12 (14/12/24)

After this, I decided to round the original pen more in order to produce a rounder and more unique and cute appearance for my type. I kept the base of the gothic fonts and added elements that would make the type more visually appealing and unique as compared to the other fonts.

Below is the adjusted uppercase and lowercase letterforms:

Figure 1.9 | Uppercase and Lowercase Outline / Week 12 (14/12/24)

I noticed that the uppercase "S" did not look right and slightly out of place compared to the other letterforms as its base, so I adjusted it in order to make is more similar to the rest of the adjusted letterforms. I smoothened up some of the hard edges of the letterforms to make it easier to look at.

Finalized Uppercase and Lowercase Letterforms


Figure 2.0 | Finalized Uppercase and Lowercase / Week 12 (14/12/24)

Figure 2.1 | Finalized Uppercase and Lowercase (Baseline) / Week 12 (14/12/24)

Figure 2.2 | Finalized Uppercase and Lowercase Outline (Baseline) / Week 12 (14/12/24)

Numerals & Punctuation

Figure 2.3 | Punctuation Attempt / Week 12 (14/12/24)

I did the shapes of the letterforms before the I started formatting in order to get the gist of what looks right for the type. Then I studied the baseline of punctuation and numerals through studying the serif typefaces as gothic typefaces often do not include punctuations other than period and comma as well as the quotation marks.

I adjusted the punctuation according to the baseline and shapes as well as did the the "+," "-," and "_" letterforms according to it.

Figure 2.4 | Numeral Attempt / Week 12 (14/12/24)

For the numerals, I decided to go for a similar size to the lowercase letters which was thin and long compared to the uppercase letters. I adjusted them after I studied that the numbers had almost the same ascender height.

Figure 2.5 | Numerals & Punctuations Outlines / Week 12 (14/12/24)

Finalized Numerals & Punctuation

Figure 2.6 | Numerals & Punctuations / Week 12 (14/12/24)

Figure 2.7 | Numerals & Punctuations (Baseline) / Week 12 (14/12/24)

Figure 2.8 | Numerals & Punctuations Outline (Baseline) / Week 12 (14/12/24)

FontForge

In order to make the font, I decided to use FontForge in order to get my letterform designs made into a font.

Importing letterforms into Fontforge

After finishing the digitization of the font, I used the guide that Mr. Vinod shared with us on how to use FontForge.

Figure 2.9 | Asset Exporting / Week 13 (15/12/24)

I used the Asset Export Tool to export my letterforms into the SVG format as instructed.

Figure 3.0 | Importing A / Week 13 (15/12/24)

After categorizing the files into its own respective folders, I imported each letter onto FontForge accordingly. However, I noticed that the letterforms were all too big didn't follow the x height and ascender and descender correctly. I decided to try to find the issue and it turned out that it was due to the "Scale to Fit" check that it wasn't fitting accordingly.

Unfortunately, I used too much time to find out and I had to redo the importing and adjusting of transformations all over again.

Figure 3.1 | Imported Letterforms / Week 13 (15/12/24)

Kerning

Figure 3.2 | Sidebearing measurement table / Week 13 (15/12/24)

For the next part, I will have to kern the letterforms to make sure it is readable.

Figure 3.3 | Uppercase Kerning / Week 13 (15/12/24)

Figure 3.4 | Lowercase Kerning / Week 13 (15/12/24)

Figure 3.5 | Numeral Kerning / Week 13 (15/12/24)

Figure 3.6 | Punctuations Kerning / Week 13 (15/12/24)

Font Presentation

Before starting the font presentation, I searched Color Hunt for a fitting color palette so that the presentation could pop.

Figure 3.7 | Color Palette / Week 13 (16/12/24)

As I did not have much time until the task is due, I challenged myself to make some creative designs with the type I have made while utilizing Illustrator's abilities. As it was a font presentation, I wanted to show how capable my type face of a variety of things despite its limitations.

Figure 3.8 | Choosing colors and design / Week 13 (15/12/24)

I made some drafts on presenting my font normally and wondering which colors to choose from. There are some colors that don't have enough contrast or balance so I needed to be careful about choosing my design. In the end, I ended up choosing the darker colored one due to its simplicity and small feeling.

Figure 3.9 | Making a little cute mascot / Week 13 (15/12/24)

I thought that one of the ways that I could utilize my font was to make a face with it. The moment I made the face, I immediately knew that I should surround the creature with words. However, the outside feels very empty so I added another layers of words.

Figure 4.0 | Adding another layers of words / Week 13 (15/12/24)

For the rest of the designs, I used repetition in order to make multiple designs that could work in the next part of this assignment. For one, I was inspired by an old album.

Finalized Font Presentation Artworks

Figure 4.1 | Font Presentation #1 / Week 13 (15/12/24)

Figure 4.2 | Font Presentation #2 / Week 13 (15/12/24)

Figure 4.3 | Font Presentation #3 / Week 13 (15/12/24)

Figure 4.4 | Font Presentation #4 / Week 13 (15/12/24)

Figure 4.5 | Font Presentation #5 / Week 13 (15/12/24)

Font Application

Figure 4.6 | Elements for Application / Week 13 (15/12/24)

Compared to Task 2, I'm going for a more vibrant and happy feeling when it comes to the applications this time while also making it very very cute. Thanks to me having prepared before hand and knowing what I wanted to do with the elements, it was easy to do the application.

Finalized Font Application

Figure 4.7 | Application 1 / Week 13 (15/12/24)

Figure 4.8 | Application 2 / Week 13 (15/12/24)

Figure 4.9 | Application 3 / Week 13 (15/12/24)

Figure 5.0 | Application 4 / Week 13 (15/12/24)

Figure 5.1 | Application 5 / Week 13 (15/12/24)


Final Outcome: Task 3

Click here to download "Sweethic"

Figure 5.2 | Finalized Letterforms (PDF) / Week 13 (15/12/24)

Figure 5.3 | FontForge Screengrab / Week 13 (15/12/24)

Figure 5.4 | Font Presentation #1 / Week 13 (15/12/24)

Figure 5.5 | Font Presentation #2 / Week 13 (15/12/24)

Figure 5.6 | Font Presentation #3 / Week 13 (15/12/24)

Figure 5.7 | Font Presentation #4 / Week 13 (15/12/24)

Figure 5.8 | Font Presentation #5 / Week 13 (15/12/24)

Figure 5.9 | Application 1 / Week 13 (15/12/24)

Figure 6.0 | Application 2 / Week 13 (15/12/24)

Figure 6.1 | Application 3 / Week 13 (15/12/24)

Figure 6.2 | Application 4 / Week 13 (15/12/24)

Figure 6.3 | Application 5 / Week 13 (15/12/24)

Figure 6.4 | Final Outcome (PDF) / Week 13 (15/12/24)

Font Tester


4. Feedback

Week 8

Independent Learning Week

Week 9

Absent

Week 10

Absent

Week 11

General Feedback: 

  • Adjust the height of the T, J, and E. Adjust the P.

Specific Feedback: 

  • Looks good, might want to adjust the elements

Week 12

General Feedback: 

  • Understand the elements of the Letter.

Specific Feedback: 

  • Finish up the letters and move on to the collages.

↑Back to the top↑


5. Reflection

Experience:

This task was the most difficult task for me. It was a rollercoaster of feelings and frustrations but I came out alive and that's all that matters. The font making was especially fun and even though it was difficult, I enjoyed making my own font. Once again though, my biggest problem was the collateral and application. It's incredibly hard to make artworks with letterforms, but I managed to do it in the end. Finally, one more to go.

Observation:

I observed that I quite enjoy font making. It was really frustrating when you don't get it at first but the satisfaction of learning your mistake and how it managed to fix so much despite being such a little thing is what made me like this assignment despite everything. I also noticed that some of my letters weren't as cleaned up as I thought a little too late. It means I have to observe the letterforms more into the future if I were to ever make my own font again.

Findings:

I learned there are always ways to make your work unique even if it started off as something that many are familiar with. It was discouraging to hear people say that my work was generic and boring, but I managed to get the approval of fellow designers after I adjusted my work. This entire assignment was an experience... and one that I have not slept at all for about 2 days now.

↑Back to the top↑


6. Further Reading

Figure 6.5 | A Type Primer

I decided to read A Type Primer after browsing through all the books and finding that this has pictures of gothic old text and explantations of parts of the letterforms, which is what I'm doing for this task. I'm going to read the Development chapter in order to gain more knowledge on what to do.



Figure 6.5 | Classification by Alexanfer Lawson

Blackletter is a based on the hard copying styles that were used in the 1450s in Northern Europe. Italic is closer to contemporary Italian handwriting within the Year 1500 and were originally their own set of type before the romanization of it.

Figure 6.6 | Contrast

The basic principles of design applies to typography and one of them would be contrast. Combining simple contrasts can produce numerous variations and adding color helps it even more.

↑Back to the top↑

Comments