ADV TYPOGRAPHY - Task 03: Type Exploration & Application

19/11/2024 - 16/12/2024  | Week 09 - Week 13

Koh Sher Wei | 0353816

Advanced Typography | Bachelor of Design in Creative Media


List of Contents:




MIB (Instructions) : 


Task 03: Type Exploration and Application

For task 03, we are essentially tasked to utilise everything we've learned from task 1 and task 2. There are three categories we can choose from, to complete this task:

1. Focus on an issue where typography can make a difference. 
2. Select a widely used typeface or lettering style and improve it.
3. Experimental. Choose an unconventional medium or approach for creating or showcasing typography. 

The final product should be a completely generated typeface, where we need to showcase how the typeface would be applied.


Proposal
Proposal slides by Sherwei Koh

We were told to present three ideas to Mr.Vinod and decide on which one would be best to develop. 

Initially I wanted to work with my third idea, to make a fisheye lens but Mr.Vinod told me to try and explore Idea 01 instead. So my sketching process took a bit longer as I ended up experimenting with both ideas. 

fig 1.1 FIsheye idea exploration [W9_25/11/24]

Research/References
Mr.Vinod suggested that I can try doing a monospace font. He advised me to replicate the film strip design and make it into a frame for my letters; hence making it a monospace font would be suitable. So, I looked up a references of film strips for inspiration. 

 
fig 2.1 Film Strip References [W10_03/12/24]

Digitisation Process

fig 3.1 First film strip exploration [W10_03/12/24]

Initially, my idea was to use the Courier typeface as a base. So what I did was, I tried to make it seem like it has a light leak blue effect. So I make the edges with gausian blur and added some texture to the main body of the font. However, sir told me it would be better to come up with a completely new typeface so I scratched this idea. 

fig 3.2 Film Strip frame [W10_03/12/24]


fig 3.3 Second film strip exploration [W10_03/12/24]

So for my next idea, I played around with rectangles and made them into a sort of unbalanced typeface. The reason for this is that I still wanted to do something that gives off light leak, so as to not stray too far from my initial proposal. 

I didn't have much time to do more exploration so I went with this idea as I felt it was not too bad. 

fig 3.4 Film strip typeface standard form [W10_03/12/24]

In terms of standardising the structure of my font, I used pixel grids instead of making my own. I found it was more convenient considering my letters are made of rectangles. Meaning, it would be easier to measure my rectangles and distance between the shapes by using grids. Doing monospace font also means I dont have to do kerning, so I just had to make sure that the letters aligned in height and is centered. 

fig 3.5 Typeface construction in different colours [W10_03/12/24]

fig 3.6 Typeface with rounded corners [W10_03/12/24]

In terms of the actual construction of letters, I followed a specific pattern. Fig 3.5 is a depiction of the different rectangles and how I arranged them. Once I've completed the proper structure, I unite the shapes with pathfinder so that I can round the corners at 13px.  Most of my letters follow the rules of this letter A, to ensure that every other letter is consistent. 

Uppercase

fig 4.1 Uppercase Typeface with filmstrip frame [W10_03/12/24]

This is a the full set of my uppercase alphabets. Every letter is aligned by height but some letters are slightly off in width as there are letters like "M", "W", "Z, and "N" that can't conform to become thinner. 

fig 4.2 Variations of different letters [W10_03/12/24]

I also struggled with the letters X, Y and Z because I wasn't sure how to incorporate the pattern that I created for letter A. "S" was also a tricky letter to build due to its curvy nature.

Numerals & Punctuations

fig 5.1 font numerals [W11_10/12/24]

fig 5.2 font punctuations [W11_10/12/24]

For the numerals, it was pretty similar to the structure of uppercase alphabets so I just followed the same construction method. 

Punctuations took a bit more time but I basically used the left side of my letter pattern as the main vertical base. I also made sure the full stop and coma aren't too small as it's a monospace font so it had to fill up more of the space in frame. The punctuations on the top layer of fig 5.2 was relatively simple because of how similar they are to one another. However, the bottom layer required a bit more work, and I had to change the angle of my slash a few times so it matches the hashtag and percentage. 

Fontforge

fig 6.1 Letters, numerals and punctuations in FontForge [W12_10/12/24]

I used Fontforge to generate my font, so I had to export every artboard as SVG and then import them into the app. It was quite tedious. 

fig 6.2 Letter "A" in Fontforge [W12_10/12/24]

fig 6.3 Font test [W12_10/12/24]

Then, I checked that the letters fit well and was properly centered so that the spaces would be even. I had to correct a few letters and punctuations but that was it, I didn't do kerning because it's a  monospace font.

Final Font Presentation
We were told to keep it simple to showcase our font, but a fully while background would have been too plain so I added a small border for the font name and year in black. 

fig 7.1 Uppercase alphabets presentation [W12_12/12/24]

fig 7.2 Font presentation in black background [W12_12/12/24]

fig 7.3 Numerals presentation [W12_12/12/24]

fig 7.4 Punctuation presentation in black background [W12_12/12/24]

fig 7.5 Font phrase presentation [W12_12/12/24]


Font Application
The font that I created is more for title display due to its monospace frame. So my idea is to use it for a film fest poster, and merch for the festival. 

fig 8.1 Application designs in illustrator [W12_12/12/24]

fig 8.2 Poster mockup in Adobe Photoshop [W12_12/12/24]

I found some mockups and designed a few posters and horizontal banners. Then imported the design into adobe photoshop to use it on the mockups. 

Final Font Application

fig 9.1 Shirt Font application [W12_14/12/24]

fig 9.2 Flyer font application [W12_14/12/24]

fig 9.3 Billboard font application [W12_14/12/24]

fig 9.4 Lanyard font application [W12_14/12/24]

fig 9.5 Poster font application [W12_14/12/24]


Final Compilation

Download link: filmstrip_mono


fig 10.1 Font uppercase, numerals and punctuations in PDF [W13_17/12/24]

fig 10.2 Font forge Screengrab [W13_17/12/24]

fig 10.3 Uppercase alphabets presentation [W12_12/12/24]

fig 10.4 Font presentation in black background [W12_12/12/24]

fig 10.5 Numerals presentation [W12_12/12/24]


fig 10.6 Punctuation presentation in black background [W12_12/12/24]

fig 10.7 Font phrase presentation [W12_12/12/24]

fig 10.8 Poster font application [W12_14/12/24]

fig 10.9 Lanyard font application [W12_14/12/24]

fig 10.10 Shirt Font application [W12_14/12/24]

fig 10.11 Flyer font application [W12_14/12/24]

fig 10.12 Billboard font application [W12_14/12/24]

fig 10.13 PDF submission compilation [W13_17/12/24]



Feedback

Week 08
General Feedback:
- ILW

Week 09
General Feedback:
- Try nit to use extravagant sketches as it may be complicated when developing the proper form of a font style. 
- Letter face grid does not have to be consistent not does it have to be only vertical and horizontal.
- Build a grid that can accommodate to your font, uppercase and lowercase. 
- Expect all Uppercase letters to be completely built by next week for feedback.

Specific Feedback:
- I can try out ideas 1 and 3.
 - Idea 01 can be developed, try to gain inspiration from tate gallery.

Week 10
General Feedback:
- When doing the lowercase letters, make sure that we place it next to the uppercase version to compare. 
- Have to ensure standardised form for upper and lowercase, so it's important to use grid.  

Specific Feedback:
- Try experimenting with monospace letterform. 
- The film strip idea would be better than the fisheye.
- Explore with new letterface structure instead of using a basic courier font. 

Week 11
Specific Feedback:
- Mr. Vinod said it looks cool :] 

Week 12
General Feedback:
- Displays your alphabets in different sizes for font presentation.

Specific Feedback:
- Don't include photos for font presentation, keep it simple to showcase your font.
- Try not to go for colour when doing your font presentation, can just do it in black and white. 



Reflection

Experiences
Honestly, this was the most stressful task of this module. The idea of creating a font seems very fun, but the technicalities of it is actually very time-consuming. Not only that, even the creative process of coming up with a typeface is difficult. We needed to figure out a way to make our ideas come to reality while keeping structure, so I think it's definitely not easy. 

Observations
Precision, form and structure is very important in creating a font. Even the mistake of making your font too small may end up changing the entire vibe of the font when you enlarge it to scale. There's also so many rules that we need to follow when it comes to constructing punctuations. Punctuations very tasking due to their "messy" nature. Every punctuation comes in different shapes with different height and different width. So it's important to observe and explore how other fonts arrange their punctuations. 

Findings
Realistically, this whole task just makes me understand that creating a font is not my forte. It's very technical. Also, so many fonts already exist that it's difficult to even come up with a truly authentic idea. Most likely, any idea you have in mind has already been explored and can be found on pinterest or other sites. Most of them just aren't made into actual font files, but the designs do exist. 


Further Reading

fig 11 Poster font application [W12_14/12/24]

"Advanced Typography: From Knowledge to Mastery" by Richard Hunt is a comprehensive guide that delves into the art and craft of typography beyond the basics. Aimed at students and designers seeking to deepen their typographic skills, the book combines visual, linguistic, historical, and psychological perspectives to provide a holistic understanding of typography's role in modern design. 

While I don't have access to the full text of "Advanced Typography: From Knowledge to Mastery" by Richard Hunt, I can provide an overview of the themes likely covered in the section titled "The Changing Technology and Practice of Type," based on the book's description and table of contents.

  • Historical Evolution: The transition from traditional typesetting methods to digital typography, highlighting significant technological advancements.

  • Impact of Digital Tools: How software and digital platforms have transformed typographic design, offering new capabilities and efficiencies.

  • Designing Across Media: The challenges and considerations when applying typography in various media formats, such as print, web, and mobile interfaces.

  • Cultural Adaptability: The necessity for typographers to design typefaces that are culturally sensitive and appropriate for diverse audiences.

  • Customization and Creation: The growing trend of customizing existing typefaces or creating new ones to meet specific design needs or brand identities.

  • Integration of Theory and Practice: The importance of combining theoretical knowledge with practical application to make informed typographic decisions.


Popular Posts